加载优化
　　合并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. 建造者（生成器）模式C++、Java实现

    1.建造者模式UML 图1. 建造者模式UML 2.C++实现 C++实现类视图: 图2. 建造者模式C++实现的类视图 其中,Product的实现代码是(ProductA和ProductB的代码不再 ...

  2. radio 实现点击两次 第一次点击选中第二次点击取消

    由于项目的需求,要求radio点击两次后为取消状态,不方便修改为checkbox,可以用正面的方法实现. // jquery $('input:radio').click(function(){ // ...

  3. php explode时间分割

    <?php $str = "2017-02-27 13:40:42"; $first=explode(' ',$str); $second=explode('-', $fir ...

  4. browserslist 目标浏览器配置表

    为什么需要: 根据提供的目标浏览器的环境来,智能添加css前缀,js的polyfill垫片,来兼容旧版本浏览器,而不是一股脑的添加.避免不必要的兼容代码,以提高代码的编译质量. 共享使用browser ...

  5. Java基础知识错误分析

    答案:A,C 解析: 题目2: 答案:B 解析: 题目3: 答案:A 解析: 题目4: 答案:D 解析: 题目5: 答案:C 题目六: 答案:C 解析:

  6. Sql-exec

    --显示sql server现有的所有数据库 exec sp_helpdb --查看数据表设置的约束 exec sp_helpconstraint SubjectType --update selec ...

  7. 九、background及相关所有属性

    先看看如下所示的视效图应该如何显示背景阴影? #header { height: 180px; background: url(../images./bg.png) no-repeat center ...

  8. RC4 加解密

    加密解密都是这一个接口 int Rc4EncryptFile(std::string in_file_path, std::string out_file_path, const char *rc4_ ...

  9. jdk1.8 对数组及arrays类对数组的操作与增强

    数组的初始化有两种方式 静态初始化: 初始化时由程序员显示置顶每个数组的初始值,由系统决定数组长度.如: int[] a1 = new int[] {1,2,3,4}; 动态初始化:初始化时由程序员只 ...

  10. ubuntu配置（娱乐工作）

    因为目前没有使用ubuntu作为工作的电脑(mac还是好用),所以暂时记录一下别人分享的ubuntu常用软件: 输入法:搜狗输入法 虚拟机:virtualbox 浏览器:chromium ide:id ...