关于浏览器渲染---从URL到页面显示

MakeC75691
1,007 阅读6分钟

从输入url到页面展现发生了什么？

输入url按下回车之后:

1)浏览器会去浏览器缓存中寻找该url的ip；没有的话去系统缓存中找，还是没有的话去路由器缓存中寻找；再没有就去系统host文件中找，还是没有最后只能去请求dns服务器

2)然后dns给一个ip给浏览器；浏览器根据这个ip地址，将请求信息，请求说明和请求参数等封成一个tcp包，由传输层，到网络层，到数据链路层到物理层，传送给服务器，服务器解析这个tcp包将对应的页面文件返回。

3)浏览器根据html文件生成dom树，根据css文件生成cssom树，然后合并这两棵树生成渲染树，然后渲染页面并且展示。要注意的是，当浏览器解析html文件时候如果遇到了内联或者外联的js代码，会暂停dom树的生成，等js代码执行完成之后，才能继续生成树并渲染。

其中在页面渲染以及网络请求响应的性能优化方面，我们可以做的优化工作有：

1.js代码写在页面渲染完成之后避免阻塞渲染 2.cdn并发，资源压缩，减少请求次数 3.预加载或者懒加载 之后会有一篇文章专门写的。

浏览器渲染的流程：

以下逐步介绍： 参考文章：网站性能优化-CRP： segmentfault.com/a/119000000… 以下大部分内容来自于此篇文章，我仅是拾人牙慧，不过后面也有补充一些我的心得、和其他文章的总结。

HTML：生成DOM Tree

1、浏览器获取通过网络读取服务器的的资源、或本地磁盘资源的Html原始字节，根据指定的编码格式转换成相应的字符

2、 浏览器把字符转化成W3C HTML5 标准指定的各种确切标签如 ""、"“

3、构建成Dom树

CSS解析:CSS对象模型（CSSOM）

CSS解析的过程类似于HTML解析，也是浏览器使用自带的解析器进行解析，一般解析过程是由上而下，会将CSS文件解析成为StyleSheet对象，且每个对象都包含CSS规则。CSS规则对象包含了选择和声明对象，以及其他与CSS语法对应的对象。CSS解析完成后会大致生成如下结构的CSS Rule Tree。

渲染：

构建渲染树=》布局=》绘制

①构建渲染树

前面介绍了我们根据输入的HTML及CSS构建了DOM树和CSSOM树，但二者是独立的对象：DOM描述的是文档内容，CSSOM描述的是应用于文档的样式规则。浏览器会把DOM和CSSOM组合起来构建一个渲染树（Render-tree），渲染树会捕获页面上所有可见的DOM内容以及应用在每个节点上的CSSOM样式。 过程如下：

1从DOM树的根节点开始，遍历每个可见的节点 某些节点不可见（例如 script标签、meta标签等），因为它们不会体现在渲染结果中，所以会被忽略

某些通过 CSS 隐藏的节点在渲染树中也会被忽略，比如应用了 display:none 规则的节点 2. 为每一个可见的节点匹配并应用对应的CSSOM规则 3. 生成有内容和计算样式的可见节点

①构建渲染树 前面介绍了我们根据输入的HTML及CSS构建了DOM树和CSSOM树，但二者是独立的对象：DOM描述的是文档内容，CSSOM描述的是应用于文档的样式规则。浏览器会把DOM和CSSOM组合起来构建一个渲染树（Render-tree），渲染树会捕获页面上所有可见的DOM内容以及应用在每个节点上的CSSOM样式。 过程如下：

1.从DOM树的根节点开始，遍历每个可见的节点

  • 某些节点不可见（例如 script 标签、meta 标签等），因为它们不会体现在渲染结果中，所以会被忽略
  • 某些通过 CSS 隐藏的节点在渲染树中也会被忽略，比如应用了 display:none 规则的节点

2.为每一个可见的节点匹配并应用对应的CSSOM规则

3.生成有内容和计算样式的可见节点

到目前为止，我们已经计算出了哪些节点是可见的以及它们的计算样式，但是我们还没有计算它们在设备视口（viewport）中的准确位置及尺寸大小——这就是布局（Layout）阶段要做的工作，也就是常说的重排（reflow）。

这里涉及到两个概念：重绘、回流

可以参考 blog.csdn.net/qq_41807645… 这篇内容详细查看。文章里详细提到如何避免回流，提高性能

repaint（重绘） ：元素的某一部分属性发生改变，如字体颜色，背景颜色等改变，尺寸并未改变，这时发生的改变过程就是repaint。

reflow（回流） ： 因为浏览器渲染是一个由上而下的过程，当发现某部分的变化影响了布局时，就需要倒回去重新渲染，这个过程就称之为reflow。reflow几乎是没法避免的，现在一些常用的效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。基本上能引起reflow的主要有几个原因：

    1，网页初始化。
    2，JS操作DOM树的时候，增加删除元素等。
    3，某些元素的尺寸改变。
    4，CSS属性的改变

③绘制

在绘制阶段，系统会遍历渲染树，并且调用呈现器将的“paint”方法，将内容显示在屏幕上。同样，类似于布局过程，也分为全局和增量两种

以上就是浏览器渲染的过程了

关于<Script>标签

JS可以修改页面的内容、样式以及响应用户的交互，JS在DOM、CSSOM和JS执行之间引入了很多新的依赖关系，导致浏览器在处理和渲染页面上出现大幅延迟：

  • 当浏览器遇到<script>标签时，DOM构建会暂停，直到脚本执行完毕
  • JavaScript 执行会暂停，直到CSSOM准备就绪

以下为重要的结论：

  • CSS 不会阻塞 DOM 的解析，但会阻塞 DOM 渲染。

  • JS 阻塞 DOM 解析，但浏览器会"偷看"DOM，预先下载相关资源。

  • 浏览器遇到 <script>且没有defer或async属性的 标签时，会触发页面渲染，因而如果前面CSS资源尚未加载完毕时，浏览器会等待它加载完毕在执行脚本。

参考链接：juejin.cn/post/684490… (原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的)

avatar
文章
阅读
粉丝