前端性能优化

前端性能优化

第一部分：加载时的优化

1. 减少http请求， 一个完整的http请求要经历DNS查找，TCP握手，浏览器发出HTTP请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等等一系列复杂的过程，当你请求较多时，直接体现在消耗性能方面，这就是为什么要将多个小文件合并为一个大文件，从而减少http请求次数的原因，
2. 使用服务器端渲染(SSR server side renderer )， CSR(client server renderer) 我们知道，当客户端渲染时它是获取html文件，根据需要下载js文件，运行文件，生成dom再渲染，这个在无形之中会消耗性能，那么服务器端渲染是服务器端返回html文件，客户端只要渲染即可
3. 静态资源使用CDN CDN就是静态资源分发网络，它是一组分布在多个地理位置的web服务器，我们都知道，当服务器离用户越远它的延迟越高，CDN就是为了解决这一问题，在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间，
4. CSS写在头部，JS写在尾部 所有放在head里的css文件和js文件都会堵塞渲染，如果这些css和js需要加载很久，那么页面就空白了，所以js要放在底部，等html解析完了再加载js文件，那么为什么css要放在头部呢，因为先加载html再加载css会让用户第一眼看到页面是没有样式的，为了避免这种情况的发生，就要将css放在头部，js文件也可以写在头部，只要加上defer属性即可，defer 属性是布尔属性。. 如果已设置，它规定在页面完成解析时执行脚本
5. 字体图标代替图片图标， 字体图标就是将图片制作成一个字体，使用时和字体用法相同，并且字体图标是矢量图，不会失真，还有一个优点生成的文件特别小，因为是字体嘛，肯定比图片要小的多
6. 利用缓存不加载相同的资源， 为了避免用户每次访问网站，都得请求文件，我们可以通过添加expries来控制这一行为，expries设置了一个时间，在这段时间之前，浏览器都不会请求文件，而是直接使用缓存，
7. 图片优化 ----图片懒加载，就是在页面中先不给图片设置路径，只有当图片出现在浏览器的可视区域时才去加载真正的图片，这就是延迟加载，对于图片很多的网站，一次加载所有图片会影响用户体验，所以需要图片延迟加载，——第二就是稍微降低图片质量，在一些不需要高质量图片的地方，可以稍微降低图片质量。例如背景图可以切换成jpg格式，质量60%用户也看不出来，————尽可能使用css3效果代替图片，有很多图片使用css3效果就能画出来，这种情况选择css3效果更好，因为代码的大小往往是图片的几分之一甚至几十分之一，————使用雪碧图，
8. 通过webpack按需加载代码 这种方式是将你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后,立即引用，或者即将引用一种新的代码块，这样加快了应用的初始加载速度，减轻了总体体积，因为某些代码块可能永远也不会被用户加载，

第二部分：运行时的优化

1. 减少重绘，重排，就是js改样式不要直接写样式，尽量使用替换class来改变样式，如果要对DOM元素进行操作，尽可能让DOM元素脱离文档流，修改完成之后再将它带回文档流，
2. 使用事件委托，时间委托利用了事件冒泡，只指定一个事件管理程序，就可以管理某一类所有的事件，所有用到按钮的事件都适合使用事件委托，比如鼠标事件，键盘事件，使用事件委托可以节省内存，
3. if else 对比swith 当判断条件较多时，倾向于使用swith，但是swich只能是对于判断条件是常量，if-else更加的灵活
4. 尽量使用原生的方法，数组方法，数学方法，无论你的js代码有多么优化，都比不上原生方法，因为原生方法是用低级语言写的，并且被编译成机器码，性能是自己写的逻辑不可比的
5. 降低css选择器的复杂性