前端页面渲染机制

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

第1步：客户端发送域名到DNS服务器

第2步：DNS服务器找到域名对应的IP地址

第3步：DNS服务器返回该IP地址给客户端

第4步：客户端发送请求给IP主机服务器

第5步：IP主机服务器处理HTTP请求，返回HTTP报文

第6步：浏览器解析HTTP报文并渲染页面

 

2 浏览器的7部分基础结构：

1用户界面

2浏览器引擎：控制和管理下一级的渲染引擎

3渲染引擎：解析HTML XML CSS

4网络：处理网络相关的事务，如HTTP请求

5UI后端：绘制提示框等浏览器组件

6JavaScript解释器：解析和执行JavaScript代码

7数据存储：持久存储应用数据比如cookie和缓存

 

3 浏览器如何渲染网页？

1解析HTML文档以构建DOM树

2解析CSS以构建CSSOM树

3执行JavaScript

4根据DOM树、CSSOM树以构建render树

5布局(layout)render树  回流(Reflow)render树

6绘制(painting)render树  重绘(Repaint)render树 

7屏幕上的实际内容

 

4 浏览器如何优化渲染？

1尽可能减少重绘回流的次数

2在JavaScript代码运行时缓存所有的变化，然后只绘制一次来应用这些更改

3获取元素属性会触发强制回流，应合并读取元素属性的操作

4选择合适的CSS选择器

• CSS选择器根据其优先级具有不同的运行效率（从快到慢）：
  • ID选择器： #id
  • 类选择器： .class
  • 标签选择器： div
  • 相邻选择器： a + i
  • 子元素选择器： ul > li
  • 通用选择器： *
  • 属性选择器： input[type="text"]
  • 伪类选择器： a:hover