如何进行前端优化

前端优化的目的是什么 ?

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

一、HTML优化

渲染顺序

1、CSS样式表置于头部，CSS会一边加载一边渲染
2、JS脚本置于尾部，JS在未加载完成之前，会阻塞渲染
3、使用外部的样式表和脚本，优先加载出HTML结构
4、关键JS、CSS代码可以内嵌在HTML中，比如：rem动态等
5、避免使用iFrame
6、使用骨架屏

二、CSS优化

选择器优化

1、选择器嵌套尽量不要超过三层
2、id选择器尽量不要嵌套
3、使用继承

体积优化

1、可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。另外， CSS、 Javascript、Image 都可以用相应的工具进行压缩，压缩后往往能省下不少空间。
2、合并 CSS图片，减少请求数

选择器优化

1、选择器嵌套尽量不要超过三层
2、id选择器尽量不要嵌套
3、使用继承

三、JS优化

减少无用操作

1、使用节流、防抖
2、使用事件委托取代大量事件的绑定
3、若需要对DOM进行大量操作，可以使用Fragment减少操作次数

字符串拼接

在 Javascript中使用"+" 号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销，因此当需要拼接的字符串较多的时候可以考虑用此方法。

算法优化

添加key值，最大效益的使用虚拟DOM，减少Diff时间