加载优化
　　合并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渲染

webapp前端性能优化规范的更多相关文章

  1. WebAPP移动前端性能优化规范和设计指导

  2. 移动H5前端性能优化指南

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  3. 阿里巴巴 web前端性能优化进阶路

    Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化 ...

  4. 移动H5开发入门教程：12点webAPP前端开发经验

    如果你是一名移动H5前端开发人员,25学堂的小编认为下面的分享的12点webAPP前端开发经验是你必须掌握的基础知识点.算是一篇移动H5开发入门教程吧! 1. viewport:也就是可视区域.对于桌 ...

  5. 移动H5前端性能优化指南[转]

    移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首 ...

  6. 移动 H5（PC Web）前端性能优化指南

    原文地址https://zhuanlan.zhihu.com/p/25176904?utm_source=wechat_session&utm_medium=social&utm_me ...

  7. [转]移动H5前端性能优化指南

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  8. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  9. 【前端构建】WebPack实例与前端性能优化

    计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几 ...

随机推荐

  1. SpringCloud实战之初级入门（三）— spring cloud config搭建git配置中心

    目录 1.环境介绍 2.配置中心 2.1 创建工程 2.2 修改配置文件 2.3 在github中加入配置文件 2.3 修改启动文件 3. 访问配置中心 1.环境介绍 上一篇文章中,我们介绍了如何利用 ...

  2. 将一个数据库中表的数据导入另一个数据库（DB2）

    将一个数据库中的数据导入另一个数据库(DB2) 我这里举得例子是使用的DB2数据库,其他数据库思路也是这样啦! 1.从db2 数据库中将表中的数据导入本地的excel中 export to d:\my ...

  3. 7、srpingboot改变JDK版本

    在pom.xml中加上 <plugin> <artifactId>maven-compiler-plugin</artifactId> <configurat ...

  4. 结构型--代理模式(Proxy)

    一.代理模式是什么? 代理模式属于GOF23设计模式中结构型中的设计模式,通过代理对象来屏蔽(部分或者屏蔽)对真实对象的直接访问,下图为UML图: 在代理模式中组件包括:抽象角色接口.代理角色类.真实 ...

  5. hdu 3535 (最少1，最多1，任意)（背包混合）(好题)

    http://blog.csdn.net/yan_____/article/details/8530833 这个问题一开始我用滚动,没有做出来,可能要需要先预处理排序才行,后来看了别人的方法,开始用二 ...

  6. Java集合 之List(ArrayList、LinkedList、Vector、Stack)理解（new）

    一. ArrayList底层实现原理 对比 和Vector不同,ArrayList中的操作不是线程安全的!所以,建议在单线程中才使用ArrayList,而在多线程中可以选择Vector或者CopyOn ...

  7. Idea创建Hibernate bean类和.xml文件

    Idea通过表结构反向生成Hibernate实体类和映射文件 首先:之前通过Eclipse反向生成Hibernate的实体类,很傻瓜式,基本上不用配置.但是Idea通过表结构反向生成hibernate ...

  8. Eclipse常用操作

    一 Eclipse常用快捷键 ctrl+Q:跳到最后一次编辑处. ctrl+F:在当前文件中查找并替换. ctrl+T:查看类的继承关系. alt+左箭头:返回到光标的上一个位置. alt+右箭头:前 ...

  9. Android学习——自定义控件（二）

    这篇文章来介绍自定义组合控件,自定义组合控件的应用场景很多,比如当你的UI如下时: 倘若不使用组合控件,则需要在XML文件中声明4个TextView和4个EditText,而使用了组合控件,则只需要四 ...

  10. Build 2016: 发布明天的云创新来服务今天的开发者

    每个企业和行业都在被云潜移默化地改变着.随着云计算的速度.规模和灵活性的不断增加,云服务带来的可能性也在不断被拓展.想象一下,通过监测传感器,一位奶农能够将他的奶牛牛奶产量提高:或是一家医院能够自动监 ...