菜单

有线品质优化:页面可知时间与异步加载

2019年3月13日 - 金沙前端

白屏时间和补救方法

在 Wi-Fi 下,那 60
多帧的进程一眨眼就过去了,但在弱互连网下,如那里最极端的网络 GPPAJEROS
下,整个首屏含图片全体加载成功须求 41.25s。当然那 40
多秒进度能赶紧出现内容,并渐进和谐地显现出来是比较好的。

男装频道是修改过后的,比较此前的未处理的猜你喜欢页面,出现长日子的白屏,如下:

图片 1

以下为本土生活修复后的效益:

图片 2

白屏处理只要稍微注意下就能够,修复的有益也简要,尽量同步输出,异步输出请尽量
mock 出现在首屏的模板。倘诺是依照 Cake\[3\]
工具开发的,也得以一直用首屏填充伪标签。

三种异步加载形式测试

JavaScript

function injectWrite(src){ document.write('<script src="' + src +
'"></sc' + 'ript>'); }

<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>
白屏不是bug,而是由于浏览器的渲染机制。
CSS和JS在HTML中的地点

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

结束语

如上在 Chrome 上的测试,但其实在手淘里面,在
spdy、https、离线包内置财富等的震慑下,它的瀑布流依然那样的吧?

哪些让页面尽恐怕早地渲染页面,页面更早可见,让白屏时间更短,尤其是有线环境下,平素是性质优化的话题。

白屏题材

  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事件触发此前实现。

最重要内容可知时间

首要内容可知,那里能够认为是货物数量,商品数量可知要等 JS
执行完并且异步请求发送出去回来后才可知。

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

图片 3

FOUC

FOUC (Flash of Unstyled Content) 无样式内容闪烁:
假诺把体制放在底部,对于IE浏览器,在好几场景下(点击链接,输入URL,使用书签进入等),会冒出
FOUC 现象(稳步加载无样式的始末,等CSS加载后页面才幡然突显出样式)。对于
Firefox 会向来呈现出 FOUC 。

对于图片和CSS,
在加载时会并发加载(如1个域名下同时加载多少个公文)。但在加载 JavaScript
时,会禁止使用并发,并且阻止其余内容的下载。

为此尽量把 JavaScript 放入页面body底部。

网页渲染机制

实际流程:
浏览器通过url得到html文件后会从上到下加载并拓展解析和渲染。当遭遇外部css文件或图片则发送请求此进程还要开始展览(异步)。因为js文件有大概要修改DOM所以HTML的加载渲染会在js文件分析完毕后,由此当境遇js文件时HTML会挂起渲染的线程等js记载落成后持续html的加载渲染(白屏原因)。HTML的渲染进度是将代码根据深度优先遍历生成DOM
tree,CSS加载渲染完后生成CSSOM tree,DOM和CSSOM合成Render
tree,然后浏览器初步Layout最终Painting

图片 4

注:

 

1 赞 收藏 1
评论

图片 5

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
不可能确定保证脚本的施行种种。哪个脚本先下载甘休,就先实行那3个剧本。

白屏和FOUC

相关文章

发表评论

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

网站地图xml地图