白屏的出现情况往往因为CSS样式被置于底部(b

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

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

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

betway体育app 1

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

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

betway体育app 2

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

帧分析如下:

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

betway体育app 3

终于等到第 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 ,更安全且可以多路复用。

betway体育app 4

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

betway体育app 5

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

betway体育app 6

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

betway体育app 7

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

betway体育app 8

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

betway体育app 9

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

betway体育app 10

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

betway体育app 11

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

betway体育app 12

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

betway体育app 13

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

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

白屏问题

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

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

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

CSS和JS在HTML中的位置

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

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

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

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

页面可见时间

在第 20 帧页面可见,CSS 完成之后,当然前提是这里没有外链 JS 在页面中间因为网络请求严重阻塞页面。这里分析的仅仅是 Chrome 浏览器,不是真机,在 iOS 上,就算 JS 在底部,直接 <script src="xx"> 也是会阻塞页面。可以通过加 async 属性,通知渲染引擎这是不影响页面渲染的 JS,可以异步加载,iOS 下添加此属性可实现和 Android 或 PC Chrome 一样的效果。

betway体育app 14

白屏不是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内

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底部

重要内容可见时间

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

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

如何让页面尽可能早地渲染页面,页面更早可见,让白屏时间更短,尤其是无线环境下,一直是性能优化的话题。

FOUC

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

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

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

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

async和defer

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

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

betway体育app 15

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),这是一种轻量级完整的客户端存储技术

本文由必威发布于必威-前端,转载请注明出处:白屏的出现情况往往因为CSS样式被置于底部(b

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。