前端实用知识

1、输入URL到显示网页，中间发生了什么

DNS(完成域名到IP的映射)-->TCP传输(三次握手建立传输链接)-->发送请求(分析url，设置请求头、主体)-->服务器返回请求文件(HTML文件)-->浏览器渲染页面(DOM tree渲染，css tree渲染，Rander tree渲染，layout布局，GPU完成像素渲染页面)

2、网络协议（七层）

物理层(以比特流为单位传输)-->数据链路层(封装桢，把数据从一个MAC传到另一个MAC)-->网络层(路径的选择，网络的转发)-->传输层(建立链接，传送报文，TCP、UDP)-->会话层(发起会话)-->表示层(数据表示方式的转化)-->应用层(面向用户,DNS、FTP、E-mail、HTTP)

3、页面的重绘和回流

• 重绘(repaint):页面元素样式发生变化，但不引起结构布局改变时，浏览器只在UI层面进行重绘和更新，称为重绘。
• 回流(reflow):页面的结构、布局或者操作触发某些属性，引起的浏览器重新就算、布局，称为回流。
• 引起回流的操作:①页面的初次渲染 ②页面尺寸的改变 ③元素的尺寸、位置发生改变 ④字体的大小改变 ⑤删除、添加元素 ⑥激活伪类 ⑦触发某些属性(offsetWidth系列、clientWidth系列、scrollTop系列、getComputedStyle()、getBoundingClientRect()、scrollTo())

回流一定引起重绘，重绘不一定引起回流，重绘开销较小。

开发中的实践：①尽量使用更换class实现样式变化。②尽量减少DOM操作，把多次DOM操作，集中一次修改。