浏览器渲染机制
1.DOCTYPE 
文章图片
2.浏览器渲染过程
这里讨论webkit内核的浏览器
1、DOM Tree：浏览器将HTML解析成树形的数据结构。
2、CSS Rule Tree：浏览器将CSS解析成树形的数据结构
3、Render Tree: DOM和CSSOM合并后生成Render Tree
4、layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。
【浏览器渲染机制】5、painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。
文章图片
3.reflow和repaint
4.在浏览器中输入URL并回车发生了什么
1.解析url
2.DNS解析
查询浏览器缓存（浏览器会缓存之前拿到的DNS 2-30分钟时间）
chrome伪url及相关功能
浏览器的DNS缓存查看和清除
检查系统缓存，检查hosts文件，这个文件保存了一些以前访问过的网站的域名和IP的数据
检查路由器缓存，路由器有自己的DNS缓存，可能就包括了这在查询的内容
查询ISP DNS 缓存：ISP服务商DNS缓存那里可能有相关的内容
递归查询：向上进行DNS查询
3.建立TCP链接
4.请求和发送数据
5.渲染页面
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- 深入理解|深入理解 Android 9.0 Crash 机制（二）
- 分享！如何分分钟实现微信扫二维码调用外部浏览器打开指定页面的功能
- 你也许不知道的Vuejs|你也许不知道的Vuejs - 花式渲染目标元素
- 2.关于OpenGL|2.关于OpenGL 坐标系以及渲染流程
- http请求与响应
- 光栅化|光栅化,着色器,渲染管线的理解
- 轻量模块注意力机制ECA-Net（注意力模块+一维卷积）
- 带你了解NodeJS事件循环
- Java中的反射