-
移动开发
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
白羽
2018-06-08
来源 ：网络
阅读 559
评论 0
摘要：本文将带你了解Webapp前端性能优化规范，希望本文对大家学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时不需要任何单位
标准化浏览器前缀
避免让选择符看起来像正则表达式
图片优化
使用智图 //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渲染
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
