常见的web前端性能优化方法总结「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

首先，我们要了解一下，前端优化的目的是什么

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

大概有如下优化方法，我们看一下：

一、页面内容优化

1. 减少http请求次数
2. 减少DNS查询次数
3. 避免页面跳转
4. 缓存ajax
5. 延迟加载（一般用在图片多的页面中，滚动时才加载）
6. 预加载
7. 减少DOM元素数量
8. 减少iframe数量
9. 避免404

二、css优化

1. 将样式表置顶将 （CSS放在 HEAD中，防止浏览器有可能还未下载和解析到 CSS就已经开始渲染页面）
2. 避免css表达式
3. 用link代替@import
4. 避免使用filters
5. css文件合并与压缩

三、js代码优化

1. 将脚本置底（将脚本内容在页面信息内容加载后再加载）
2. 使用外部javascript和css文件
3. 去除重复脚本，避免重复的资源请求
4. 减少DOM访问（修改和访问DOM元素会造成页面的重绘和重排，循环对DOM操作更是减慢页面加载速度）
5. js文件合并与压缩

四、图片优化

1. 优化图片大小
2. 尽量使用css sprite（精灵图也叫雪碧图）
3. 不要在html中缩放图片
4. 使用小且可缓存的favicon.ico

五、减少Cookie传输

1. Cookie包含在每次请求和响应中，太大的Cookie会严重影响数据传输，因此哪些数据需要写入Cookie需要慎重考虑，尽量减少Cookie中传输的数据量。

六、浏览器端使用缓存

1. CSS、JavaScript、Logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次HTTP请求都需要的，如果将这些文件缓存在浏览器中，可以极好地改善性能。
2. 用法：通过设置HTTP头中的Cache-Control和Expires属性，可设定浏览器缓存，缓存时间可以是数天，甚至是数月。

七、服务器端使用压缩

1. 在服务器端对文件进行压缩，在浏览器对文件解压缩，可有效减少通信传输的数据量。文本文件的压缩率可达80%以上，因此HTML、CSS、JavaScript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/148173.html原文链接：https://javaforall.cn