前端性能优化相关小结

网络请求：

网络请求是web性能优化的一大重要知识点，不管是请求静态资源Img ，Js文件，Css文件 还是请求文档数据，HTTP响应报文，我们都需要考虑以下几种优化

请求静态资源文件，打包，合并多个资源文件，压缩，减少请求次数，复杂情况可追加按需加载
请求图片文件，做到懒加载，预加载，图片压缩
其它网络请求，按需加载，合并多个接口，减少请求次数
浏览器缓存，利用HTTP缓存机制对图片及静态资源合理缓存，提升渲染效率
日常编码

说到编码，可能就比较抽象了，每个人的 编码方式都不一样，在这里列举几种常见的

Js方面：
1，减少DOM频繁操作，尽量合并批量操作
2，理性使用闭包，做到及时释放私有作用域变量
3，避免动态注册事件 addeventlistener，做到及时销毁事件
4，合理使用定时器和全局变量，做到及时清除与销毁
5，频繁高并发的事件使用函数防抖和节流

Css方面：
1，避免使用通配符 *
2，选择器尽量不超过两层的嵌套，便于CSSParser 解析，可采用最大父级不同类，
3，避免频繁使用可继承属性，最好做到依赖父级，类似 color ，font-size

Html 方面：
1，引入资源文件的顺序，做到不必要的放置在文档后边
2，HTML加载Js会堵塞，因此所有的Js尽量放在HTML文档主体结束标签 上边
3，HTML加载Css不会堵塞，因此可以放在标签内

从输入URL到页面渲染经历了什么：

在浏览器输入 URL 首先会对 URL 地址进行域名解析，然后 TCP 传输， 中间夹杂着 HTTP 请求，最后浏览器解析 HTTP 响应报文进行文档渲染；这里针对DNS域名解析，TCP三次握手四次挥手，HTTP请求报文与响应报文，我们不做深度探索，后续深究；就拿最后一步浏览器针对文档渲染来说说 。

浏览器解析文档资源并渲染页面是个怎样的过程呢

1，浏览器通过 HTMLParser 把 HTML 解析成 DOM Tree （俗称DOM树）。
2，浏览器通过 CSSParser 把 CSS 解析成 CSS Rule Tree（俗称CSSOM树）。
3，浏览器将 JavaScript 通过 DOM API 或者 CSSOM API 将 JS 代码解析并应用到布局中，按要求呈现响应的结果。根据 DOM 树和 CSSOM 树来构造 render Tree（RANDER树）。

这三步遍是浏览器解析文档渲染页面的大概过程了，最终的 rander 树就是整个页面的文档结构抽象表示，显然这些都是浏览器自己做的事情，那我们要如何针对URL渲染来做优化呢 ? 不要急，接着看

layout：重排（俗称回流），当 render tree 中任一节点发生位置改变，就会重新布局，重新来计算所有节点在屏幕的位置。
repaint：重绘，当 render tree 中任一元素样式属性发生变化时，都会重新绘制，比如字体大小，颜色等。

通过上边的两种情况，我们可以联想到，减少页面的重排与重绘j就可以大大提升渲染的效率和体验性能 。所以从侧面推敲一下

1，减少动态操作DOM增加减少元素以及修改DOM节点位置大小，避免重排（回流）
2，减少动态设置DOM元素样式属性，避免重绘

结论：减少零碎的DOM操作，尽量做到批量更新操作（不分节点还是样式属性）