页面白屏与瀑布流分析方法,页面可见时间与异

日期:2019-10-08编辑作者:澳门金莎娱乐网站

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

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

初稿出处: 天猫商城前端团队(FED)- 妙净   

澳门金莎娱乐网站 1

有线页面的花费在我们的司空眼惯专业中国和越南社会主义共和国来越首要,有线的习性也是我们要求入眼关心的,而加载的属性又是有线质量中的三个主要难点。那么,后天大家联合来看下怎么着去评估、测量试验有线页面包车型地铁加载质量。

为了便利分析页面包车型大巴加载过程,这里将互连网设置成最慢的 GP奇骏S,并将加载进度摄像下来,平时你能够通过 Chrome 自带的 timeline, 勾选 screenhot,可以获取详尽的进度,如下图:

澳门金莎娱乐网站 2

此间为了和央求一一清晰对照,用额外录屏工具( licecap )录像下来。下文以Taobao双 11 男装分会议地方的预发页面作为测量试验,摄像 结果 gif 如下,录制的 FPS 为 8。

帧解析如下:

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

澳门金莎娱乐网站 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 ,更安全且可以多路复用。

澳门金莎娱乐网站 4

到第 20 帧, CSS 下载完,DOM 和 CSSOM 都企图 OK 了,页面则发轫渲染了;那是在 Chrome 下边看看的图景,但在 iOS 上并非那样,它供给 JS 加载并施行完才渲染页面。

澳门金莎娱乐网站 5

第 21 帧,紧接着,CSS 中的背景图起先逐项渲染,可知 CSS 中渲染图片也许有一点点耗费时间的。

澳门金莎娱乐网站 6

第 23 帧,后边并行下载的 JS 都下载完,也开头推行了,看“疯狂 top 榜”是 JS 抽出出来的。同一时间 aplus 伏乞也起首伏乞,那是个 getScript 的异步供给,可知异步乞请真未有阻塞页面的渲染。

澳门金莎娱乐网站 7

第 25 帧,JS 还在继续实践,第一张图片是 JS 依照当下 dpr、强弱网络、设备宽度等算出最切合的图形初叶加载那张大 banner 了,而且开端发送数据央浼了。

澳门金莎娱乐网站 8

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

澳门金莎娱乐网站 9

接下来下一帧 28,开头央求商品图片了。

澳门金莎娱乐网站 10

到 45 帧,6 个图片都在出现央浼,同上 gw.alicdn.com 同二个域下并发 6 个央求。但首屏除了大图外唯有 4 张图(2 张商家 logo 被尾巴部分 bar 挡住了),这里发出了 6 个图片需要,可知那几个页面包车型客车懒加载的 buffer 值能够安装得更加小。

澳门金莎娱乐网站 11

从 28 帧到 50 帧,经历了相当长的光阴,第一张图纸终于展现出来了。另外看到aplus_v2 施行完后,又发起了 spm 等央浼,后边 3 个伏乞( aplus-proxy.html/isproxy.js/m.gif )仍旧串行的。

澳门金莎娱乐网站 12

最终到第 61 帧,终于有所的图片都加载完了,最终看下,最终下载完的是大 banner 图,因为有 46.9k ,那张图的尺寸也许形成此页面的 load 时间的机要;假如那张图未有如此大,最终下载完的大概是用来埋点的 m.gif。

澳门金莎娱乐网站 13

从地点整个须要的瀑布流剖判下来,大家来回看下页面包车型地铁要紧时间点:

原稿出处: Tmall前端团队(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让其异步使页面不受白屏影响

页面可见时间

在第 20 帧页面可见,CSS 完成今后,当然前提是此处未有外链 JS 在页面中间因为网络诉求严重堵塞页面。这里深入分析的一味是 Chrome 浏览器,不是真机,在 iOS 上,固然 JS 在底层,直接 <script src="xx"> 也是会堵塞页面。能够经过加 async 属性,布告渲染引擎那是不影响页面渲染的 JS,能够异步加载,iOS 下增多此属性可完毕和 Android 或 PC Chrome 同样的效用。

澳门金莎娱乐网站 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浏览器在好几场景下(点击链接,输入UPAJEROL,使用书签步入等)会出现ROUC现象(稳步加载无样式的内容,等CSS加载后页面卒然表现样式)对于Firefox会一贯表现出FOUC
    FireFox的渲染逻辑和Chrome的不太一致,一伊始Chrome是等待渲染树和职位计算好才会出去网页的内容,但到了FireFox每加载二遍dom树就能够重绘三遍网页样式,一向到具有内容完结收尾,所以日常我们用link把css放在header内

珍视内容可知时间

器重内容可知,这里能够以为是商品数量,商品数量可见要等 JS 施行完而且异步乞求发送出去回来后才可知。

TMS[1] 的异步恳求多数走招引客户数据平台(TCE[2])的接口,测量试验其单个伏乞在真机的耗费时间约为 110ms(样本少之甚少,未多量测量检验)。

怎么样让页面尽恐怕早地渲染页面,页面更早可知,让白屏时间更加短,非常是有线意况下,一贯是性质优化的话题。

FOUC

FOUC (Flash of Unstyled Content) 无样式内容闪烁:
假诺把体制放在尾部,对于IE浏览器,在一些场景下(点击链接,输入U牧马人L,使用书签步向等),会见世 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事件触发此前完结。

白屏时间和补救措施

在 Wi-Fi 下,那 60 多帧的进度一眨眼就过去了,但在弱互联网下,如这里最极致的互联网 GP昂CoraS 下,整个首屏含图片全体加载成功须要 41.25s。当然这 40 多秒进度能尽快出现内容,并渐进和谐地彰显出来是相比较好的。

男装频道是修改过后的,比较在此以前的未管理的猜你高兴页面,现身长日子的白屏,如下:

澳门金莎娱乐网站 15

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

澳门金莎娱乐网站 16

白屏管理只要稍微注意下就足以,修复的造福也轻松,尽量同步输出,异步输出请尽量 mock 出未来首屏的模版。假诺是基于 Cake[3] 工具开辟的,也可以一贯用首屏填充伪标签。

页面可知时间

页面可知要经历以下进度:

  • 解析 HTML 为 DOM,解析 CSS 为 CSSOM(CSS Object Model)
  • 将 DOM 和 CSSOM 合成一棵渲染树(render tree)
  • 形成渲染树的布局(layout)
  • 将渲染树绘制到显示屏

澳门金莎娱乐网站 17

layout

澳门金莎娱乐网站 18

出于 JS 大概每27日会转移 DOMCSSOM,当页面中有一大波的 JS 想立时施行时,浏览器下载并实践,直达到成 CSSOM 下载与营造,而在大家拭目以待时,DOM 营造同样被卡住。为了 JS 不阻塞 DOM 和 CSSDOM 的创设,不影响首屏可知的日子,测量试验三种 JS 加载计谋对页面可知的影响:

网页渲染机制
  • 解析HTML标签,构建DOM树
  • 解析CSS标签,构建CSSOM树
  • 把DOM和CSSOM合成Render树
  • 内测测算数据并将页面Layout
  • 绘图页面Painting

现实流程:
浏览器通过url获得html文件后会从上到下加载并开展剖析和渲染。当蒙受外部css文件或图片则发送央浼此进度还要扩充(异步)。因为js文件有极大恐怕要修改DOM所以HTML的加载渲染会在js文件深入分析完结后,由此当蒙受js文件时HTML会挂起渲染的线程等js记载完结后连续html的加载渲染(白屏原因)。HTML的渲染进程是将代码依照深度优先遍历生成DOM tree,CSS加载渲染完后生成CSSOM tree,DOM和CSSOM合成Render tree,然后浏览器开端Layout最终Painting

澳门金莎娱乐网站 19

结束语

以上在 Chrome 上的测量试验,但实际上在手淘里面,在 spdy、https、离线包内置财富等的震慑下,它的瀑布流还是那样的吧?

三种异步加载方式测验

  • A. head script: 即普通的将 JS 放在 head 中或放在 body 中间:DEMO 地址
  • B. bottom script: 即常规的优化计策,JS 放body的底部:DEMO 地址
  • C. document.write: 在此以前 PC 优化少用的一种异步加载 JS 的国策:DEMO 地址
JavaScript

function injectWrite(src){ document.write('&lt;script src="' + src +
'"&gt;&lt;/sc' + 'ript&gt;'); }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5a721bbc827ff070447677-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a721bbc827ff070447677-2">
2
</div>
<div class="crayon-num" data-line="crayon-5a721bbc827ff070447677-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5a721bbc827ff070447677-1" class="crayon-line">
function injectWrite(src){
</div>
<div id="crayon-5a721bbc827ff070447677-2" class="crayon-line crayon-striped-line">
  document.write('&lt;script src=&quot;' + src + '&quot;&gt;&lt;/sc' + 'ript&gt;');
</div>
<div id="crayon-5a721bbc827ff070447677-3" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>
  • D. getScript: 形如以下,也是 KISSY 内部的getScript函数的大致达成:DEMO 地址
JavaScript

&lt;script&gt; var script = document.createElement('script');
script.src = "//g.tbcdn.com/xx.js";
document.getElementsByTagName('head')[0].appendChild(script);
&lt;/script&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5a721bbc82807359027480-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a721bbc82807359027480-2">
2
</div>
<div class="crayon-num" data-line="crayon-5a721bbc82807359027480-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a721bbc82807359027480-4">
4
</div>
<div class="crayon-num" data-line="crayon-5a721bbc82807359027480-5">
5
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5a721bbc82807359027480-1" class="crayon-line">
&lt;script&gt;
</div>
<div id="crayon-5a721bbc82807359027480-2" class="crayon-line crayon-striped-line">
  var script = document.createElement('script');
</div>
<div id="crayon-5a721bbc82807359027480-3" class="crayon-line">
  script.src = &quot;//g.tbcdn.com/xx.js&quot;;
</div>
<div id="crayon-5a721bbc82807359027480-4" class="crayon-line crayon-striped-line">
  document.getElementsByTagName('head')[0].appendChild(script);
</div>
<div id="crayon-5a721bbc82807359027480-5" class="crayon-line">
&lt;/script&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  • E. 加 async 属性:DEMO 地址
  • F. 加 defer 属性:DEMO 地址
  • G. 同时加 async defer 属性:DEMO 地址

注:

  • [1]: TMS 为天猫商城内部运行活动系统。
  • [2]: TCE 为Taobao内部数据接口系统。
  • [3]: Cake 为天猫商城内部前端开采套件。

 

1 赞 收藏 1 评论

澳门金莎娱乐网站 20

测量试验结果

以下提到的 domReadyDOMContentLoaded 事件。

A (head script) B (bottom script) C (document.write) D (getScript) E (async) F (defer) G (async + defer)
1 PC Chrome 页面白屏长、domReady:5902.545、onLoad:5931.48 页面先显示、domReady:5805.21、onLoad:5838.255 页面先显示、domReady:5917.95、onLoad:5949.30 页面先显示、domReady:244.41、onLoad:5857.645 页面先显示、domReady:567.01、onLoad:5709.33 页面先显示、domReady:5812.12、onLoad:5845.6 页面先显示、domReady:576.12、onLoad:5743.79
2 iOS Safari 页面白屏长、domReady:6130、onLoad:6268.41 页面白屏长、domReady:5175.80、onLoad:5182.75 页面白屏长、domReady:5617.645、onLoad:5622.115 502s 白屏然后页面显示最后变更 load finish 时间、domReady:502.71、onLoad:6032.95 508s 白屏然后页面显示最后变更 load finish time domReady:508.95、onLoad:5538.135 页面白屏长、domReady:5178.98、onLoad:5193.58 556s 白屏然后页面显示最后变更 load finish 时间、domReady:556、onLoad:5171.95
3 iOS 手淘 WebView 页面白屏长、页面出现 loading 消失、domReady: 5291.29、onLoad:5292.78 页面白屏长、页面未跳转 loading 消失、domReady: 5123.46、onLoad:5127.85 页面白屏长、页面未跳转 loading 消失、domReady: 5074.86、onLoad:5079.875 页面可见快、loading 消失快在 domReady 稍后、domReady:14.06、load finish:5141.735 页面可见快、loading 消失快在 domReady 稍后、domReady:13.89、load finish:5157.15 页面白屏长、loading 先消失再出现页面、domReady: 5132.395、onLoad:5137.52 页面可见快、然后 loading 消失、domReady:13.49、load finish:5124.08
4 Android browser 页面白屏长、domReady: 5097.29、onLoad:5100.37 页面白屏长、domReady: 5177.48、onLoad:5193.66 页面白屏长、domReady: 5125.96、onLoad:5165.06 页面可见快、等 5s 后更新 load finish 时间 domReady:463.33、load finish:5092.90 页面可见快、等 5s 后更新 load finish 时间 domReady:39.34、load finish:5136.55 页面白屏长、domReady: 5092.45、onLoad:5119.81 页面可见快、等 5s 后更新 load finish 时间 domReady:50.49、load finish:5507.668
5 Android 手淘 WebView 白屏时间长、一直 loading 直接页面可见、domReady:5058.91、onLoad:5073.81 页面立即可见、loading 消失快、等 5s 后更新 domReady 时间和 load 时间 domReady:4176.34、onLoad:4209.50 页面立即可见、loading 消失快、domReady:6011.18、onLoad:6031.93 页面可见快、loading 之后消失、等 5s 后更新 load finish 时间 domReady:36.31、load finish:5081.76 页面可见快、loading 随后消失、等 5s 后更新 load finish 时间 domReady:25.11、load finish:5113.81 页面可见快、loading 随后消失、等 5s 后更新 domReady 时间和 load 时间 domReady:5213.11、load finish:5312.19 页面可见快、loading 随后消失、等 5s 后更新 load finish 时间 domReady:89.67、load finish:5589.95

从上述测验结果能够见见以下结论:

  • 横向看, iOS Safari 和 Android browser 的在页面可见、domReady、onLoad 的年华表现一致。
  • 纵向看,bottom script、document.write 和 defer 三列,可知document.write 和 defer 无别的异步效果,可知时间、domReady、onLoad 的触发时间和 bottom script 的地方亦然。
  • 纵向看,async + defer 联合用和 async 的展现同样,故合併为 async。
  • 纵向看,script 放页头(head script)和 script 放 body 底部(bottom script)。iOS Safari 、Android browser 和 iOS WebView 表现同样,尽管script 放在 body 的底层也不算,页面白屏时间长,要等到 domReady 5s 多后得了才显得页面;唯独 Android WebView 的表现和 PC 的 Chrome 一致。
  • 仅仅看手淘 WebView 容器中 loading 消失的小时,那些时间点 iOS 和 Android 的表现一致,即都以在 UIWebView 的 didFinishLoad 事件触发时消失。那个事件的触及也许在 domReady 以前(如:A3、B3),也说不定在 domReady 之后(如:D3、E3);这些事件触发和 JS 中的 onLoad 触发时机也尚未一定的联系,大概在 onLoad 在此之前(如:D3、E3)也说不定在 onLoad 大概同不平日候(如:A5)。 didiFinishLoad 到底是怎么样时机触发的啊,详见下章。
  • 页面可知时间,getScript 格局和 async 方式页面可知都极其快,domReady 的光阴接触得也非常快,顾客端的 loading 在 domReady 稍后即未有。原因是因为末尾耗费时间的 JS 央求异步化了,未有阻塞浏览器的 DOM + CSSOM 营造,页面渲染完毕就应声可知了。全体看,要是 domReady 的时光快,则页面可知快;反之要是页面可知快,domReady 的年华不必然快,如 B5、B1、C1、C5、F1、F5。假设异步化耗费时间间长度的 JS,domReady 和 onLoad 的年月距离是十分大的,不做其他管理 onLoad 的小时 domReady 的时辰差 30ms 左右。所以在异步化的前提下,能够用 domReady 的时间作为页面可知的时刻。

didFinishLoad 到底如哪天候接触

didFinishLoad 是 native 定义的平地风波,该事件触发时手淘 loading 黄华消失,何况 windvane 中的发出央浼不再收罗,也正是 native 总括出的 pageLoad 时间。在客商数量平台阅览的瀑布流须要,正是在 didFinishLoad 触发前采摘到的富有央求。

澳门金莎娱乐网站 21

透过上方测量检验,客商端的 didFinisheLoad 事件的触发和 JS 中的 domReady(DOMContentLoaded)和 onLoad 触发没有任何涉及。也许在 domReady 以前或现在,也恐怕在 onLoad 从前或之后。

那它到底是何许时候接触呢? iOS 官方文书档案 是 Sent after a web view finishes loading a frame。 结合采摘的客商央浼和测验,didFinishLoad 是在一而再发起的央求甘休之后触发,监听一段时间内无须要则触发。

因此临时拜见到 data_sufei 那一个 JS 文件,在某个顾客的瀑布流里面有,在多少客商的又尚未。原因是以此 JS 是 aplus_wap.js 故意 setTimeout 1s 后发生的,借使页面在 1s 前抱有的伸手都发完了则触发 didFinishLoad,前边的 data_sufei.js 的日子就不算到 pageLoad 的光阴;反之即便类似 1s 页面还恐怕有图片等伏乞还在发,则 data_sufei.js 的年月也会被算到里面。

所以在 JS 中用 setTimeout 来推延发送央浼也是有非常大概率会影响 didFinishLoad 的时日,提议 set提姆eout 的时日设置得越来越长一些,如 3s。

async 和 defer

script 标签上可以增加 defer 和 async 属性来优化此 script 的下载和实践。

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 放底部同样都以长日子白屏。

async: 异步

HTML 5 标准,其职能是,使用另多少个进程下载脚本,下载时不会阻塞渲染,并且下载完毕后立时实施。

JavaScript

<script async src="yy.js"></script>

1
<script async src="yy.js"></script>
  • 浏览器开头分析 HTML 网页
  • 浅析进程中,发掘含有 async 属性的 script 标签
  • 浏览器继续往下解析 HTML 网页,剖析完先突显页面并触发 DOMContentLoaded,同期并行下载 script 标签中的外界脚本
  • 本子下载落成,浏览器暂停解析 HTML 网页,开头实行下载的台本
  • 本子实施实现,浏览器苏醒分析 HTML 网页

async 属性能够确认保障脚本下载的还要,浏览器继续渲染。可是 async 不能保险脚本的奉行各种。哪个脚本先下载甘休,就先实施这几个剧本。

如何选择 async 和 defer

  • defer 能够保障执行各种,async 不行【注:hack】
  • async 能够提前触发 domReadydefer 不行【注:Firefox 的 defer 也得以提前触发 domready
  • defer 在 iOS 和一些 Android 下照旧阻塞渲染,白屏时间长。
  • 当 script 同时加 asyncdefer 属性时,后面一个不起效率,浏览器行为由 async 属性决定。
  • asyncdefer 的宽容性不均等,幸而 asyncdefer 有线端基本都援救,async 不支持 IE 9-。
    附 async 兼容性 defer 兼容性

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:

澳门金莎娱乐网站 22

JS 使用 async 的秘技测验结果如下, DEMO:

澳门金莎娱乐网站 23

相比较结果发掘,通过 `` 的方法的 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 的岁月。

最后提出

  • 事业 JS 尽量异步,放 body 尾部的 JS 在 iOS 上和一些 Android 是没用的,还是会堵塞首屏渲染。
  • 异步的措施尽可能原生用async,容器(浏览器、webview 等)品级自带优化,不要通过 JS 去模拟达成,如 getScript/ajax/KISSY.use/$.use 等。
  • 有各种注重关系的 JS 能够加 defer,不改造实行种种,相当于放到页面尾部,如 TMS head 中不时不能够移动地方的类库等。

参谋资料

  • 1 赞 2 收藏 评论

本文由澳门金莎娱乐网站发布于澳门金莎娱乐网站,转载请注明出处:页面白屏与瀑布流分析方法,页面可见时间与异

关键词:

致我们终将组件化的Web,webpack使用理解

致我们终将组件化的Web 2015/11/25 · HTML5 · 1评论 ·组件化 原文出处:AlloyTeam    这篇文章将从两年前的一次技术争论...

详细>>

连不上网,离线网页应用

Service Worker初体验 2016/01/06 · JavaScript· Service Worker 原稿出处: AlloyTeam    在二零一四年,W3C发表了service worker的草案...

详细>>

入门教程澳门金莎娱乐网站:,离线网页应用

运用 Service Worker 做三个 PWA 离线网页应用 2017/10/09 · JavaScript· PWA, ServiceWorker 初稿出处:人人网FED博客    在上一篇...

详细>>

前端工程之模块化,前端框架解决方案

我们是如何做好前端工程化和静态资源管理 2016/07/30 · 基础技术 ·工程化,静态资源 原文出处:凹凸实验室    随着...

详细>>