web前端开发，如何提高页面性能优化？

web前端开发，如何提高页面性能优化？

• 内容方面

1. 减少HTTP请求次数
2. 减少DOM操作
3. 减少DNS查询
4. 使用Ajax 可缓存

• css方面

1. 把css样式HTML代码页的上端
2. 从页面中分离css代码，从外部引入
3. 压缩代码
4. 不要使用@import
5. 避免css表达式

• js方面

1. 脚本放到HTML代码页底部
2. 从页面中分离js代码，从外部引入
3. 压缩代码
4. 减少对DOM的访问
5. 移除重复的脚本

• 图片方面

1. 优化图片（少用图片用css3新特性代替，使用矢量图代替位图）
   矢量图：图标字体。 位图：GIF、JPG、PNG
2. 不要在HTML中使用缩放图片
3. 使用恰当的图片格式
4. 按照HTTP协议设置合理的缓存
5. 用css或js实现预加载
6. WebP图片格式能给前端带来优化
   WebP格式：谷歌开发一种旨在加快图片加载速度的图片格式