商学院
HTML5之使用技巧:如何提高网站前端性能
   
 
it之王
  被约:
决战天球商业模拟_管理人员模拟培训_创业模拟_商战模拟_MBA模拟课程

1.用web storage替换cookies
Cookie最大的问题是每次都会跟在请求后面。在HTML5中,用sessionStorage和localStorage把用户数据直接在客户端,这样可以减少HTTP请求的数据量。而且Web storage还提供了API来操作数据,不像cookie,还得自己写。

2.使用 CSS动画,而不是JavaScript动画
使用CSS的动画,而不是JS动画。因为某些机器可以对CSS的动画进行GPU加速,而且也减少了JS文件请求。
 
3.使用客户端数据库
使用Web SQLDatabase或IndexedDB这类客户端数据库,可以减少HTTP请求的数量。向地区列表,好友列表这样的数据就可以直接存储在客户端。有时你也可以使用sessionStorage和localStorage,因为一般来说,这类相比更快。

4.直接使用JS的新功能
JS已经有了很大的发展,比如Array引入了很多新的方法,比如map,filter, forEach等。另外JSON也直接嵌入浏览器了,不需要再引入json2.js文件了。

 
5.缓存HTML标记
通过缓存,把HTML文件缓存在客户端。不过这些缓存的HTML文件只有结构,没有内容,内容需要通过JS操作JSON对象来把数据填入页面中。这样的HTML文件相当于模板。


6.使用硬件加速
现在领先的浏览已经启用了GPU级别的硬件加速,通过某些指令或hack可以打开这些硬件加速。比如CSS中使用3D转换或动画,就可以打开GPU硬件加速。

   .hwaccel { -webkit-transform: translateZ(0); }  
7.  耗CPU的操作用WebWorker来完成
对于需要处理比较耗时或耗CPU的操作,使用WebWorker,这个不仅快,而且是在后台操作的,不影响正常浏览器交互。

8.使用form的新的特性
HTML的form加入了很多新的属性、元素和验证功能,使用这些新的功能可以减少JS和CSS的介入。

9.使用CSS3的替换CSS精灵
使用CSS3可以达到一些CSS sprites的效果,也许100字节左右的CSS就可以替换2K的image sprites,而且请求数量也大减少了。

CSS3比较常用的特效包括:圆角,渐变,阴影,透明,变形,遮罩等。

10. 对于实时应用程序,使用WebSocket替换XHR
WebSocket最早是用来设计取代Ajax轮询方式的,它比Ajax的好处在于比Ajax轻量,使用更少的带宽。据某些报道,WebSocket比Ajax大约要减少30%的传输量,而且速度也大约要快35倍。爱立信在测试WebSocket性能时发现,使用ping命令都要比WebSocket多消耗3到5的时间,所以非常适合实时应用程序。

声明:该文及以下回复观点仅代表作者本人,五略商书系信息发布平台,仅提供信息存储空间服务。
转载请注明作者和出处:转自《五略商书》,作者it之王!
0人评论,点击参与
  相关阅读
共创江山
毛毛虫效应、美女效应、门槛效应、
罗米欧与朱丽叶效应
临近效应、留面子效应、流言的心理
库里肖夫效应、冷热水效应、连带效
北京商书策管理咨询,专业的精益生产咨询、人力资源咨询、企业内训
约课
讲师
学院
发现
我的