>

也可能出现白屏,今天我们一起来看下如何去评

- 编辑:澳门博发娱乐官网 -

也可能出现白屏,今天我们一起来看下如何去评

重要内容可见时间

重要内容可见,这里可以认为是商品数据,商品数据可见要等 JS 执行完并且异步请求发送出去回来后才可见。

TMS[1] 的异步请求大多走招商数据平台(TCE[2])的接口,测试其单个请求在真机的耗时约为 110ms(样本较少,未大量测试)。

script inject 和 async

JavaScript

<!-- BAD --> <script src="//g.alicdn.com/large.js"></script> <!-- GOOD --> <script> var script = document.createElement('script'); script.src = "//g.alicdn.com/large.js"; document.getElementsByTagName('head')[0].appendChild(script); </script>

1
2
3
4
5
6
7
8
9
  <!-- BAD -->
<script src="//g.alicdn.com/large.js"></script>
 
<!-- GOOD -->
<script>
  var script = document.createElement('script');
  script.src = "//g.alicdn.com/large.js";
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

我们通常用这种 inject script 的方式来异步加载文件,特别是以前 Sea.jsKISSY 的盛行时,出现大量使用$.use 来加载页面入口文件。这种方式和 async 的一样都能异步化 JS,不阻塞页面渲染。但真的是最快的吗?

一个常见的页面如下:一个 CSS,两个异步的 JS

JS 使用 script inject 的方式测试结果如下,DEMO:

图片 1

JS 使用 async 的方式测试结果如下, DEMO:

图片 2

对比结果发现,通过 `` 的方式的 JS 可以和 CSS 并发下载,这样整个页面 load 时间变得更短,JS 更快执行完,这样页面的交互或数据等可以更快更新。为什么呢?因为浏览器有类似 ‘preload scanner’ 的功能,在 HTML 解析时就可以提前并发去下载 JS 文件,如果把 JS 的文件隐藏在 JS 逻辑中,浏览器就没这么智能发现了。

也许大家会说,现在 CSS/JS 都预加载到客户端了,怎么加载不重要。但页面有可能分享出去也有可能运行在浏览器中,也有可能预加载失效。

综合上面 async 和 defer,推荐以下用法。

JavaScript

<!-- 现代浏览器用 'async', ie9-用 'defer' --> <script src="//g.alicdn.com/alilog/mlog/aplus_wap.js" async defer></script>

1
2
<!-- 现代浏览器用 'async', ie9-用 'defer' -->
<script src="//g.alicdn.com/alilog/mlog/aplus_wap.js" async defer></script>

其实现在无线站点 aplus.js 可以完全用这种方式引入,既不会阻塞 DOMCSSOM,也不会延长整个页面 onLoad 时间,而不是原来的 PC 上的 script inject方式。

如果 aplus.js 在 PC 上这么用,IE 8/IE 9 应用的是 defer 属性,不会阻塞页面渲染,但是这个 JS 需要执行完后才触发 domReady(DOMContentLoaded)事件,故在 IE 8/IE 9 下可能会影响 domReady 的时间。

白屏问题

  1. 白屏的根本原因是浏览器在渲染的时候没有请求到或请求时间过长造成的。
  2. 浏览器对于图片和CSS,在加载时会并发加载(比如一个域名下同时加载多个文件),浏览器对于JavaScript,在加载时会禁用并发,并且阻止其后的文件及组件的下载。所以将js放在页面的顶部也可能会导致白屏。
  3. 不同浏览器的处理CSS和HTML的方式是不同的:
    比如,IE、chrome浏览器的渲染机制,采用的是等CSS全部加载解析完后再渲染展示页面。
    Firefox则是在CSS未加载前先展示html的内容,等CSS加载后重新对样式进行修改。

所以:白屏的出现情况往往因为CSS样式被置于底部(最后加载),当新窗口打开,刷新等的时候,页面会出现白屏。
如果使用 @import标签,它引用的文件则会等页面全部下载完毕再被加载,也可能出现白屏。

因此,
css使用 link 标签将样式表放在顶部,防止白屏问题出现。
JS 的放置位置一般是在body的闭合标签之前。

async和defer

js对页面加载和渲染有两个影响:阻塞后面内容的呈现和阻塞其后组件的下载,是因为浏览器的渲染机制:对于图片和css,在加载时会并发加载(如一个域名下同时加载两个文件)但在加载JavaScript时会禁用并发,并阻止其它内容的下载。所以把JavaScript放入页面顶部也会导致白屏现象
当用link标签在head里引入.js文件则需要用async和defer来异步
async:加载渲染后续文档元素的过程和.js文件的加载和执行并行进行(异步),不保证顺序
defer:加载渲染后续文档元素的过程和.js文件的加载和执行并行进行(异步),但.js文件执行需要在所有元素解析完之后,DOMContentLoaded事件触发之前完成。

2. 解释白屏和FOUC

  • 白屏问题
  1. 白屏的根本原因是浏览器在渲染的时候没有请求到或请求时间过长造成的。
  2. 浏览器对于图片和CSS,在加载时会并发加载(比如一个域名下同时加载多个文件),浏览器对于JavaScript,在加载时会禁用并发,并且阻止其后的文件及组件的下载。所以将js放在页面的顶部也可能会导致白屏。
  3. 不同浏览器的处理CSS和HTML的方式是不同的:
    比如,IE、chrome浏览器的渲染机制,采用的是等CSS全部加载解析完后再渲染展示页面。

Firefox则是在CSS未加载前先展示html的内容,等CSS加载后重新对样式进行修改。
由此我们可以推断出的结果是:
白屏的出现情况往往因为CSS样式被置于底部(最后加载),当新窗口打开,刷新等的时候,页面会出现白屏。
如果使用 @import标签,它引用的文件则会等页面全部下载完毕再被加载,也可能出现白屏。
所以解决的办法是css使用 link 标签将样式表放在顶部,防止白屏问题出现。白屏不是bug,而是由于浏览器的渲染机制。

  • FOUC
    FOUC (Flash of Unstyled Content) 无样式内容闪烁:
    如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面才突然展现出样式)。对于 Firefox 会一直表现出 FOUC 。
  • 脚本会阻塞后面内容的呈现
  • 脚本会阻塞其后组件的下载

对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件)。但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载。
所以所以尽量把 JavaScript 放入页面body底部

页面白屏与瀑布流分析方法

2015/12/03 · HTML5, JavaScript · 1 评论 · 瀑布流, 白屏

原文出处: 淘宝前端团队(FED)- 妙净   

图片 3

无线页面的开发在我们的日常工作中越来越重要,无线的性能也是我们需要重点关注的,而加载的性能又是无线性能中的一个重要问题。那么,今天我们一起来看下如何去评估、测试无线页面的加载性能。

为了方便分析页面的加载过程,这里将网络设置成最慢的 GPRS,并将加载过程录制下来,通常你可以通过 Chrome 自带的 timeline, 勾选 screenhot,可以得到详尽的过程,如下图:

图片 4

这里为了和请求一一清晰对照,用额外录屏工具( licecap )录制下来。下文以淘宝双 11 男装分会场的预发页面作为测试,录制 结果 gif 如下,录制的 FPS 为 8。

帧分析如下:

第一帧:重新刷新页面,发起 HTML 请求,中间完整页面是刷新前的,请无视之。

图片 5

终于等到第 7 帧,HTML 加载并解析完成,发出页面中的请求,同时 CSS/JS 的地址都收敛在 //g.alicdn.com 同一个域名下, Chrome 下 HTTP 1.1 协议下一个域名下支持 6 个并发。

1 年前,PC 上以前还有多个域名分区(img01-04.tbcdn.cn),PC 上首屏图片多,这样可并发更多,但更多的域名引入,也加大了域名解析的成本,权衡之下淘宝之前图片域名选择了 4 个;后来集团经过轰轰烈烈的 HTTPS 改造,图片推荐收敛到 gw.alicdn.com ;手淘下现在使用 SPDY + HTTPS,相比 HTTP 1.1 ,更安全且可以多路复用。

图片 6

到第 20 帧, CSS 下载完,DOM 和 CSSOM 都准备 OK 了,页面则开始渲染了;这是在 Chrome 下面看到的情况,但在 iOS 上并非如此,它需要 JS 加载并执行完才渲染页面。

图片 7

第 21 帧,紧接着,CSS 中的背景图开始相继渲染,可见 CSS 中渲染图片也是有点耗时的。

图片 8

第 23 帧,前面并行下载的 JS 都下载完,也开始执行了,看“疯狂 top 榜”是 JS 抽取出来的。同时 aplus 请求也开始请求,这是个 getScript 的异步请求,可见异步请求真没有阻塞页面的渲染。

图片 9

第 25 帧,JS 还在继续执行,第一张图片是 JS 根据当前 dpr、强弱网络、设备宽度等算出最适合的图片开始加载这张大 banner 了,并且开始发送数据请求了。

图片 10

到 27 帧,终于数据请求回来了,并且把文字和图片渲染到页面上了。

图片 11

然后下一帧 28,开始请求商品图片了。

图片 12

到 45 帧,6 个图片都在并发请求,同上 gw.alicdn.com 同一个域下并发 6 个请求。但首屏除了大图外只有 4 张图(2 张商家 logo 被底部 bar 挡住了),这里发出了 6 个图片请求,可见这个页面的懒加载的 buffer 值可以设置得更小。

图片 13

从 28 帧到 50 帧,经历了很长的时间,第一张图片终于显示出来了。另外看到 aplus_v2 执行完后,又发起了 spm 等请求,后面 3 个请求( aplus-proxy.html/isproxy.js/m.gif )还是串行的。

图片 14

最后到第 61 帧,终于所有的图片都加载完了,最后看下,最后下载完的是大 banner 图,因为有 46.9k ,这张图的大小可能成为此页面的 load 时间的关键;如果这张图没有这么大,最后下载完的可能是用于埋点的 m.gif。

图片 15

从上面整个请求的瀑布流分析下来,我们来回顾下页面的关键时间点:

async 和 defer

script 标签上可以添加 defer 和 async 属性来优化此 script 的下载和执行。

FOUC

FOUC (Flash of Unstyled Content) 无样式内容闪烁:
如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面才突然展现出样式)。对于 Firefox 会一直表现出 FOUC 。

  • 脚本会阻塞后面内容的呈现
  • 脚本会阻塞其后组件的下载

对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件)。但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载。

所以尽量把 JavaScript 放入页面body底部。

CSS和JS在HTML中的位置

一般CSS放在head里用<style></style>包裹,或用link标签引入css文件
JS因为浏览器渲染机制会放在底部</body> 之前,就是在加载渲染完HTML、CSS后在加载JS,不受白屏影响;如果用link标签引入则需要defer/async让其异步使页面不受白屏影响

3. async和defer的作用是什么?有什么区别

defer和async是script标签的两个属性,用于在不阻塞页面文档解析的前提下,控制脚本的下载和执行。

  • 页面的加载和渲染过程:
  1. 浏览器通过HTTP协议请求服务器,获取HMTL文档并开始从上到下解析,构建DOM;
  2. 在构建DOM过程中,如果遇到外联的样式声明和脚本声明,则暂停文档解析,创建新的网络连接,并开始下载样式文件和脚本文件;
  3. 样式文件下载完成后,构建CSSDOM;脚本文件下载完成后,解释并执行,然后继续解析文档构建DOM
  4. 完成文档解析后,将DOM和CSSDOM进行关联和映射,最后将视图渲染到浏览器窗口,在这个过程中,脚本文件的下载和执行是与文档解析同步进行,也就是说,它会阻塞文档的解析,如果控制得不好,在用户体验上就会造成一定程度的影响。
    所以我们需要清楚的了解和使用defer和async来控制外部脚本的执行。
  • 作用

defer:用于开启新的线程下载脚本文件,并使脚本在文档解析完成后执行。
async:新增属性,用于异步下载脚本文件,下载完毕立即解释执行代码。

  • 区别
  1. <script src="script.js"></script>
    没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

  2. <script async src="script.js"></script>
    有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。

  3. <script defer src="myscript.js"></script>
    有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

  4. 浏览器的渲染机制

首先我们要了解几个概念
DOM
Document Object Model,浏览器将HTML解析成树形的数据结构;输出的树,也就是解析树,是由DOM元素及属性节点组成的。DOM是文档对象模型的缩写,它是html文档的对象表示,作为html元素的外部接口供js等调用。

CSSOM
CSS Object Model,浏览器将CSS解析成树形的数据结构

Render Tree
DOM和CSSOM合并后生成Render Tree

图片 16

Layout
计算出Render Tree每个节点的具体位置

Painting
通过显卡,将Layout后的节点内容分别呈现到屏幕上

具体的流程:
当我们的浏览器获得html文件后,会自上而下的加载,并在加载过程中进行解析和渲染。

加载说的是获取资源文件的过程,如果在加载过程中,遇到外部css文件盒图片,浏览器会另外发出一个请求,来获取css文件盒相应的图片,这个请求是异步的,并不会影响html文件。

遇到JavaScript文件,html文件会刮起渲染的线程,等待JavaScript加载完毕后,html文件再继续渲染。

因为javascript可能会修改DOM,导致后续的html资源白白加载,所以html必须等待javascript文件加载完毕后,再继续渲染。这也就是为什么javascript文件要写在底部body标签前的原因。

html的渲染过程就是将html代码按照深度优先遍历来生成DOM树。

css文件下载完后也会进行渲染,生成相应的CSSOM。

当所有的css文件下载完且所有的CSSOM构建结束后,就会和DOM一起生成Render Tree。

浏览器就会进入Layout环节,将所有的节点位置计算出来。

通过Painting环节将所有的节点内容呈现到屏幕上。

常规流程

  • 浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。
  • 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。
  • 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。
  • 并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。
    样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
    JS、CSS中如有重定义,后定义函数将覆盖前定义函数。

浏览器的主要组件包括:

  • 用户界面-包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。

  • 浏览器引擎-用来查询及操作渲染引擎的接口。

  • 渲染引擎-用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来。

  • 网络- 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作。

  • UI后端-用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口。

  • JS解释器-用来解释执行JS代码。

  • 数据存储-属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,HTML5定义了web database
    技术(localstorage),这是一种轻量级完整的客户端存储技术

白屏时间和补救方法

在 Wi-Fi 下,这 60 多帧的过程一眨眼就过去了,但在弱网络下,如这里最极端的网络 GPRS 下,整个首屏含图片全部加载完成需要 41.25s。当然这 40 多秒过程能尽早出现内容,并渐进和谐地呈现出来是比较好的。

男装频道是修改过后的,对比之前的未处理的猜你喜欢页面,出现长时间的白屏,如下:

图片 17

以下为本地生活修复后的效果:

图片 18

白屏处理只要稍微注意下就可以,修复的方便也简单,尽量同步输出,异步输出请尽量 mock 出现在首屏的模板。如果是基于 Cake[3] 工具开发的,也可以直接用首屏填充伪标签。

defer :延迟

HTML 4.0 规范,其作用是,告诉浏览器,等到 DOM+CSSOM 渲染完成,再执行指定脚本。

JavaScript

<script defer src="xx.js"></script>

1
<script defer src="xx.js"></script>
  • 浏览器开始解析 HTML 网页
  • 解析过程中,发现带有 defer 属性的 script 标签
  • 浏览器继续往下解析 HTML 网页,解析完就渲染到页面上,同时并行下载 script 标签中的外部脚本
  • 浏览器完成解析 HTML 网页,此时再执行下载的脚本,完成后触发 DOMContentLoaded

下载的脚本文件在 DOMContentLoaded 事件触发前执行(即刚刚读取完标签),而且可以保证执行顺序就是它们在页面上出现的顺序。所以 添加 defer 属性后,domReady 的时间并没有提前,但它可以让页面更快显示出来。

将放在页面上方的 script 加 defer,在 PC Chrome 下其效果相当于 把这个 script 放在底部,页面会先显示。 但对 iOS Safari 和 iOS WebView 加 defer 和 script 放底部一样都是长时间白屏。

白屏不是bug,而是由于浏览器的渲染机制。
白屏和FOUC
  • 如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现;如果用 @import 标签,即使CSS放入link,并且放在头部,也可能出现白屏
    白屏是因为浏览器的渲染机制,浏览器渲染的时候请求时间过长导致白屏,chrome的渲染流程:html > Dom > css > Cssom > Render Tree > Layout > Painting,可以看出是最后才会layout然后再painting,所以浏览器页面在css加载渲染完了以后才会有内容显示,如果浏览一些国外的网站,网站被墙,浏览器会一直显示loding而没有页面显示,就是因为网页响应时间过长导致白屏;当使用@import()时,属性可能导致浏览器渲染不及时,又或者我们把标签放在了body的底部位置,都可能导致不及时的现象。所以一般用link标签把css样式文件引入并放置在head里
  • FOUC(Flash Of Unstyled Content)无样式内容闪烁:如果把样式放在底部,对于IE浏览器在某些场景下(点击链接,输入URL,使用书签进入等)会出现ROUC现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式)对于Firefox会一直表现出FOUC
    FireFox的渲染逻辑和Chrome的不太一样,一开始Chrome是等待渲染树和位置计算好才会出来网页的内容,但到了FireFox每加载一次dom树就会重绘一次网页样式,一直到所有内容完成为止,所以一般我们用link把css放在header内

1. CSS和JS在网页中的放置顺序是怎样的?

  • CSS最好放入header中,即放在网页内容(html标签中包含的文字和图片等)和js脚本之前
    <link href="index.css" rel="stylesheet">

  • S最好放在最后,即放在网页内容(html标签中包含的文字和图片等)和js脚本之后
    <script src="index.js"></script>

本文由胜博发-前端发布,转载请注明来源:也可能出现白屏,今天我们一起来看下如何去评