前端常见的性能优化总结

目录

一、压缩css、js文件

二、css图标采用精灵图

三、 CSS放在页面最上部，javascript放在页面最下面

四、css选择器优化

五、避免使用css表达式

六、js中避免使用eval

七、减少闭包的使用

 八、绑定DOM元素时使用采用事件委托

 九、尽量使用css动画来代替js动画

十、少使用id选择器，多使用类选择器

十一、图片采用懒加载技术 

---

一、压缩css、js文件

在做项目的过程中，最好把css或者js文件合并或者是压缩，特别是在开发移动端得时候，如果css或者js内容不是很多，我们可以采用内嵌式，来减少http的请求的次数，加快页面加载速度。如果样式有很多的话，建议采用以下方法进行优化。

1. 尽量把css和js文件压缩成一个文件，来减少http请求次数
2. 使用webpack把文件压缩成min.js等包来减少文件大小
3. 通过一些自动化工具完成css以及js的合并压缩，或者再完成less转css，es6转es5等操作，我们这种自动化构建模式，称之为前端“工程化”开发
4. 使用服务器开启资源文件的GZIP压缩

二、css图标采用精灵图

就是将很多小图片合并成一个大图片，通过定位的方式将图片定位到所需位置上。

通过background-size: 0 0来对图片大小保持一致，用background-position来对图片位置具体定位

三、 CSS放在页面最上部，javascript放在页面最下面

        浏览器会在下载完成全部CSS之后才对整个页面进行渲染，因此最好的做法是将CSS放在页面最上面，让浏览器尽快下载CSS。如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕，所以可以考虑将CSS放在HEAD中。
        Javascript则相反，浏览器在加载javascript后立即执行，有可能会阻塞整个页面，造成页面显示缓慢，因此javascript最好放在页面最下面。但如果页面解析时就需要用到javascript，这时放到底部就不合适了。

最好css放在head中，js放在body尾部，让页面加载的时候，先加载css，再加载js(先呈现页面，再给用户提供操作)

四、css选择器优化

• 尽量减少标签选择器的使用
• 尽量少使用id选择器，多使用样式类选择器（通用性比较强）
• 减少选择器前面的前缀（选择器是从右向左查找的，前缀多，查询的时间多）

五、避免使用css表达式

css如果需要写表达式最好通过js去实现 

六、js中避免使用eval

使用eval的坏处就是性能消耗大、代码压缩后，容易出现代码执行报错等问题。

七、减少闭包的使用

因为闭包会形成一个不会消失的栈内存，过多的栈内存会导致页面的性能变得卡顿，并且还会容易造成内存的泄漏，但是闭包还是有很多好处的，只是建议尽量少用。

 八、绑定DOM元素时使用采用事件委托

把事件绑定给外层容器，当里面的后代元素相关行为被触发，外层容器绑定的方法也会被触发执行（冒泡传播机制导致）通过事件源是谁，然后对其做不同的操作即可

 九、尽量使用css动画来代替js动画

css3的动画或者变形，性能比js动画好。

十、少使用id选择器，多使用类选择器

十一、图片采用懒加载技术 

在实际项目中，我们开始图片都不进行加载，页面首次加载完成后，先把第一屏幕中可以看见的图片进行加载，随着页面滚动，再把下面区域中能够呈现出来的图片进行加载。

详情见JavaScript——懒加载_Nanchen_42的博客-CSDN博客_javascript 懒加载