页面渲染

创建时间:2019-08-28 16:45

字数:507 阅读:

评论:

大家都知道的，敲一个地址，会先从 DNS 解析成 IP 地址，然后请求 IP，得到 HTML 文档，然后就开始加载各个 css，js，img 的资源。

Html 呈现过程

呈现引擎会力求尽快地将内容显现在屏幕上，不必等整个 HTML 文档解析完毕。就会开始构建呈现树和布局。

注意是开始解析到 body 标签才会开始渲染文档。

高版本浏览器现在允许并行下载 Javascript 文件了，但是 js 任然会阻塞其他资源，比如图片。而且页面仍然要等 JS 都下载执行完才能继续。

浏览器的解析文档有一定的纠错，比如将块级元素放在行内元素中，比如有时
也可以被解析成功。是因为浏览器本身的纠错能力。

浏览器在所有的 stylesheets 加载完成之后才会开始渲染整个页面吗，答案是并不会，这在各个浏览器的实现都是不同的，都有各自的策略。

使用@import 等于就是把标签放在页面的底部，从优化上看，应该避免使用。

浏览器会构成 DOM 树以及渲染树(隐藏的 DOM 没有对应的渲染树节点)，然后就会进行重排以及重绘。

JS 直接写在 html 中是会阻止 html 的解析的，如果是外部的 js，那么文档解析的过程会停止，直到拿取到资源之后才会再继续。

我们将脚本标注为 defer，就会等待文档解析结束才会执行。

Html5 增加了一个选项，可以将脚本标记为异步，由其他线程解析和执行。

FF 在样式表加载和解析时，会禁止所有脚本，而 webkit 只有在脚本访问的样式属性可能被影响的时候，才会禁止脚本。

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 981909093@qq.com