前端加载性能优化方案
一. 加载性能优化方案
1.服务器端访问优化
Gzip压缩项目文件大小
CDN加速，加快资源的访问速度
分布式静态服务器请求静态文件，设置浏览器缓存
2.HTTPS请求优化
保证请求资源尽量小
减少文件数量，减少文件请求
3.浏览器端渲染优化
1） DOM加载优化
避免使用iframe，阻塞父级页面onload
精简DOM结构
2）图片加载优化
初始首屏之外的图片资源需延迟加载
图片使用CSS Sprites 或 DATA URL 尽量不使用图片，如果可以使用css3实现
显示设置图片宽高，避免页面repaint 图片压缩，尽量使用JPGE，PNG8，如果图片超过50k，考虑叫设计进行优化
针对不同的设备，用media query调用不同size的图片
根据不同的网络状况，调用不同size的图片
3）css加载优化
合并css文件
使用高性能css选择器
使用css3代理js动画处理，使用translate3d开启GPU动画加速
禁止使用@import引入css文件
避免在低端机上使用大量CSS3渐变阴影效果，可考虑降级效果来提升流畅度
4）js加载优化
合并压缩js文件
单页面应用(SPA)考虑延迟加载非首屏业务模块
不可见Tab页延迟加载
避免使用大型类库
基础类库推荐使用zepto
尽可能使用事件代理，避免批量绑定事件
编写高性能javascript
5）浏览器端数据缓存
使用localStorage进行数据缓存
二. 响应性能优化方案
1.避免使用click事件，避免 iOS 300+ms 点击延时问题
2.避免触发页面重绘restyle,repaint,relayout的操作，注意DOM元素的循环操作
3.小心连续触发的事件scroll/resize/touchmove，避免高频繁触发执行
三. 性能检测方案
使用阿里测，YSlow做性能检测
在线分析：https://developers.google.com/speed/pagespeed/insights/?url=www.souche.com
一些指导原则比较老，不一定准确。
可以使用chrome插件：pagespeed，里面的指导原则比较新：
https://chrome.google.com/webstore/detail/gplegfbjlmmehdoakndmohflojccocli