页面渲染原理
首先我们要对浏览器有一定的基本了解,浏览器分为两部分:
- shell:用户在浏览器能看到并操作的部分
- 内核:用户看不到,浏览器用来处理并执行代码的部分,进行页面渲染.内核主要包含
- 渲染引擎:渲染引擎是干什么的? 它可以显示html,xml文档及图片 也可以借助插件(一种浏览器的拓展)显示其他类型的数据,比如借助pdf插件显示pdf格式的文档
- js引擎:处理执行js代码
- 其他模块
不同的浏览器有不同的内核及其渲染引擎:
- ie:trident
- chrome: webkit
- firefox: gecko
- opera: presto
- safari: webkit
所以页面渲染原理是什么?
- 渲染引擎开始解析html,根据标签构建dom树
- 解析css构建cssom树
- 将两者结合形成渲染树
- 浏览器根据渲染树知道了每个元素的内容,样式和位置。最后渲染引擎将元素绘制在屏幕上
那么浏览器是如何获取到html和css的?这就涉及到资源的加载也就是经常会遇到的面试题 地址栏输入url会发生什么
地址栏输入url会发生什么
- 首先会进行 url 解析，根据 dns 系统进行 ip 查找
- 根据 ip 就可以找到服务器，然后浏览器和服务器会进行 TCP 三次握手建立连接，如果此时是 https 的话，还会建立 TLS 连接以及协商加密算法，这里就会出现另一个需要注意的问题"https 和 http 的区别"
- 连接建立之后浏览器开始发送请求获取文件，此时这里还会出现一种情况就是缓存，建立连接后是走缓存还是直接重新获取，需要看后台设置，所以这里会有一个关注的问题"浏览器缓存机制"，缓存这里不细讲，现在我们就当没有缓存，直接去获取文件
- 首先获取 html 文件，构建 DOM 树，这个过程是边下载边解析，并不是等 html 文件全部下载完了，再去解析 html，这样比较浪费时间，而是下载一点解析一点
- 好了解析到 html 头部时候，又会出现一种问题，css,js 放到哪里了？不同的位置会造成渲染的不同，此时就会出现另一个需要关注的问题"css,js 位置应该放哪里?为什么"，我们先按照正确的位置来说明(css 放头部,js 放尾部)
- 解析到了 html 头部发现有 css 文件，此时下载 css 文件，css 文件也是一边下载一边解析的，构建的是 CSSOM 树，当 DOM 树和 CSSOM 树全部构建完之后，浏览器会把 DOM 树和 CSSOM 树构建成渲染树。
- 样式计算, 上面最后一句"DOM 树和 CSSOM 树会一起构建成渲染树"说的有点笼统，其实还有更细一点的操作，但是一般回答到上面应该就可以了，我们现在接上面说一下构造渲染树的时候还做了哪些事情。第一个就是样式计算，DOM树 和 CSSOM树有了之后，浏览器开始样式计算，主要是为 DOM 树上的节点找到对应的样式
- 构建布局树，样式计算完之后就开始构建布局树。主要是为 DOM 树上的节点找到页面上对应位置以及一些"display:none"元素的隐藏。
- 构建分层树，布局树完成后浏览器还需要建立分层树，主要是为了满足滚动条，z-index，position 这些复杂的分层操作
- 将分层树图块化，利用光栅找到视图窗口下的对应的位图。主要是因为一个页面可能有几屏那么长，一下渲染出来比较浪费，所以浏览器会找到视图窗口对应的图块，将这部分的图块进行渲染
- 最终渲染进程将整个页面渲染出来，在渲染的过程中会还出现重排和重绘