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

脚本宝典收集整理的这篇文章主要介绍了

html5教程-在HTML5中如何提高网站前端性能

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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

 // if localStorage is present, use that
 if (('localStorage' in window) && window.localStorage !== null) {
 
   // easy object property API
   localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';
 
 } else {
 
   // without sessionStorage we'll have to use a far-future cookie
   //   with document.cookie's awkward API html5教程-在HTML5中如何提高网站前端性能-脚本宝典
   var date = new Date();
   date.setTime(date.getTime()+(365*24*60*60*1000));
   var expires = date.toGMTString();
   var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
                   ' expires='+expires+'; path=/';
   document.cookie = cookiestr;
 }

2.    使用 CSS动画,而不是JavaScript动画
使用CSS的动画,而不是JS动画。因为某些机器可以对CSS的动画进行GPU加速,而且也减少了JS文件请求。

 p.box {
   left: 40px;
   -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
           transition: all 0.3s ease-out;
 }
 p.box.totheleft { left: 0px; }
 p.box.totheright { left: 80px; }
3.    使用客户端数据库
使用Web SQLDatabase或IndexedDB这类客户端数据库,可以减少HTTP请求的数量。向地区列表,好友列表这样的数据就可以直接存储在客户端。有时你也可以使用sessionStorage和localStorage,因为一般来说,这类相比更快。

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

// Give me a new array of all values multiplied by 10.
 [5, 6, 7, 8, 900].map(function(value) { return value * 10; });
 // [50, 60, 70, 80, 9000]
 
 // Create links to specs and drop them into #links.
 ['html5', 'css3', 'webgl'].forEach(function(value) {
   var linksList = document.querySelector('#links');
   var newLink = value.link('https://google.com/search?btnI=1&q=' + value + ' spec');
   linksList.innerHTML +=  newLink;
 });
 
 // Return a new array of all mathematical constants under 2.
 [3.14, 2.718, 1.618].filter(function(number) {
   return number < 2;
 });
 // [1.618]
 
 // You can also use these extras on other collections like nodeLists.
 [].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
   localStorage['bucket' + i] = elem.getAttribute('data-bucket');
 });

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的时间,所以非常适合实时应用程序。

 

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

 // if localStorage is present, use that
 if (('localStorage' in window) && window.localStorage !== null) {
 
   // easy object property API
   localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';
 
 } else {
 
   // without sessionStorage we'll have to use a far-future cookie
   //   with document.cookie's awkward API html5教程-在HTML5中如何提高网站前端性能-脚本宝典
   var date = new Date();
   date.setTime(date.getTime()+(365*24*60*60*1000));
   var expires = date.toGMTString();
   var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
                   ' expires='+expires+'; path=/';
   document.cookie = cookiestr;
 }

2.    使用 CSS动画,而不是JavaScript动画
使用CSS的动画,而不是JS动画。因为某些机器可以对CSS的动画进行GPU加速,而且也减少了JS文件请求。

 p.box {
   left: 40px;
   -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
           transition: all 0.3s ease-out;
 }
 p.box.totheleft { left: 0px; }
 p.box.totheright { left: 80px; }
3.    使用客户端数据库
使用Web SQLDatabase或IndexedDB这类客户端数据库,可以减少HTTP请求的数量。向地区列表,好友列表这样的数据就可以直接存储在客户端。有时你也可以使用sessionStorage和localStorage,因为一般来说,这类相比更快。

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

// Give me a new array of all values multiplied by 10.
 [5, 6, 7, 8, 900].map(function(value) { return value * 10; });
 // [50, 60, 70, 80, 9000]
 
 // Create links to specs and drop them into #links.
 ['html5', 'css3', 'webgl'].forEach(function(value) {
   var linksList = document.querySelector('#links');
   var newLink = value.link('https://google.com/search?btnI=1&q=' + value + ' spec');
   linksList.innerHTML +=  newLink;
 });
 
 // Return a new array of all mathematical constants under 2.
 [3.14, 2.718, 1.618].filter(function(number) {
   return number < 2;
 });
 // [1.618]
 
 // You can also use these extras on other collections like nodeLists.
 [].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
   localStorage['bucket' + i] = elem.getAttribute('data-bucket');
 });

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的时间,所以非常适合实时应用程序。

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

html5教程-在HTML5中如何提高网站前端性能

全部内容,希望文章能够帮你解决

html5教程-在HTML5中如何提高网站前端性能

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过