加载优化
　　合并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. java swing画图片爱心

    第一次用swing做一个可视化程序,写第一篇随笔,有写的不好的地方请多多见谅.上个星期三在网上看到一个画爱心的软件,就想着自己用java也实现一个程序,画爱心用到的数学函数知识在网上百度的,不是本人原 ...

  2. 【原创】MapReduce程序如何在集群上执行

    首先了解下资源调度管理框架Yarn. Yarn的结构(如图): Resource Manager (rm)负责调度管理整个集群上的资源,而每一个计算节点上都会有一个Node Manager(nm)来负 ...

  3. Csharp:WebClient and WebRequest use http download file

    //Csharp:WebClient and WebRequest use http download file //20140318 塗聚文收錄 string filePath = "20 ...

  4. nodejs项目windows下开机自启动

    Nodejs项目开机自启动 1. 在需要自启动的项目中安装 node-windows 模块 npm install node-windows --save 2. 在项目根目录创建nw.js文件 代码截 ...

  5. CentOS 7运维管理笔记(11)----解决配置静态IP还是会出现动态IP地址的问题

    网上搜集CentOS7 配置静态IP的方法,基本上都是说在 /etc/sysconfig/network-scripts/ifcfg-eth0文件中做如下配置 TYPE=Ethernet HWADDR ...

  6. margin的auto的理解 top,left[,bottom,right] position

    auto auto 总是试图充满父元素 margin有四个值: All the margin properties can have the following values: auto - the ...

  7. day22笔记

    用户上传的文件要保存 保存在服务器上的media文件夹下,用户上传的文件很多,所以需要分目录进行存放具体步骤 settings.pyMEDIA_URL="/media/"MEDIA ...

  8. geoserver 知识小计

    http://localhost:8888/geoserver/wms?service=WMS&request=GetCapabilities 这个地址用于获取发布的WMS服务的属性,用于获取 ...

  9. MongoDB安装步骤

    安装C:\Users\Administrator>d:\mongo\bin\mongod -dbpath=D:\ND.Monodb\ND.Monodb.db -logpath=D:\ND.Mon ...

  10. C#中的多线程 - 并行编程 z

    原文:http://www.albahari.com/threading/part5.aspx 专题:C#中的多线程 1并行编程Permalink 在这一部分,我们讨论 Framework 4.0 加 ...