网页性能优化

今天给大家分享一下面试时候的网络性能优化。有时候可能在打开一个网页的时候可能觉得这个网站的网页很慢，并且浏览卡顿，不流畅的问题。
首先要明白一个问题就是网页生成的问题和原理
1》网页的html会转化为dom，
2》css代码会转化成cssom
3》结合两种形式会生成render树
4》生成布局，然后平面整合
5》然后进行绘制在屏幕上
以上就是网页生成的过程和步骤，我们不难看出其实第一步到第三步的耗时是很快的，第四步和第五步耗时可能比较慢。因为四五步俗称我们说的渲染，
关于渲染我们又不得不提出两个名词，分别是“重排”和“重绘”，顾名思义，重排就是重新排列，重绘就是重新绘制，那么什么情况下属于这两种形式，重排比如是当自己写的css或者js对某个元素有位移或者位置的变化，重绘比如说当你写css或者js写某个元素的样式颜色，已经背景色背景图片。
需要注意的是重绘不一定重排，重排一定会重绘！！！当重排和重绘不断的触发，就会导致网页性能下降的根本原因了。
举个例子跟经典的，比如说div.style.color=“#000”,var margintop=parseint(div.style.margintop); div.style.margintop=margintop+10px;其实这样的话就会发生两次渲染。当浏览器读到第一行的时候，只是改变颜色就会重绘。然而读到第二行的时候就会给他重排进行预留位置，然后第三行的时候+10px继续重排。所以在js改变css的时候注意的是读操作和写操作不要写在一起，这个也是优化的一个点。
还有需要注意的一个东西就是当读取以下的属性的时候就 会重新渲染
offsetTop/offsetLeft/offsetWidth/offsetHeight
scrollTop/scrollLeft/scrollWidth/scrollHeight
clientTop/clientLeft/clientWidth/clientHeight
getComputedStyle()
以下的是我总结的几个技巧希望可以用到的
1、就是js的读写操作不要一起。
2、就是再改变样式的时候尽量的操作class属性进行一次性的操作，不要一行行的去操作。
3、比如有些样式是重排的，尽量做一个缓存
4、尽量使用一些脚本库，比如react的虚拟dom
以上是自己遇到和提的一些建议，后期继续完善。