澳门金莎娱乐手机版 Web前端 今天我们一起来看下如何去评估、测试无线页面的加载性能,页面更早可见

今天我们一起来看下如何去评估、测试无线页面的加载性能,页面更早可见



页面白屏与瀑布流剖判方法

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

原稿出处: Tmall前端团队(FED卡塔尔-
妙净   

图片 1

有线页面包车型地铁支付在我们的常备工作中愈发主要,有线的属性也是我们必要入眼关切的,而加载的性质又是无线质量中的二个重视难点。那么,前些天我们意气风发道来看下如何去评估、测量试验有线页面包车型地铁加载质量。

为了方便解析页面包车型客车加载进程,这里将互连网设置成最慢的
GPLX570S,并将加载进程摄像下来,平日你能够经过 Chrome 自带的 timeline, 勾选
screenhot,可以博得详尽的进程,如下图:

图片 2

此间为了和伸手风流倜傥一清晰对照,用额外录屏工具( licecap
卡塔尔录像下来。下文以天猫商城双 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

从地方整个央求的瀑布流解析下来,大家来回看下页面包车型地铁尤为重要时间点:

最先的作品出处: 天猫前端团队(FED卡塔尔-
妙净   

白屏主题素材

  1. 白屏的根本原因是浏览器在渲染的时候从不乞请到或哀告时间过长产生的。
  2. 浏览器对于图片和CSS,在加载时会并发加载(比如三个域名下同一时间加载四个公文卡塔尔国,浏览器对于JavaScript,在加载时会禁用并发,何况阻止其后的文书及构件的下载。所以将js放在页面包车型大巴顶上部分也恐怕会诱致白屏。
  3. 区别浏览器的拍卖CSS和HTML的主意是例外的:
    举个例子说,IE、chrome浏览器的渲染机制,接受的是等CSS全部加载剖判完后再渲染体现页面。
    Firefox则是在CSS未加载前先出示html的开始和结果,等CSS加载后再行对体制举办更改。

故而:白屏的产出情状再三因为CSS样式被安置底部(最后加载卡塔 尔(英语:State of Qatar),当新窗口展开,刷新等的时候,页面会并发白屏。
假若利用
@import标签,它援用的公文则会等页面全体下载达成再被加载,也说不许现身白屏。

因此,
css使用 link 标签将样式表放在最上端,幸免白屏难点现身。
JS 的停放地点日常是在body的关闭标签以前。

页面可以知道时间

在第 20 帧页面可以预知,CSS 落成现在,当然前提是此处未有外链 JS
在页面中间因为网络须求严重阻塞页面。这里剖析的仅仅是 Chrome
浏览器,不是真机,在 iOS 上,尽管 JS 在尾部,直接 <script src=”xx”> 也是会窒碍页面。能够经过加
async 属性,通告渲染引擎那是不影响页面渲染的 JS,能够异步加载,iOS
下增多此属性可达成和 Android 或 PC Chrome 相仿的效率。

图片 14

白屏不是bug,而是由于浏览器的渲染机制。

首要内容可以预知时间

关键内容可以预知,这里可以感觉是货品数量,商品数量可知要等 JS
试行完而且异步央求发送出去回来后才可以见到。

TMS[1]
的异步诉求大多走招引顾客数据平台(TCE[2]卡塔尔的接口,测验其单个诉求在真机的耗费时间约为
110ms(样板少之又少,未多量测量检验卡塔 尔(英语:State of Qatar)。

怎么让页面尽大概早地渲染页面,页面更早可知,让白屏时间更加短,尤其是有线情形下,一贯是性质优化的话题。

FOUC

FOUC (Flash of Unstyled Content) 无样式内容闪烁:
假诺把体制放在底部,对于IE浏览器,在好几场景下(点击链接,输入UEnclaveL,使用书签步向等),会现出
FOUC 现象(稳步加载无样式的剧情,等CSS加载后页面才遽然表现出样式)。对于
Firefox 会一向展现出 FOUC 。

  • 脚本会梗塞后面内容的表现
  • 脚本会堵塞其后组件的下载

对此图片和CSS,
在加载时会并发加载(如贰个域归于同一时间加载多个文件)。但在加载 JavaScript
时,会禁止使用并发,并且阻止其余内容的下载。

因而尽也许把 JavaScript 纳入页面body底部。

白屏时间和补救方法

在 Wi-Fi 下,那 60
多帧的进度豆蔻梢头眨眼就过去了,但在弱网络下,如这里最极端的网络 GP奥迪Q7S
下,整个首屏含图片全部加载成功须求 41.25s。当然那 40
多秒进程能尽快现身内容,并渐进和谐地显现出来是比较好的。

男装频道是改革过后的,相比较早前的未管理的猜你赏识页面,现身长日子的白屏,如下:

图片 15

以下为本土生活修复后的机能:

图片 16

白屏管理只要稍加注意下就足以,修复的福利也简要,尽量同步输出,异步输出请尽量
mock 出现在首屏的沙盘。就算是基于 Cake[3]
工具开荒的,也足以直接用首屏填充伪标签。

页面可以预知时间

页面可以预知要经验以下进度:

  • 解析 HTML 为 DOM,解析 CSS 为 CSSOM(CSS Object Model)
  • 将 DOM 和 CSSOM 合成风华正茂棵渲染树(render
    tree)
  • 完毕渲染树的布局(layout卡塔尔
  • 将渲染树绘制到显示器

图片 17

layout

图片 18

鉴于 JS 只怕时时会变动 DOMCSSOM,当页面中有大气的 JS
想及时实践时,浏览器下载并施行,直到完结 CSSOM
下载与创设,而在我们拭目以俟时,DOM 创设雷同被封堵。为了 JS 不梗塞 DOM 和
CSSDOM 的创设,不影响首屏可以预知的时刻,测试三种 JS
加载计策对页面可以预知的影响:

结束语

如上在 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
评论

图片 19

测验结果

以下提到的 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卡塔 尔(英语:State of Qatar)。 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
触发前搜罗到的享有诉求。

图片 20

通过上方测量试验,顾客端的 didFinisheLoad 事件的接触和 JS 中的
domReady(DOMContentLoaded卡塔 尔(英语:State of Qatar)和 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
的大运,建议 setTimeout 的年月设置得更加长一些,如 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:

图片 21

JS 使用 async 的点子测量试验结果如下,
DEMO:

图片 22

对待结果开采,通过 “ 的格局的 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 能够完全用这种艺术引进,既不会窒碍 DOM
CSSOM,也不会延长整个页面 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 收藏
    评论

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图