HTML页面加载顺序

HTML页面加载顺序，这个过程发生了什么

浏览器网络拉取资源是多线程的。但是dom树的操作都是在一个线程中的。所以网页资源的解析和js加载执行，以及dom树渲染都是一个线程执行。一个线程的任务就会相互抢占，先来先执行。

css、图片和其它外部资源都是与html\js并行下载，浏览器尝试将所有外部资源下载并行化，尽快的完成，但需要考虑并发的数量

当浏览器获得一个html文件时，会”自上而下“加载，并在加载过程中进行解析渲染，大概过程如下：
（1）首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。
遇到图片资源，浏览器也会另外发出一个请求，来获取图片资源。这是异步请求，并不会影响html文档进行加载。
但是当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。

（2）然后对 CSS 进行解析，生成 CSSOM 规则树（CSS加载和解析过程都不会阻塞 DOM 的解析，但会阻塞 DOM 渲染）。

（3）dom和cssom全部解析完成后，根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些 DOM 元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。

（4）当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。

（5）布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。

值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

JS 会阻塞后续 DOM 解析。
CSS不阻塞DOM的加载和解析（它只阻塞DOM的渲染呈现。这里谈加载），不会阻塞其它资源的加载(比如图片)，但是会阻塞后续JS 文件的执行（原因之一是，js执行代码可能会依赖到css样式。css只阻塞执行而不阻塞js的加载）。
鉴于上面的特性，当css后面存在js的时候，css会间接地阻塞js后面资源的加载（css阻塞js，js阻塞dom）。
现代浏览器会进行 prefetch 优化，浏览器在获得 html 文档之后会对页面上引用的资源进行提前下载
外联js文件使用defer属性和asyn可以达到异步非阻塞加载的效果，由于现代浏览器都存在 prefetch，所以 defer, async 可能并没有太多的用途，可以作为了解扩展知识，仅仅将脚本文件放到 body 底部(但还是在</body>之前)就可以起到很不错的优化效果（遵循先解析再渲染再执行script这个顺序）。当把js放在最后的时候，其实浏览器将自动忽略</body>标签，从而自动在最后的最后补上</body>。

浏览器解析
1、浏览器通过请求的 URL 进行域名解析，向服务器发起请求，接收文件（HTML、CSS、JS、Images等等）。
2、HTML 文件加载后，开始构建 DOM Tree（DOM树）
3、CSS 样式文件加载后，开始解析和构建 CSS Rule Tree
4、Javascript 脚本文件加载后，通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree
浏览器渲染
1、浏览器引擎通过 DOM Tree 和 CSS Rule Tree 构建 Rendering Tree（渲染树）
2、布局阶段——在屏幕上绘制渲染树中的所有节点的几何属性，比如：位置，宽高，大小等等，这个过程称为 Flow 或 Layout 。
3、绘制元素——绘制所有节点的可视属性。
4、合并渲染层——把以上绘制的所有图层（类似于PhotoShop中的“图层”）合并,最终输出一张图片
其中的阶段3、4可称之为Paint

HTML页面加载顺序相关推荐

JS JQ 页面加载顺序方法的区别
document.ready和onload的区别--JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二是onloa ...
【前端2】js：原始类型，运算符，调试，页面加载，轮播图，Bom（对象，时钟），Dom（全选全不选，省市级联，隔行/触摸换色，表单校验）
文章目录 1.js两种引入:js最终要引入到html在浏览器中运行 2.js五大原始类型:undefined 3.js的运算符和流程控制:js不支持单&和单|性能低 4.案例_99乘法表:So ...
页面加载完成事件 - onload，四种写法
在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式: js动态加载外部插件后,导致页面加载顺序不是按照代码的书写顺序执行,引起报错, 这时候就可以用监听页面加载 ...
【原】HTML页面元素加载顺序研究报告（2）----背景图片
2.接下来考察背景图片的加载: 一般来说,添加背景图片有三种办法: 直接写在标签的style里面,如: <div style="background-image:url('images ...
Javascript在页面加载时的执行顺序
一.在HTML中嵌入Javasript的方法直接在Javascript代码放在标记对<script>和</script>之间由<script />标记的src属 ...
Javascript在页面加载时的执行顺序(转载）
原文:http://dancewithnet.com/2007/03/22/order-of-execution-of-javascript-on-web/ 一.在HTML中嵌入Javasript的方 ...
浏览器的加载顺序与页面性能优化
详情参考:浏览器的加载与页面性能优化例子: 一:DNS:在header中添加 <link rel="dns-prefetch" href="//HOSTNAME. ...
小程序页面onload()，onready()加载顺序
小程序 onLoad(Object query) 页面加载时触发.一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数. onShow() 页面显示/切入前台时触发. on ...
html js页面加载前执行,Javascript代码在页面加载时的执行顺序介绍
一.在HTML中嵌入Javasript的方法 1.直接在Javascript代码放在标记对之间 2.由标记的src属性制定外部的js文件 3.放在事件处理程序中,比如: 点击我 4.作为URL的主体, ...

HTML页面加载顺序

HTML页面加载顺序，这个过程发生了什么

HTML页面加载顺序相关推荐

最新文章

热门文章