浏览器加载页面的顺序

浏览器加载html页面各家不一样,但有一些主流行为。

1. 浏览器是从上而下解析html,边解析边渲染,遇到外链文件比如css或者js就堵塞解析,下载外链文件,并开始执行这些文件,执行过程中不段重绘已经渲染但需要调整的DOM元素,基于这种原因,一般建议将css文件链接在html的头部,而将js置于html的尾部,这样减少重绘同时又让页面能更快地展现出内容来。

2. 图片即<img>标签没有指定宽高时,就先跳过,当图片被异步下载下来并确定了宽高之后,会重绘页面,当这样的图片多了,此时页面会各种重排而闪烁。如果预告指定好了宽高,空间会提前预留,从而大大减少重绘。

3. 浏览器在异步下载图片时,单个域名线程数会控制在一定范围内,所以对于大量图片需要加载的商城站,多使用多个域名来拼接图片的URL路径。

4. 浏览器会将所有的外链文件下载到本地,哪怕有某个js或者css根本没有被用到。

5. 多个js文件之间有时有依赖,有时没有,有时会操作DOM有时,有的不会,有的加载完成就被使用,有的则并不是,所以就有了async和defer来修饰,一图胜言:

注意:async并不能保证js脚本执行的次序就是在代码被引用的先后次序

6. 浏览器渲染工作步骤大概为:

  • 处理 HTML 标记,构建 DOM 树。
  • 处理 CSS 标记,构建 CSSOM 树。
  • 将 DOM 树和 CSSOM 树融合成渲染树。
  • 根据渲染树来布局,计算每个节点的几何信息。
  • 在屏幕上绘制各个节点。

两棵树的融合过程如图:

7. visibility: hidden 与 display: none 是不一样的。前者隐藏元素,但该元素在布局中仍占据空间(即被渲染成一个空盒子),而后者 (display: none) 是直接从渲染树中整个地移除元素,该元素既不可见,也不属于布局。

8. 浏览器在解析到一个<script>标签时,它不知道这个脚本会改变DOM树里的什么,或者是改变CSSOM树里的什么,因为脚本的自由度太巨大,于是将暂停解析页面,将控制权移交给javascript引擎,等待脚本执行完(如果是远程,还得先下载),然后再继续进行html页面的解析。所以js是不能操作在它之后出现的DOM元素的,js如果彼此之间有依赖,也应该按依赖次序书写。接着javascript的执行又会被css所堵塞,因为无法预测js是否会操作CSSOM,所以会先下载并构建好整个CSSOM树,才会开始js的执行。当然浏览器不会傻等着,各种css和js的下载几乎是并行的,而网络耗时是绝对大头,所以整体来看,基本还是两次网络往返的耗时。

9. 在所有的资源下载完成,包括图片资源,并完成渲染,浏览器会触发onLoad事件。

发表于2017-01-20 00:42   修改于2017-01-20 00:43   评论:0   阅读:159  



回到顶部

首页 | 关于我 | 关于本站 | 站内留言 | rss
python logo   django logo