浏览器渲染过程

最新推荐文章于 2024-10-30 11:19:57 发布

sly94

最新推荐文章于 2024-10-30 11:19:57 发布

阅读量398

点赞数

一：介绍

页面加载顺序和前端优化

二：页面加载

1.用户访问网页，DNS服务器（域名解析系统）会根据用户提供的域名查找对应的IP地址，找到后，系统会向对应IP地址的网络服务器发送一个http请求。

2.网络服务器解析请求，并发送请求给数据库服务器

3.数据库服务器将请求的资源返回给网络服务器，网络服务器解析数据，并生成html文件，放入http response中，返回给浏览器

4.浏览器解析 http response

5.浏览器解析http response后，需要下载html文件，以及html文件内包含的外部引用文件，及文件内涉及的图片或者多媒体文件（1.浏览器创建DOM树；2.浏览器下载css，并应用在DOM树上，进行渲染；3.浏览器下载js，并解析执行js）

三：缺陷

以上整个流程，如果其中任何一个流程出现问题，都不能顺利的渲染页面

服务器：

网络服务器：无法获取到资源文件（404），或者由于并发的原因暂时无法处理你的请求（最常见的500错误），你的浏览器会长时间处于空白状态，直到服务器返回状态，或者进行超时处理

数据层：如果服务器停止，或忙于处理大数据等等，长时间无法返回数据给网络服务器，那么网络服务器一直处于等待状态中，如果请求量达到最大值，那么后面的请求都被堵塞。从而无法及时返回内容给浏览器

客户端：

Javascript：如果你的js写在body中的div里，而且这个js执行非常复杂的逻辑，那么整个页面处于等待状态中。

不论js代码是内联还是包含在一个不相干的外部文件中，页面下载和解析过程肯定会停下，等待脚本执行完成这些处理，然后才能继续进行。-------大多数浏览器使用单进程处理Javascript的多个任务，同一时间只能有一个任务执行。

CSS:可以同时下载多个css文件

如果我们把css样式放在页面底部，虽然使页面内容能加载更快（因为将加载css文件的时间放在最后，从而使页面内容先显示出来），但这样的内容是没有样式的，在css文件加载进来后，浏览器再对DOM使用样式，会出现我们常说的“无样式之闪烁”。

更讨厌的是，上下都放置css样式，浏览器会首先按照上面的进行渲染，等到下面的样式上来，再按照下面的样式进行回流和重绘，用户感觉很差。

repaint(重绘)：是在一个元素的外观被改变，但没有改变布局的情况下发生。-----如果只是改变某个元素的背景色，文字颜色，边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器repaint。

reflow(回流)：浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，这个回退的过程就是回流。

四：加载

即为获取资源文件的过程，不同浏览器，以及他们的不同版本在实现这一过程时，会有不同的实现效果（资源间互相阻塞）

加载过程中遇到外部css文件，浏览器另外发出一个请求，来获取css文件。遇到图片资源，浏览器也会另外发出一个请求，来获取图片资源，这是异步请求，并不会影响html文档进行加载，但是当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染异步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。

原因：js可能会修改DOM，最为经典的document.write，这意味着，在js执行完成前，后续所有资源的下载可能是没有必要的，这是js阻塞后续资源下载的根本原因

办法：可以将外部引用的js文件放在</body>前。

虽然css文件的加载不影响js文件的加载，但是却影响js文件的执行，即使js文件内只有一行代码，也会造成阻塞。

原因：可能会有var width=$("#id").width()，这意味着，js代码执行前，浏览器必须保证css文件已下载和解析完成。这是css阻塞后续js的根本原因。

办法：当js文件不需要依赖css文件时，可以将js文件放在头部css的前面。

不要在外部调用的js文件中调用运行时间较长的函数，如果一定要用，可以使用setTimeout函数。

1.浏览器GUI渲染线程

2.Javascript引擎线程

3.浏览器定时触发线程（setTimeout）

4.浏览器事件触发线程

5.浏览器http异步请求线程（.jpg <link />这类请求）

五：解析