HTML5体验改进的14条军规


来自公园《HTML5——用新方式创造更好的用户体验》线下活动中来自火速轻应用的技术总监胡敏东的分享。 1. fake 页 - 首屏加速目标:首屏 3s 以内 因为 71% 的用户期望移动页...
来自公园《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 动画
标签: 缓存csshtml5

更多 缓存 相关资讯

HTML5应用程序缓存Application Cache详解

HTML5应用程序缓存Application Cache详解

什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用。 Applic

html5的离线存储问题汇总

HTML5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一

HTML 5应用程序缓存使用总结

HTML 5应用程序缓存使用总结

近期接触了HTML5本地缓存,在HTML页面的html标签加入后缀为.appcache的文件,即可以轻松地创建 web 应用的离线版本。 使用本地缓存带来的好处:离线浏览 - 用户可在应用离

HTML5 应用程序缓存(Application Cache)

1.应用程序缓存(Application Cache):  通过使用manifest并配置文件列表  应用程序缓存为应用带来三个优势:  •离线浏览 - 用户可在应用离线时使用它们  •速度 - 已

使用ASP.NET MVC构建HTML5离线web应用程序

web应用程序的主要制约之一就是连接性。在HTML5到来之前我们就曾想挖掘浏览器的能力,以使web应用程序能像桌面应用程序一样功能强大和易于使用,但浏览器始终让我们感到

更多 css 相关资讯

7款外观迷人的HTML5/CSS3 3D按钮特效

7款外观迷人的HTML5/CSS3 3D按钮特效

向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱。 1、CSS3超酷3D弹性按钮 按钮实现非

html/css应用的方法

html/css应用的方法

        1、制作透明效果   opacity:0.7;   filter:alpha(opacity=70);   2、清除浮层的另外方法   .clearfix:after {   content:".";   display:blo

HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer

HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer

大家可能都知道HTML5中出现了很多以前没有的标签,例如,header,nav,和footer,在这之前我们如果开发相关的页面布局的时候,往往都是使用CSS来定义相关的头部,导航及其页底部分

CSS 与 HTML5 响应式图片

CSS 与 HTML5 响应式图片

随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力

HTML 5 & CSS 3的新交互特性

HTML 5 & CSS 3的新交互特性

本文标题的这副图片,是用Phosotshop制作的。但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字。并且由于图片的体积不算太小,可能网速慢的网友在

HTML5、CSS3应用教程之 跟DIV说Bey!Bey!

Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站。我们可以在不使用内联<font>和<

HTML5中对style属性的解释与规定

所有HTML元素都可以设置style属性,用以设置CSS样式,其值需符合CSS样式书写标准。 为元素设置的style属性值,将覆盖相同的、以其他形式为其设置的css属性,例如外部文件。

更多 html5 相关资讯

将HTML5封装成android应用APK文件的几种方法

越来越多的开发者热衷于使用html5+JavaScript开发移动Web App。不过,HTML5 Web APP的出现能否在未来取代移动应用,就目前来说,还是个未知数。一方面,用户在使用习惯上,不喜欢在浏

HTML5里的placeholder属性

HTML5里的placeholder属性

HTML5里新引入很多有趣的新特征;有些体现在HTML里,有些是JavaScript API,全部非常的有用。其中我最喜欢的一个特征就是文本框(INPUT)里的placeholder属性。placeholder

7种炫酷HTML5 SVG液态水滴融合动画特效

7种炫酷HTML5 SVG液态水滴融合动画特效

这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效。这些SVG动画特效使一些HTML元素,如菜单、分页按钮、APP、选择框等元素的过渡动画像几粒水滴一样融合分解,效果

绘制SVG内容到Canvas的HTML5应用

绘制SVG内容到Canvas的HTML5应用

SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融

PHP结合HTML5使用FormData对象提交表单及上传图片

PHP结合HTML5使用FormData对象提交表单及上传图片

FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台。在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量。 使用Form

HTML5应用程序缓存Application Cache详解

HTML5应用程序缓存Application Cache详解

什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用。 Applic

10个最常见的 HTML5 面试题及答案

10个最常见的 HTML5 面试题及答案

这是选择了10个 HTML5 面试问题并给出了答案。这是 Web 开发人员最常见的面试问题,相信你掌握了这些重要的面试问题后一定会觉得你的理解提高了。一起来看看吧。 1、新的

html5的自定义data-*属性与jquery的data()方法的使用

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上

HTML5仿苹果手机的面板合拢折叠效果

HTML5仿苹果手机的面板合拢折叠效果

这是一个HTML5折叠菜单,但更像是一个折叠面板,仿苹果手机的passbook应用中的代码例子,请在火狐或chrome下浏览。不知道有没有听说过手机琴菜单,觉得这一个从形式上来说,是

基于HTML5制作在线上海地铁图

基于HTML5制作在线上海地铁图

某市政项目要用到地铁图,展示上海地铁站点以及相关信息流,尝试使用HTML5技术来实现,自己折腾有点慢,找到一个HTML5的图形组件-Qunee for HTML5,简单学习一下,就可以很好