浏览器显示html过程,浏览器显示页面的流程

80 阅读 0 评论 53 点赞

我是靠谱客的博主犹豫小蘑菇，最近开发中收集的这篇文章主要介绍浏览器显示html过程,浏览器显示页面的流程，觉得挺不错的，现在分享给大家，希望可以做个参考。

简单说步骤如下：

1：浏览器拿到html之后，开始解析html，生成dom tree

2：在dom解析中，遇到js的外链或者script代码，浏览器会停止dom解析，在完成js代码下载执行之后，再继续解析。遇到css的外链或者css的代码，浏览器会继续解析dom，并且会下载css，并行解析css生成cssom tree (dom 和 cssom是并行的)

3： dom tree 和 cssom tree 会合并生成render tree(渲染树)，浏览器layout并paint，这是一个渐进的过程。为达到更好的用户体验，render引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建render树和设置布局。

从上面的步骤不难看出，css放在头部，js放在尾部对页面优化的提升作用。 css并不阻塞dom解析(css只会阻塞渲染，css加载慢会让页面一开始很丑，但是不影响用户看，但是丑对用户就是一种伤害....)，而js会(除非少部分影响页面构建的js，剩下的js应该在底部加载执行)。

现在的浏览器很聪明，并不是解析到html的script或者link标签再去下载静态资源，这些都在浏览器dom解析到之前被定位出来提前下载。另外js的执行会被之前cssom的生成(css文件下载并解析)所阻断。

参考链接

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。