提高网站性能之 如何对待JavaScript_javascript技巧

尤其是JavaScript 文件,在下载它时,并行下载实际上是被禁用的,并且还会阻塞页面的呈现!

关于JavaScript 的下载

在下载JavaScript 脚本文件时,浏览器不会并行启动其它下载,而是让JavaScript 脚本文件单独下载完毕后,再继续其它请求。这将对页面的整体性能是一个很大的问题,解决方案如下:

解决方案1:将JavaScript 脚本内联在页面中,即直接将JavaScript 脚本写在HTML标签中。
优点:速度最快。在大型网站的首页中,可以合理的将JavaScript 脚本的一部分直接内联在HTML标签中。
缺点:JavaScript 脚本不被单独缓存,其它页面不能共享该JavaScript 脚本(不能重用)。

解决方案2:将JavaScript 脚本标签的链接(link)放在HTML文件标签的底部。
要求:脚本中不包含document.write() 方法改写页面。

解决方案3:使用延迟(Defferred) 脚本。即在link标签中添加defer 属性表明JS脚本中不包含document.write() 方法。
缺陷:在Firefox 中使用延迟(Defferred ) 脚本后,JavaScript 脚本还是会阻塞呈现、阻塞并行下载。
而在IE中,效果也不明显。

总结:如果一个脚本可以使用延迟(Defferred ) 脚本技术,那么它一定可以移到页面的底部!
即“解决方案3”完全可以用“解决方案2”替代。

解决方案4:使用加载后下载。即JavaScript 脚本在页面加载完毕后,通过onload 事件动态下载。(CSS也通用 )
优点:既不阻塞HTML页面的呈现,又能实现JavaScript 脚本的重用(脚本将被缓存在浏览器中)。
缺点:产生额外的JavaScript 代码用于实现该功能,增加了程序复杂度。
问题:可能加载两次(内联一次,外部加载一次)。

可以使用IFrame嵌套一个页面并加载JavaScript 脚本来解决。
示例:http://stevesouders.com/hpws/post-onload.php

解决方案5:动态内联。根据cookie做指示器,用代码进行判断,实现将外部JS内联到页面当中。
动态内联是对“加载后下载”的进一步完善。也再次增加了程序复杂度。
虽然JavaScript 脚本推荐放在页面底部,但CSS样式表则应该放在页面的顶部!

关于JavaScript 的精简

精简(Minification)是从代码中移除不必要的字符、注释、空白以减小JavaScript 代码的大小,进而改善JavaScript的下载长度和加载速度。

精简工具:JSMin JS Minifier js压缩
JSMin 用于去除javascript 文件中所有不必要的字符、注释、空白。

cmd 使用方法:C:\Documents and Settings\xugang>jsmin <openWin.js> js_rerurn.js
1. 先指定到 jsmin.exe 文件夹
2. openWin.js为源文件
3. js_rerurn.js为目标文件

精简工具:ShrinkSafe( 原名:Dojo Compressor ) http://dojotoolkit.org/docs/shrinksafe
ShrinkSafe 用于移除javascript 文件中的空白,同时还通过替换的方式缩短了变量名。
cmd 使用方法:java -jar shrinksafe.jar infile.js > outfile.js
shrinksafe.jar是工具名
infile.js为源文件
outfile.js为目标文件

注意:在控制台运行时,要保证shrinksafe.jar和js.jar是在同一个目录,并且输入的JS源文件和输出的JS目标文件也会在同一个目录。(默认在C盘根目录)

一般可以对你的JavaScrip文件同时使用JSMin 和 ShrinkSafe 这两个工具进行精简。
压缩组件

同时,不要忘记通过HTTP的头部声明,压缩脚本、样式表和HTML文档来减少响应时间。
浏览器客户端的请求: Accept-Encoding: gzip, deflate
Web服务器端的响应:Content-Encoding: gzip
gzip是目前流行和理想有效压缩方法,deflate效果略逊且不太流行。

时间: 2024-10-29 18:04:47

提高网站性能之 如何对待JavaScript_javascript技巧的相关文章

JavaScript提高网站性能优化的建议(二)_javascript技巧

在javascript关于提高网站性能的几点建议(一)中,从HTTP请求到页面渲染几个方面对提高网站性能提出了几点建议,本文是学习Steve Sounders的另外一本书<高性能网站建设进阶指南>之后,从JavaScript性能的角度进行总结概括,诸君共勉. JavaScript性能是实现高性能Web应用程序的关键 --Steve Sounders 1 利用js作用域链 作用域链(scope chain) 当执行一段JavaScript代码(全局代码或函数)时,JavaScript引擎会创建为

提高网站性能中内容有关的10条原则

英文地址:http://developer.yahoo.com/performance/rules.html Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.最佳实践的核心就是旨在提高网站性能. Excetional Performance团队总结出了一系列可以提高网站速度的方法.可以分为7大类34条.包括内容.服务器.cookie.CSS.JavaScript.

提高网站性能中网站服务器的改进

在本系列的第一节中,讲了 提高网站性能中网站"内容"有关的10条原则 .除了在网站在内容上的改进外,在网站服务器端上也有需要注意和改进的地方,它们包括: 使用内容分发网络 为文件头指定Expires或Cache-Control Gzip压缩文件内容 配置ETag 尽早刷新输出缓冲 使用GET来完成AJAX请求 11.使用内容分发网络 用户与你网站服务器的接近程度会影响响应时间的长短.把你的网站内容分散到多个.处于不同地域位置的服务器上可以加快下载速度.但是首先我们应该做些什么呢? 按地

JavaScript和CSS的优化提高网站性能

      在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则,除此之外,JavaScript和CSS也是我们页面中经常用到的内容,对它们的优化也提高网站性能的重要方面:CSS: 把样式表置于顶部 避免使用CSS表达式(Expression) 使用外部JavaScript和CSS 削减JavaScript和CSS 用<link>代替@import 避免使用滤镜 JavaScript 把脚本置于页面底部 使用外部JavaScript和CSS 削减JavaScript和C

提高网站关键词排名的几个技巧

摘要: SEO优化是一种快速增长网站流量的一门技术.SEO已成为了创业者们不得不重视的一种免费营销方式.可是,在网站运营中,总会有很多人问我的关键词排名怎么老上不去?为什么今天排 SEO优化是一种快速增长网站流量的一门技术.SEO已成为了创业者们不得不重视的一种免费营销方式.可是,在网站运营中,总会有很多人问'我的关键词排名怎么老上不去?为什么今天排名靠前,而明天却排名急剧下降呢?'等等这些反应不是很理想的问题,那么,该如何有效的提高网站关键词排名以此来获得稳定的流量呢?接着下,笔者将会一一讲述

JavaScript关于提高网站性能的几点建议(一)_javascript技巧

近在学习<高性能网站建设指南>这本书,本文算是一个学习笔记,将学到的东西进行整理一下,方便后面查看. 性能黄金法则(Performance Golden Rule)解释了只有10%~20%的最终用户响应时间花在接受所请求的用户HTML文档上,剩余的80%~90%时间花在为HTML文档所引用的所有组件(图片.脚本.样式表等)进行的HTTP请求上,最终用户响应时间花费在页面组件上   --Steve Sounders 1 文件合并(减少HTTP请求数量) CSS Sprites   利用css s

用CSS开启硬件加速来提高网站性能

国外一篇文章,有点意思,转载过来,准备尝试下~ 中文地址:http://www.cnblogs.com/rubylouvre/p/3471490.html 原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css   你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗? 现在大多

提高网站收录量的几个技巧

网站架设好之后我们最关注的问题就是网站的排名和收录情况,这也是很多站长纠结的问题.每天盯着屏幕用各种站长工具对网站进行查询,期望着收录量不断增加排名不断提高.往往有的时候不尽如人意尤其对于新手而言,试验了很多方法依然没有多大的效果,下面简单的说一下我在提高百度收录量上的一些小技巧. 撰写文章: 撰写有独特见解的文章,如果你的文笔比较好的话可以自己写一些相关文章(当然也可以找他人代笔)一定得是原创文章这样会提高百度蜘蛛的搜索率,好的文章也会被其他网站转载提高外链,文章中要特别注意关键词的密度,一般

实例讲解快速提高网站收录量的三个技巧

网站收录量的高低是站长做长尾关键词优化时必须解决的问题之一,毕竟长尾关键词优化主要是利于内页进行的,而如果内页连收录都无法进行的话,那还怎么做长尾关键词优化呢.况且用首页做长尾关键词优化确实有点大材小用的感觉,自然也因为长尾关键词竞争度不高,用内页来优化是最合适不过的.当然这些都需要建立在内页被收录的基础上.那么对于网站收录量多少其实就是内页是否被收录的问题了.今天笔者谈谈如何快速提高网站收录量的方法,也就是如果让内页被收录的方法吧. 一.提高空间的访问速度   很多站长都认为网站空间的速度与网