来自公园《HTML5——用新方式创造更好的用户体验》线下活动中来自火速轻应用的技术总监胡敏东的分享。
 
1. fake 页 - 首屏加速
目标:首屏 3s 以内
 
因为 71% 的用户期望移动页面跟 pc 页面一样快 (3s) ,74% 的用户能容忍的响应时间为 5 秒,所以我们必须保证移动端页面有足够的速度。
 
方案:
 
- 避免页面长时间白页,页面渲染只需要完整的 HTML 以及 CSS
- 加载结束后页面第一屏便渲染结束,然后再异步加载js
- 静态资源不使用 cookie
- 优化加载顺序 css头、js尾
 
2. 降低请求「数」
- 将可合并的 CSS、JS 文件合并
- CSS sprites 合并图片资源
 
3. 降低请求「量」
- 合理的使用图片资源(对大图进行处理,使用矢量图片)

- JS混淆(通过简化函数名称, 变量名称, 去空格等达到减小 JS 文件的大小)

- 规划好使用的第三方工具库,减少不必要的引用

- 启用 GZIP 压缩

- Zepto 替换 JQuery
 
4. 缓存一切可缓存的
- 页面缓存(manifest,减轻服务器压力、加快页面加载速度)
- 数据缓存(localStorage/indexedDataBase)
- 只缓存非敏感信息
 
5. 合理使用 Ajax 的 Get、Post
- Post方法在AJAX 请求下会被拆分成两个: sending header first, then sending data
- Get提交的数据较少
- Post相对来说更安全
 
6. 使用合理的图片加载方案
- 延迟加载:使用 setTimeOut 或 setInterval 进行加载延迟
- 条件加载:符合某些条件,或触发了某些事件才开始异步下载
- 可视区加载:即仅加载用户可以看到的区域,这个主要由监控滚动条来实现,一般会在距用户看到某图片前一定距离遍开始加载,这样能保证用户拉下时正好能看到图片
 
7. 减少渲染回流
- HTML渲染过程 
 
| 生成DOM树
| 计算CSS样式
| 构建 render tree
| reflow,定位元素位置大小
| 绘制页面
 
- 这些操作会导致回流
 
| 操作dom结构
| 动画
| DOM样式修改
| 获取元素尺寸的API
 
注:若是 javascript 动态改变 DOM Tree 便会引起 reflow 页面中的元素改变,只要不影响尺寸,比如只是颜色改变只会引起 repaint 不会引起回流
 
8. 减少使用定位元素
- static元素处于文档流中,其渲染速度是最快的 
- absolute定位元素在手机上可能会导致的问题:
- 定位元素在手机上不能显示
- 定位元素动画效果失效。
- 以上问题便是 UI 渲染失效多导致,最好的解决方案是减少使用定位元素,否则只能引起强烈 reflow 才能解决
- Fix 定位元素导致的问题
- fixed元素遭遇文本框时失效,可能会飘到页面中间阻挡输入
- 影响效率
 
9. 手动释放资源
- 不能完全依赖于浏览器的垃圾**
- 资源必须手动释放
 
| 释放没有使用的闭包
| 观察者需要得到清理
| 释放定时器
| view 切换过程中,在 destroy 中释放 view 相关资源
 
10. 区域滚动使用 Iscroll
- webapp 区域滚动

- 解决动画过程带来的长短页问题
 
11. Touch 事件替换 Click
- Click 点击响应比 Touch 慢 300ms(手机需要知道你是不是想双击放大网页内容)
- 解决动画过程带来的长短页问题
- 总而言之,IScroll 方案的提出,是让 webapp 媲美 native app 靠近了一大步,真正的平起平坐还需要浏览器的支援
 
12. 合理使用 CSS 特性
- 不要使用 CSS 字体

- 避免使用 CSS 表达式

- 高频渲染触发 GPU 加速(CSS3 transitionsCSS3 3D transforms)
 
13. 尽量不要使用 DataURI
- 解析是由成本

- 手机端 DataURI 要比简单的外链资源要慢 6 倍
 
14. 合理使用 Canvas 动画
- Canvas是状态机,减少状态切换能提高效率
- Canvas分层渲染
- 少用 shadow
- canvas.WIDTH1: = canvas.WIDTH1: 代替 context.clearRect(0, 0, WIDTH1:, HEIGHT1)
- 坐标系整数化
- 使用 requeatAnimationFrame
- 放弃 settimeout 动画

HTML5体验改进的14条军规的更多相关文章

  1. 雅虎Yahoo 前段优化 14条军规

    Yahoo 14条 雅虎十四条 腾讯前端设计的Leader推荐我背熟的.请大家都能好好学习,不要像我一样一扫而过,好好的记下来!不仅仅是晓得一些CSS xhtml就好了,深刻认识到很多的东西需要学习的 ...

  2. 关于Yahoo十四条军规与前端性能优化

    关于Yahoo十四条军规与前端性能优化 热度 4已有 223 次阅读2014-8-3 15:01 |个人分类:前端相关|系统分类:前端优化| 前端优化, yahoo, 性能优化 启用Gzip压缩.Gz ...

  3. Yahoo前端优化的35条军规

    摘要:无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢?可以遵循雅虎的前端优化34条军规,不过现在已经是35条了,所以可以说是雅虎前端优化的35条军 ...

  4. 推荐书籍 -《移动App测试的22条军规》

    在今天的博文中,博主希望给大家分享一本博主同事黄勇的最新利作:<移动App测试的22条军规>.黄勇是ThoughtWorks资深敏捷QA和咨询师.对于我来说,和黄勇在一起的工作的这个项目, ...

  5. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  6. 【MySql】赶集网mysql开发36条军规

    [MySql]赶集网mysql开发36条军规 2012-05-14 14:02:33 分类: Linux   写在前面的话: 总是在灾难发生后,才想起容灾的重要性: 总是在吃过亏后,才记得曾经有人提醒 ...

  7. Yahoo前端优化十四条军规

    相信互联网已经越来越成为人们生活中不可或缺的一部分.Ajax,flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功能. 比如Google机会已经把最基本的office应 ...

  8. MySQL 数据库开发的 36 条军规

    MySQL 数据库开发的 36 条军规 写在前面的话: 总是在灾难发生后,才想起容灾的重要性: 总是在吃过亏后,才记得曾经有人提醒过. (一)核心军规 (1)不在数据库做运算:cpu计算务必移至业务层 ...

  9. [赶集网] 【MySql】赶集网mysql开发36条军规

    [赶集网] [MySql]赶集网mysql开发36条军规 (一)核心军规(1)不在数据库做运算   cpu计算务必移至业务层:(2)控制单表数据量   int型不超过1000w,含char则不超过50 ...

随机推荐

  1. 20145224&20145238 《信息安全系统设计基础》 第四次实验

    20145224&20145238 <信息安全系统设计基础>第四次实验 课程:信息安全系统设计基础 班级:1452 姓名:陈颢文 荆玉茗 学号:20145224 20145238 ...

  2. python——创建django项目全攻略(野生程序员到家养程序员的完美进化)

    新建工程 我用pycharm写代码,所以一般就用pycharm创建django工程.右上角File-New Project.选择路径,修改项目名称,确定.就可以创建一个新的django工程.     ...

  3. qt-creator astyle Peizhi

    --style=ansi -s4 --pad-oper -S -N -L -m0 --add-brackets -M40 --suffix=none --convert-tabs %{CurrentD ...

  4. JQUERY MOBILE 中文API站 和 官方论坛

    中文API站:http://www.jqmapi.com/api1.2/preview/quickstartquide.html 官方论坛:http://bbs.phonegapcn.com/foru ...

  5. MYSQL低权限读文件

    技巧:Reading files in MySQL with file_priv = no. 当用户无权限调用load_file()函数的时候可以用以下方式读取文件内容: 1.建立test(不分配fi ...

  6. python时间格式化

    import timeprint time.time()输出的结果是:1279578704.6725271 但是这样是一连串的数字不是我们想要的结果,我们可以利用time模块的格式化时间的方法来处理: ...

  7. Bootstrap <基础二十九>面板(Panels)

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  8. 怎么将Android studio 的“ build:gradle改低一点”

    参考来源:http://bbs.qcloud.com/thread-17193-1-1.html Error:Execution failed for task ':xxxx:compileDebug ...

  9. js动画之同时运动

    一个物体可以同时做多个运动,而不是完成一个运动再一个运动,而是让你感觉他们是同时发生的. 直接上代码 <!DOCTYPE html> <html lang="en" ...

  10. Fix the iOS code signing issue when using Jenkins

    This week I setup the Jenkins on my Mac and try to build iOS applications. unfortunately I got the c ...