加载优化
　　合并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. 浅谈WebService之JAX-RS与spring整合

    背景:首先谈一下webservice: 1.Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序, 可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发 ...

  2. 译:Java局部变量类型推断（Var类型）的26条细则

    原文链接:https://dzone.com/articles/var-work-in-progress 作者:Anghel Leonard 译者:沈歌 Java局部变量类型推断(LVTI),简称va ...

  3. PAT 1028. List Sorting

    #include <cstdio> #include <cstring> #include <cstdlib> #include <algorithm> ...

  4. sql:日期操作注意的,如果以字符串转日期时的函数,因为数据量大,会出问题

    ---1.以日期字符操作转换日期 如果是VIP1生日不对,可以以上传的数据日期为生日 begin declare @NowBirthday datetime, @birthday datetime,@ ...

  5. 10.31NOIP模拟赛解题报告

    心路历程 预计得分:\(100 +100 +80\) 实际得分:\(30 + 100 + 80\) 天天挂分..感觉我noip要凉.. T1不难,但是太坑了 T2不难 T3不难,但是在小机房考试脑子都 ...

  6. 手贱--npm 误改全局安装路径

    修改全局安装命令: 通过 npm config set prefix "目录路径" 来设置. 通过 npm config get prefix 来获取当前设置的目录. 我的node ...

  7. package.json中版本理解

    一个完整的版本号可以理解为: [主要版本号,次要版本号,补丁版本号]版本号 x.y.z :其中z 表示一些小的bugfix, y表示一些大的版本更改,比如一些API的变化x表示一些设计的变动及模块的重 ...

  8. easyui grid 里的可编辑text 加清空图标

    $.extend($.fn.datagrid.defaults.editors, { text: { init: function (container, options) { var _opt = ...

  9. C语言数组指针（指向数组的指针）

    注意:数组指针的定义,与指针数组的区别 转载:http://c.biancheng.net/cpp/biancheng/view/162.html 指向多维数组元素的指针变量 ① 指向数组元素的指针变 ...

  10. Linux 下载百度网盘大文件

    Linux 下没有百度网盘客户端,用浏览器下载速度慢得急死人 鼠标移到链接处, 右键, 然后复制链接 接着在终端里输入 axel -n 50 -o filename.ext “粘贴链接到此处” axe ...