Open mishe opened 8 years ago
Gzip压缩项目文件大小 CDN加速，加快资源的访问速度 分布式静态服务器请求静态文件，设置浏览器缓存
保证请求资源尽量小 减少文件数量，减少文件请求
避免使用iframe，阻塞父级页面onload 精简DOM结构
初始首屏之外的图片资源需延迟加载 图片使用CSS Sprites 或 DATA URL 尽量不使用图片，如果可以使用css3实现 显示设置图片宽高，避免页面repaint 图片压缩，尽量使用JPGE，PNG8，如果图片超过50k，考虑叫设计进行优化 针对不同的设备，用media query调用不同size的图片 根据不同的网络状况，调用不同size的图片
合并css文件 使用高性能css选择器 使用css3代理js动画处理，使用translate3d开启GPU动画加速 禁止使用@import引入css文件 避免在低端机上使用大量CSS3渐变阴影效果，可考虑降级效果来提升流畅度
合并压缩js文件 单页面应用(SPA)考虑延迟加载非首屏业务模块 不可见Tab页延迟加载 避免使用大型类库 基础类库推荐使用zepto 尽可能使用事件代理，避免批量绑定事件 编写高性能javascript
使用localStorage进行数据缓存
1.避免使用click事件，避免 iOS 300+ms 点击延时问题 2.避免触发页面重绘restyle,repaint,relayout的操作，注意DOM元素的循环操作 3.小心连续触发的事件scroll/resize/touchmove，避免高频繁触发执行
使用阿里测，YSlow做性能检测
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做性能检测