页面会出现白屏,js对页面加载和渲染有两个影响
分类:巴黎人-前端

注:

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

 

1 赞 收藏 1 评论

图片 1

两种异步加载格局测量试验

  • 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('<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>
  • 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 地址

FOUC

FOUC (Flash of Unstyled Content) 无样式内容闪烁:
假使把体制放在尾巴部分,对于IE浏览器,在有些场景下(点击链接,输入U福特ExplorerL,使用书签步入等),会现出 FOUC 现象(稳步加载无样式的内容,等CSS加载后页面才赫然表现出样式)。对于 Firefox 会一向表现出 FOUC 。

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

对此图片和CSS, 在加载时会并发加载(如贰个域名下相同的时候加载七个公文)。但在加载 JavaScript 时,会禁止使用并发,并且阻止其余剧情的下载。

进而尽大概把 JavaScript 归入页面body后面部分。

网页渲染机制
  • 解析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

图片 2

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

图片 3

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),那是一种轻量级完整的客商端存款和储蓄本领

重在内容可知时间

重中之重内容可知,这里能够感觉是物品数量,商品数量可见要等 JS 施行完并且异步央浼发送出去回来后才可见。

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

图片 4

白屏不是bug,而是由于浏览器的渲染机制。
CSS和JS在HTML中的地方

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

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浏览器,在一些场景下(点击链接,输入UENCOREL,使用书签步向等),会产出 FOUC 现象(稳步加载无样式的源委,等CSS加载后页面才蓦然表现出样式)。对于 Firefox 会平昔显示出 FOUC 。
  • 脚本会阻塞前边内容的显示
  • 脚本会阻塞其后组件的下载

对此图片和CSS, 在加载时会并发加载(如二个域归属同不经常间加载四个文本)。但在加载 JavaScript 时,会禁止使用并发,并且阻止其余内容的下载。
所以据此尽恐怕把 JavaScript 放入页面body尾巴部分

页面可知时间

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

页面可知时间

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

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

图片 5

layout

图片 6

出于 JS 大概随时会转移 DOMCSSOM,当页面中有恢宏的 JS 想立刻执行时,浏览器下载并施行,直到完结 CSSOM 下载与营造,而在大家拭目以俟时,DOM 创设同样被封堵。为了 JS 不阻塞 DOM 和 CSSDOM 的创设,不影响首屏可见的时日,测量试验两种 JS 加载战术对页面可知的震慑:

白屏难题

  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事件触发从前产生。

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

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

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

本文由巴黎人手机版发布于巴黎人-前端,转载请注明出处:页面会出现白屏,js对页面加载和渲染有两个影响

上一篇:本文作者,这几天对 iOS HTTP2.0 下一篇:没有了
猜你喜欢
热门排行
精彩图文