webapp前端性能优化规范
加载优化
合并css javascript
合并小图片 使用雪碧图
缓存一切可缓存的资源
使用长的cache
使用外链式引用css,javascript
压缩HTML,CSS,JAVASCRPT
启用GZip
使用首屏加载
使用按需加载
使用滚屏加载
通过Media Query加载
增加Loading进度条
减少cookie
避免重定向
异步加载第三方资源
css优化
css卸载头部，javascript写在尾部或者异步
避免图片和iFrame等的空Src
尽量避免重设图片大小
图片尽量避免使用DataURL
尽量避免写在HTML标签中写Style属性
避免css表达式
移除空的css规则
正确使用Display的属性
不滥用Float
不刊用Web字体
不声明过多的font-size
值为0时不需要任何单位
标准化浏览器前缀
避免让选择符看起来像正则表达式
图片优化
使用智图 http://zhitu.tencent.com
使用(css3,scg,IconFont)代替图片
使用Srcset
webP优于GIF
PNG8优于GIF
首次加载大不于1014KB
图片不宽于640
脚本优化
减少重绘和回流
缓存Dom选择与计算
缓存列表
尽量使用时间代理，避免批量绑定事件
尽量使用ID选择器
使用touchstart,touchend代替click
渲染优化
HTML使用Viewport
减少Dom节点
尽量使用css3动画
合理使用requestAnmationFrame动画代替setTimeout
适当使用Canvas动画
Touchmove,Scroll事件会导致多次渲染
使用（css3 transtions,css3 3D transforms,Opacity,Canvas,webGL,Video）来出发GPU渲染
最新文章
- 苹果手机不支持click文字 需要添加 cursor:pointer 才能 识别可以点击
- hive 复杂类型
- C-结构体、枚举
- 与你相遇好幸运，Sail.js其他字段查询
- 【转】mybatis实战教程(mybatis in action)之八:mybatis 动态sql语句
- 使用Python中的urlparse、urllib抓取和解析网页（一）（转）
- 。。。Spring框架总结（一）。。。
- MOSFET管应用总结
- ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax：实现数据的增删查改，查询和分页！
- iOS应用开发：什么是ARC？
- BZOJ 1087
- SQLSERVER设置行号
- Http2改造实践：statusText丢失问题
- NOIP2017SummerTraining0706
- Hadoop记录-hadoop jmx配置
- 编程最好用的字体consolas
- JS 将字符串数组用 | 或其他符号分割
- python3 + selenium 之警告和弹窗
- Unity 之 场景切换
- Soa思想分布式服务webservice WCF