大家好，又见面了，我是你们的朋友全栈君。
首先，我们要了解一下，前端优化的目的是什么
- 从用户角度，优化能够让页面加载得更快、对用户的操作响应更快，给用户提供更为友好的体验。
- 从服务商角度，优化能够减少页面请求数、或者减小请求所占带宽，节省资源。
大概有如下优化方法，我们看一下：
一、页面内容优化
- 减少http请求次数
- 减少DNS查询次数
- 避免页面跳转
- 缓存ajax
- 延迟加载（一般用在图片多的页面中，滚动时才加载）
- 预加载
- 减少DOM元素数量
- 减少iframe数量
- 避免404
二、css优化
- 将样式表置顶将 （CSS放在 HEAD中，防止浏览器有可能还未下载和解析到 CSS就已经开始渲染页面）
- 避免css表达式
- 用link代替@import
- 避免使用filters
- css文件合并与压缩
三、js代码优化
- 将脚本置底（将脚本内容在页面信息内容加载后再加载）
- 使用外部javascript和css文件
- 去除重复脚本，避免重复的资源请求
- 减少DOM访问（修改和访问DOM元素会造成页面的重绘和重排，循环对DOM操作更是减慢页面加载速度）
- js文件合并与压缩
四、图片优化
- 优化图片大小
- 尽量使用css sprite（精灵图也叫雪碧图）
- 不要在html中缩放图片
- 使用小且可缓存的favicon.ico
五、减少Cookie传输
- Cookie包含在每次请求和响应中，太大的Cookie会严重影响数据传输，因此哪些数据需要写入Cookie需要慎重考虑，尽量
减少Cookie中传输的数据量。
六、浏览器端使用缓存
- CSS、JavaScript、Logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次HTTP请求都需要的，如果将这些文件缓存在浏览器中，可以极好地改善性能。
- 用法：通过设置
HTTP头中的Cache-Control和Expires属性，可设定浏览器缓存，缓存时间可以是数天，甚至是数月。
七、服务器端使用压缩
- 在服务器端对文件进行压缩，在浏览器对文件解压缩，可有效减少通信传输的数据量。文本文件的压缩率可达80%以上，因此
HTML、CSS、JavaScript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/148173.html原文链接：https://javaforall.cn
