浏览器解析与加载

小王爱学习1234

已于 2022-09-09 20:07:02 修改

阅读量183

点赞数

分类专栏：前端总结学习总结文章标签：前端服务器 javascript

于 2022-09-04 08:04:33 首次发布

本文链接：https://blog.csdn.net/m0_37247632/article/details/126632450

版权

前端总结同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

学习总结

20 篇文章 0 订阅

订阅专栏

DNS解析IP地址过程

缓存 -> 操作系统缓存 -> DNS服务器（LDNS）。若都未查询到，则往下：
访问域名解析服务器，其返回主域名服务器地址，例如.com的服务器地址
前往主域名服务器，其返回域名对应的域名服务器地址
域名服务器从 对应的IP对照表里获取解析结果。域名服务器指你域名所购的服务商，例如从阿里购买的域名，那这个域名服务器由阿里提供。

1，浏览器检查缓存中有无这个域名对应的解析，有则解析结束。这个缓存受缓存大小和有效时间(TTL)制约

2，若没有，查找操作系统缓存中是否有对应域名解析，有则解析结束。

3，若没有，访问 DNS 服务器，一般就是 LDNS(Local DNS)，即你所使用的网络的供应商，例如电信，联通。而 LDNS 上保存的也是缓存，只是性能较好，能解决 80%的解析。

浏览器加载的逻辑

当浏览器获得一个html文件时，会”自上而下“加载，并在加载过程中进行解析渲染。

加载过程中遇到css文件或者图片文件，浏览器另外发出一个请求，来获取对应文件。css/图片这些异步请求，并不会影响html文档进行加载。

但是当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。

一个不太严谨但方便记忆的口诀：JS 全阻塞，CSS 半阻塞JS

JS会阻塞后续 DOM 解析以及其它资源(如 CSS，JS 或图片资源)的加载。
CSS不阻塞DOM的加载和解析（它只阻塞DOM的渲染呈现。这里谈加载），不会阻塞其它资源(如图片)的加载，但是会阻塞后续JS 文件的执行（原因之一是，js执行代码可能会依赖到css样式。css只阻塞执行而不阻塞js的加载）。
鉴于上面的特性，当css后面存在js的时候，css会间接地阻塞js后面资源的加载（css阻塞js，js阻塞其他资源）。
现代浏览器会进行 prefetch 优化，浏览器在获得 html 文档之后会对页面上引用的资源进行提前下载。

外联js文件使用defer属性和asyn可以达到异步非阻塞加载的效果，由于现代浏览器都存在 prefetch，所以 defer, async 可能并没有太多的用途，可以作为了解扩展知识，仅仅将脚本文件放到 body 底部(但还是在之前)就可以起到很不错的优化效果（遵循先解析再渲染再执行script这个顺序）。当把js放在最后的时候，其实浏览器将自动忽略标签，从而自动在最后的最后补上。

谈谈浏览器解析过程

解析 HTML，生成 DOM 树
解析 CSS，生成 CSS 规则树（CSS Rule Tree）
将 DOM Tree 和 CSS Rule Tree 相结合，生成 渲染树（Render Tree）
从根节点开始，计算每一个元素的大小、位置，给出每个节点所应该出现的屏幕精确坐标，从而得到基于渲染树的 布局渲染树（Layout of the render tree）。
遍历渲染树，将每个节点用 UI 渲染引擎来绘制，从而将整棵树绘制到页面上，这个步骤叫 绘制渲染树（Painting the render tree）

DOMContentLoaded和load

DOMContentLoaded 事件触发时：仅当 DOM 解析完成后，不包括样式表，图片等资源。
onload 事件触发时, 页面上所有的 DOM, 样式表, 脚本, 图片等资源已经加载完毕。

那我们可以聊一聊它们与 async 和 defer 区别

async和defer的用法参考[/language/html.html#script标签的的defer和async有什么区别？]

带 async 的脚本一定会在 load 事件之前执行，可能会在 DOMContentLoaded 之前或之后执行。

情况 1： HTML 还没有被解析完的时候，async 脚本已经加载完了，那么 HTML 停止解析，去执行脚本，脚本执行完毕后触发 DOMContentLoaded 事件
情况 2： HTML 解析完了之后，async 脚本才加载完，然后再执行脚本，那么在 HTML 解析完毕、async 脚本还没加载完的时候就触发 DOMContentLoaded 事件

如果 script 标签中包含 defer，那么这一块脚本将不会影响 HTML 文档的解析，而是等到 HTML 解析完成后才会执行。而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。

情况 1：HTML 还没解析完成时，defer 脚本已经加载完毕，那么 defer 脚本将等待 HTML 解析完成后再执行。defer 脚本执行完毕后触发 DOMContentLoaded 事件
情况 2：HTML 解析完成时，defer 脚本还没加载完毕，那么 defer 脚本继续加载，加载完成后直接执行，执行完毕后触发 DOMContentLoaded 事件