前端的资源是多方面,包括HTML、css、js脚本、Image、视频等等。现在只说下常见的优化方案:
一、页面级优化。
1.减少HTTP请求数量,尽可能的保持页面结构简洁。
减少资源的使用、合理设置HTTP缓存,资源合并与压缩(web服务器开启gzip压缩等)
css雪碧图、 图片懒加载(或者加载首屏)。
- 将外部脚本置底,避免浏览器加载js脚本而堵塞内容加载。
- 异步执行inline脚本,懒加载脚本js,即当触发时加载或者即将触发时预加载。
4.减少不必要的http跳转,以及避免重复的资源请求。
二、代码级优化:
1.避免不要的回流(reflow)与重绘(repaint)。
2.避免使用 eval和 Function
- css避免过多的父级
- 图片压缩,图片服务器等。小图标base64或者由SVG代替,Svg的代码量比base64的要少很多。
三 、使用CDN、减少DNS查询、添加Expires头、避免重定向等