浏览器原理解析

1:浏览器渲染原理 从地址栏输入url到页面展现 1：dns域名解析 2：tcp链接(tcp三次握手) 3：http请求，响应。http协议底层是tcp/ip, 请求的报文包括：请求行，请求头，请求正文，请求时cookie放在请求头中，传输到服务器，这使得cookie的速度慢，效率也不高 http请求中get和post区别：get把参数放在url中，post经过request body传递参数，get和post请求是tcp链接 设置长链接 Connection：keep-alive 4：服务器响应：响应内容包括状态码，响应头，响应报文 5：客户端页面渲染， 1：处理html标记并构建dom树， 2：处理css标记并构建css树 3：将dom和cssom合并为一个树 4：根据渲染树来布局，以计算每一个节点的信息 5：将各个节点绘制到屏幕上 5个步骤并不必定一次性完成，若是dom或css被修改，以上过程须要重复执行，这样才能计算出那些像素须要在屏幕上从新绘制， 处理html标记并构建dom树，处理css标记并构建cssOM树，将dom与cssOM合并成一个渲染树，根据渲染树布局，将各个节点绘制到屏幕上 script标签会阻止dom构建，js能够修改dom和css defer和async能够改变阻塞模式 css:

2：web回话跟踪的方法： cookie存储:优势，兼容性不错，建立之初就支持缺点：浏览器能存cookid数少，2每次请求都会附着在请求头，传输到服务器端 session: 重绘与回流：回流必会引发重绘，重绘不必定引发回流。 重绘：当前元素的样式发生变化，只需把改变的元素从新渲染一下便可，重绘对浏览器的性能影响小。 回流：浏览器从新渲染部分或所有的文档而从新计算文档中元素的位置和几何构造的过程，回流可能会致使dom树从新构造，应避免回流，触发回流的过程：调整窗口大小，改变字体大小，增长或者移除表，内容变化，激活css伪类，操做class属性，脚本操做dom,计算offsetwidth和offsetheight，设置style属性的值，fixed固定定位元素,拖动滚动条时会一直回流， 避免回流：将样式集中在class类上一次变化，而不是变化几回。 具备动画效果使用absolute,避免使用表格布局，不要使用css表达式，在最后操做元素(回流是自上而下的，在最后修改信息对全局影响小)，拖动元素时，在他x或y改变坐标改变才操做，计算offsetwidth时拿一个变量保存它，减小dom的作做保存在变量中(var dom=document), 渲染树：1：浏览器把获取到的html代码解析成一棵树，每一个标签都是dom树中一个节点，根节点就是document对象，dom树包含了全部标签包括display:none,js动态添加的元素，浏览器把全部样式解析成样式结构体，解析会去掉_开头的样式，dom树和样式结构体组合后构建渲染树，渲染树不包括display:none的节点还有head,这些节点不会用于呈现，也不会影响呈现，visible:hidden隐藏的元素还会包含到渲染树中，会影响布局，占用空间，