菜单

无线性能优化:页面可见时间以及异步加载

2018年11月15日 - CSS/CSS3

无线页面动画优化实例

2016/04/20 · CSS ·
无线

原文出处:
大额_skylar(@大额大额哼歌等日落)   

无线页面本就起早贪黑,更不用说当我们当无线页面被使用动画片的时节。不管是css动画还是canvas动画,我们还亟需时刻小心在,并且产生必不可少掌握页面性能的为主分析方法。

既然如此我们的目标是优化,那么就同浏览器的一部分渲染和执行机制有关,更好之迎合浏览器的行为方式,才可以叫咱们的动画片流畅而美丽。

是的,浏览器是死,全听其的。

图片 1

 

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

同、设备刷新率(帧率)

咱想为页面变快,想为动画片流畅,我们需要先了解一下是呀在潜移默化着我们的感知。

页面运行在配备的浏览器中,现在市场上的倒设备的基础代谢频率多是60次/秒(帧率)。所以让浏览器渲染每一样幅的镜头的年华应当是(1s/60=16.67ms)。

唯独实质上,浏览器并无是管功夫全花在为咱渲染页面及,他尚需要做一些外加的行事,比如渲染队列的治本和不同线程的切换等等。所以,单纯的浏览器渲染工作留给我们的工夫大概为就是是10ms左右,当我们于各一样帧所开的渲染操作逾此时刻之时节,比较直观的展现就是是页面卡顿,动画卡顿。

当我们采用css
animation完成动画时,这一点收押起没有那要,因为浏览器会为我们handle一些业务。但是当我们用以js比如canvas来促成通的逐帧动画时,需要记住这片的时间,它挺要紧。

图片 2

次、浏览器的页面渲染流水线

俺们的代码是怎一步步的渲染成页面的为?

图片 3

圈起每个页面都见面更如此的几乎单过程,然而我们其实可以使部分技术,帮助浏览器跳了一些步骤,而缩水他的干活时。

1.五单步骤都耗了岁月

当我们在js中改变了某DOM元素的layout时,那么浏览器就是见面检讨页面被的如何要素用还布局,然后对页面激发一个reflow过程为成就页面的重复布局。被reflow的要素,接下去就得会另行通过Paint和Composite这片个经过,以渲染出新型的页面。

 

2.跳过layout这一步

当我们才修改了一个DOM元素的paint
only属性的时,比如background-image/color/box-shadow等。这个时段不会见触发layout,浏览器在形成样式的精打细算后便见面超过了layout的长河,就单Paint和Composite了。

 

3.跳过layout和paint这两步

万一你改改一个非样式且非绘制的CSS属性,那么浏览器会以就样式计算后,跳了布局和制图的过程,直接Composite。

咱品尝下利用transform动画来尽量的达标这种意义。

 

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

其三、使用transform实现动画

我们兴许时时要举行有动画片,比如当召开一些揭秘或者新手引导之效应时,会得做有将内容移入移出之操作。

本来可能率先个想到的哪怕是 css transition 只要连一下 left 值或者 bottom
的价值就可以了。效果可能很快就会见落实,但是当我们以一个页面频繁的举行在这样的移入移出操作时,细心地我们在手机受到(6P)看无异扣,动画并无会见很流利,尤其是在少数低端机型上。

俺们换用 transform 来落实均等的成效:

transition: left 2s ease-in-out; —> transition: transform 2s
ease-in-out; left: xxx; —> transform: translate3d(xxx, yyy, zzz);

1
2
transition: left 2s ease-in-out;  —> transition: transform 2s ease-in-out;  
left: xxx; —> transform: translate3d(xxx, yyy, zzz);

因在于:

优化后又在设备里查看,可以感受及职能显著的升级换代。其实这里虽好了方提到的,节省了layout和paint。

页面可见时间

页面可见要更以下过程:

图片 4

layout

图片 5

鉴于 JS 可能随时会转移 DOMCSSOM,当页面中产生大气底 JS
想这执行时,浏览器下载并尽,直到好 CSSOM
下充斥跟构建,而在我们等时,DOM 构建同样给卡住。为了 JS 不阻塞 DOM 和
CSSDOM 的构建,不影响首屏可见的时刻,测试几种 JS
加载策略对页面可见的震慑:

四、从css到canvas,使用requestAnimationFrame

现css的动画越来越好用,也克满足越来越多的需要。但于少数复杂的需求中我们或许要要求助于js。

譬如说我这里实现之一个半圆的动画片:[半圆progress]
[Source
Code]。看起使用css动画就全可以满足自我之需求,但是当需求变动的当儿,我们也不得不拥抱变化了。

 

**使用requestAnimationFrame**

[圆弧progress][Source
Code]
这里用canvas实现了起定义弧度圆弧的增长动画。

这里我们赖以这动画效果看一下是怎么样采取canvas和requestAnimationFrame来兑现通的逐帧动画的。

window.requestAnimationFrame 是一个专门为动画片而格外的
web API
。它打招呼浏览器在页面重绘前实施你的回调函数。通常来说被调用的效率是每秒60不良。

假定我们的页面上发生一个动画片效果,如果我们纪念管每一样帧的顺风绘制,那么我们便用requestAnimationFrame来担保我们的绘图时机了。

众多框架和演示代码都是故setTimeoutsetInterval来贯彻页面中之卡通片效果,比如jQuery中的animation。这种实现方式的题材是,你于setTimeoutsetInterval被指定的回调函数的推行时是力不从心保证的。它以在当下同样帧动画的_某时间点_给执行,很可能是在帧结束的上。这虽象征这我们也许夺这同幅的音信。

图片 6

 

**requestAnimationFrame的任何高能用法**

因requestAnimationFrame的风味,其实我们尚得当过剩别的想不到的地方来平等外露身手。

JavaScript

var $box = $('\#J\_Test'), $point = $box.find('b');
$box.on('mouseenter',function(e){ requestAnimationFrame(function(){
$point.css({ top : e.pageY, left : e.pageX }) }); });

<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-5b8f6d19187bb345735832-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bb345735832-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bb345735832-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bb345735832-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bb345735832-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bb345735832-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bb345735832-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bb345735832-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bb345735832-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bb345735832-10">
10
</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-5b8f6d19187bb345735832-1" class="crayon-line">
var $box = $('#J_Test'),
</div>
<div id="crayon-5b8f6d19187bb345735832-2" class="crayon-line crayon-striped-line">
      $point = $box.find('b');
</div>
<div id="crayon-5b8f6d19187bb345735832-3" class="crayon-line">
$box.on('mouseenter',function(e){
</div>
<div id="crayon-5b8f6d19187bb345735832-4" class="crayon-line crayon-striped-line">
  requestAnimationFrame(function(){
</div>
<div id="crayon-5b8f6d19187bb345735832-5" class="crayon-line">
      $point.css({
</div>
<div id="crayon-5b8f6d19187bb345735832-6" class="crayon-line crayon-striped-line">
          top : e.pageY,
</div>
<div id="crayon-5b8f6d19187bb345735832-7" class="crayon-line">
          left : e.pageX
</div>
<div id="crayon-5b8f6d19187bb345735832-8" class="crayon-line crayon-striped-line">
      })
</div>
<div id="crayon-5b8f6d19187bb345735832-9" class="crayon-line">
  });
</div>
<div id="crayon-5b8f6d19187bb345735832-10" class="crayon-line crayon-striped-line">
});
</div>
</div></td>
</tr>
</tbody>
</table>
JavaScript

var rAF = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame || function(c) { setTimeout(c, 1
/ 60 \* 1000); }; function render() {
self.$container.html(itemHtml);
self.$container.find('.J\_LazyLoad').lazyload(); } rAF(render);

<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-5b8f6d19187bf045103677-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bf045103677-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bf045103677-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bf045103677-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bf045103677-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bf045103677-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bf045103677-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bf045103677-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bf045103677-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bf045103677-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bf045103677-11">
11
</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-5b8f6d19187bf045103677-1" class="crayon-line">
var rAF = window.requestAnimationFrame ||  window.webkitRequestAnimationFrame || 
</div>
<div id="crayon-5b8f6d19187bf045103677-2" class="crayon-line crayon-striped-line">
        function(c) {
</div>
<div id="crayon-5b8f6d19187bf045103677-3" class="crayon-line">
            setTimeout(c, 1 / 60 * 1000);
</div>
<div id="crayon-5b8f6d19187bf045103677-4" class="crayon-line crayon-striped-line">
        };
</div>
<div id="crayon-5b8f6d19187bf045103677-5" class="crayon-line">
 
</div>
<div id="crayon-5b8f6d19187bf045103677-6" class="crayon-line crayon-striped-line">
    function render() {
</div>
<div id="crayon-5b8f6d19187bf045103677-7" class="crayon-line">
       self.$container.html(itemHtml);
</div>
<div id="crayon-5b8f6d19187bf045103677-8" class="crayon-line crayon-striped-line">
       self.$container.find('.J_LazyLoad').lazyload();
</div>
<div id="crayon-5b8f6d19187bf045103677-9" class="crayon-line">
    }
</div>
<div id="crayon-5b8f6d19187bf045103677-10" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6d19187bf045103677-11" class="crayon-line">
    rAF(render);
</div>
</div></td>
</tr>
</tbody>
</table>

差一点种异步加载方式测试

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

五、分析你的无线页面

咱要负这例子,[圆弧progress][Source
Code]
简单的看下如何分析无线页面的性。

此的实现思路是这样的:

1 –
确定圆弧的起首弧度(0.75PI)和住弧度(根据当下分值占上限分值的比重计算,最特别啊2.25PI);
2 – 随着时光之加强逐帧绘制终点位置 requestAnimationFrame(draw); 3 –
根据各个一样幅的巅峰位置的 cos 和 sin 值得到跟随的环坐标并绘制;

1
2
3
1 – 确定圆弧的起始弧度(0.75PI)和终止弧度(根据当前分值占上限分值的比例计算,最大为2.25PI);
2 – 随着时间的增长逐帧绘制终点位置 requestAnimationFrame(draw);
3 – 根据每一帧的终点位置的 cos 和 sin 值得到跟随的圆圈坐标并绘制;

可当,实现好就是移动了第一步,我们来借助Chrome
Timeline来分析一下斯大概的页面。

图片 7

 

  1. 在押一下帧率,在快动画进行的下,看起帧率不错,没有发掉帧的现象,说明每一样轴的耗时都还ok,我之卡通基本无见面卡顿;
  2. 每当函数的实施与调用那无异圈中,可能有题目的一对右上角会被标红,还得翻或存在问题的细节;这里提醒我页面强制重排了,仔细观察下的
    Bottom-up tab 中可以一定及现实的代码。

下Timeline就可以看到页面的几种植指标,帧率,js执行等等。就可对出现问题之帧下手优化。

于分析页面性能的上,严重推荐阅读:[https://developer.chrome.com/devtools/docs/timeline]
.timeline的事无巨细使用说明,它真的非常强劲,能拉我们分析及页面的各个方面的问题。

1 赞 1 收藏
评论

图片 8

测试结果

以下提到的 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

起上述测试结果可以见到以下结论:

didFinishLoad 到底什么时候接触

didFinishLoad 是 native 定义之风波,该事件触发时手淘 loading
菊花消失,并且 windvane 中的发出请求不再收集,也就算是 native 统计出的
pageLoad 时间。在用户数量平台观看的瀑布流请求,就是于 didFinishLoad
触发前收集到的有所请求。

图片 9

经过上测试,客户端的 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
的辰,建议 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

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:

图片 10

JS 使用 async 的办法测试结果如下,
DEMO:

图片 11

相对而言结果发现,通过 “ 的章程的 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
的时。

最终建议

参考资料

相关文章

标签:, ,

发表评论

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

网站地图xml地图