浏览器
- 浏览器渲染原理
- 浏览器会将HTML解析成一个DOM树，将CSS解析成 CSS Rule Tree 。
- 根据DOM树和CSS Rule Tree来构造 Rendering Tree。
- 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置。
- 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。
注意：上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
- 常用的浏览器内核
浏览器内核.png
备注：
Trident+webkit（搜狗，遨游，QQ）
Trident（360）
- 浏览器本地存储
- localstorage
- sessionstorage
- cookie
- sessionStorage、localStorage和cookie的共同点与不同点？
共同点：都是保存在浏览器端，且同源的。
不同点：
- cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
- cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
- 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
- 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
- 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
- 一个页面从输入URL到页面加载显示完成，这个过程发生了什么？
- 在浏览器地址栏中输入url
- 浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
- 在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
- 浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
- 握手成功后，浏览器向服务器发送http请求，请求数据包。
- 服务器处理收到的请求，将数据返回至浏览器
- 浏览器收到HTTP响应
- 读取页面内容，浏览器渲染，解析html源码
- 浏览器使用缓存的原因
（1）减少网络带宽消耗
（2）降低服务器压力
（3）减少网络延迟，加快页面打开速度
网友评论