JavaScript提高网站性能优化的建议_javascript技巧_脚本之家

尤其是JavaScript
文件,在下载它时,并行下载实际上是被禁用的,并且还会阻塞页面的呈现!
关于JavaScript 的下载 在下载JavaScript
脚本文件时,浏览器不会并行启动其它下载,而是让JavaScript
脚本文件单独下载完毕后,再继续其它请求。这将对页面的整体性能是一个很大的问题,解决方案如下:
解决方案1:将JavaScript 脚本内联在页面中,即直接将JavaScript
脚本写在HTML标签中。
优点:速度最快。在大型网站的首页中,可以合理的将JavaScript
脚本的一部分直接内联在HTML标签中。 缺点:JavaScript
脚本不被单独缓存,其它页面不能共享该JavaScript 脚本。
解决方案2:将JavaScript 脚本标签的链接放在HTML文件标签的底部。
要求:脚本中不包含document.write() 方法改写页面。
解决方案3:使用延迟 脚本。即在link标签中添加defer
属性表明JS脚本中不包含document.write() 方法。 缺陷:在Firefox 中使用延迟
脚本后,JavaScript 脚本还是会阻塞呈现、阻塞并行下载。
而在IE中,效果也不明显。 总结:如果一个脚本可以使用延迟
脚本技术,那么它一定可以移到页面的底部!
即“解决方案3”完全可以用“解决方案2”替代。
解决方案4:使用加载后下载。即JavaScript
脚本在页面加载完毕后,通过onload 事件动态下载。
优点:既不阻塞HTML页面的呈现,又能实现JavaScript 脚本的重用。
缺点:产生额外的JavaScript 代码用于实现该功能,增加了程序复杂度。
问题:可能加载两次。 可以使用IFrame嵌套一个页面并加载JavaScript
脚本来解决。 示例:
奥门威尼斯网址,解决方案5:动态内联。根据cookie做指示器,用代码进行判断,实现将外部JS内联到页面当中。
动态内联是对“加载后下载”的进一步完善。也再次增加了程序复杂度。
虽然JavaScript 脚本推荐放在页面底部,但CSS样式表则应该放在页面的顶部!
关于JavaScript 的精简
精简是从代码中移除不必要的字符、注释、空白以减小JavaScript
代码的大小,进而改善JavaScript的下载长度和加载速度。 精简工具:JSMin JS
Minifier js压缩 JSMin 用于去除javascript
文件中所有不必要的字符、注释、空白。 cmd 使用方法:C:\Documents and
Settings\xugang>jsmin js_rerurn.js 1. 先指定到 jsmin.exe 文件夹 2.
openWin.js为源文件 3. js_rerurn.js为目标文件 精简工具:ShrinkSafe
ShrinkSafe 用于移除javascript
文件中的空白,同时还通过替换的方式缩短了变量名。 cmd 使用方法:java -jar
shrinksafe.jar infile.js > outfile.js shrinksafe.jar是工具名
infile.js为源文件 outfile.js为目标文件
注意:在控制台运行时,要保证shrinksafe.jar和js.jar是在同一个目录,并且输入的JS源文件和输出的JS目标文件也会在同一个目录。
一般可以对你的JavaScrip文件同时使用JSMin 和 ShrinkSafe
这两个工具进行精简。 压缩组件
同时,不要忘记通过HTTP的头部声明,压缩脚本、样式表和HTML文档来减少响应时间。
浏览器客户端的请求: Accept-Encoding: gzip, deflate
Web服务器端的响应:Content-Encoding: gzip
gzip是目前流行和理想有效压缩方法,deflate效果略逊且不太流行。

近在学习《高性能网站建设指南》这本书,本文算是一个学习笔记,将学到的东西进行整理一下,方便后面查看。

在javascript关于提高网站性能的几点建议中,从HTTP请求到页面渲染几个方面对提高网站性能提出了几点建议,本文是学习Steve
Sounders的另外一本书《高性能网站建设进阶指南》之后,从JavaScript性能的角度进行总结概括,诸君共勉。

信任度的建设体现在以下方面: *
关于我们页面:详细、真实的说明公司背景、历史、业务范围等等情况。 *
网站备案:获得ICP的备案许可。 *
服务流程:让客户充分了解整个过程,让服务更透明。 *
报价列表:根据不同服务,分别给出相应报价范围。 *
客户案例:客户更愿意接收第三方的评价。 *
联系方式:详细、完整、多途径的联系方式,并提供所在地地图指示。 *
网页数量:充实的网页数量,企业站点至少50页以上。 *
原创内容:客户不喜欢到处流传的论调。 *
版权信息:正确书写版权信息。声明本站内容受法律保护,拒绝转载等。 *
隐私保护:声明对客户信息、网友信息给予隐私保护。 *
无错别字:客户看见错别字,会想“网页都不校对,服务质量也悬。” *
合作伙伴:合作伙伴的链接及合作方站内报道。 *
专业名词:适当的使用专业名词,但不要影响用户阅读,并给予简单易懂的解释。
* 企业新闻:列举第三方给予的各类报道。 *
链接检查:使整个网站没有无效链接。 * 广告适当:不要放无关的广告。 *
友情链接:只和客户、政府以及行业知名网站作链接。 *
免费咨询:提供400或800免费电话咨询,至少要有在线咨询或留言本。 *
访问速度:别让用户和搜索引擎感觉网站很慢。 *
网页配色:建议使用公司LOGO中的颜色。 *
营业证明:提供公司营业执照、行业执照、相关检查证书、法人照片等。 *
公司博客:多人维护一个博客,类似Google黑板报。用户更信任博客上的内容。
*
常见问题:以客户关心的问题为导向,制作1个页面,页面不要太多,别作成说明书。
* 员工照片:公司活动集体照,体现公司活力。 *
保持更新:时不时的来篇专业文章、媒体报道、公司趣事等等。 *
风格一致:如果是集体公司,总公司、国外公司、地方公司网站排版要一致,域名格式统一。不同语言的网站区别不能太大。
*
原创图片:别用网上到处都有的图像,特别是客服打电话的图片。有能力最好购买专业图库。
* 域名续费:最好一次注册10年,不要每年续费。 *
导航结构:别让用户因为不知道怎么继续,而按“返回键”。

程序员在编写程序时,总是想要使自己的程序占用资源最小,运行速度更快,代码量更少。往往我们在追求这些的同时却失去了很多东西。优化的目的是花最少的代价换来最快的运行速度与最容易维护的代码。以下就几点PHP的优化做下总结:1、in_array的用法
避免在大的数组上使用in_array(),同时避免在循环中对包含20个以上元素的数组使用这个函数。in_array()会非常消耗资源.对于小的数组这种影响可能很小,但是在一个循环中检查大数组可能会需要好几秒钟的时间。如果您确实需要这个功能,请使用isset()来查找数组元素。实际上是使用键名来查询键值。调用isset会比in_array($var,array_keys要快得多。2、数组键名
在PHP中,使用不经单引号包含的字符串作为数组键名是合法的,但是我们不希望如此–键名应该总是由单引号包含而避免引起混淆。注意这是使用一个字符串,而不是使用变量做键名的情况。

性能黄金法则(Performance Golden
Rule)解释了只有10%~20%的最终用户响应时间花在接受所请求的用户HTML文档上,剩余的80%~90%时间花在为HTML文档所引用的所有组件进行的HTTP请求上,最终用户响应时间花费在页面组件上

JavaScript性能是实现高性能Web应用程序的关键

// 不好的写法$foo = $assoc_array[blah];// 好的写法$foo = $assoc_array['blah'];// 不好的写法$foo = $assoc_array["$var"];// 好的写法$foo = $assoc_array[$var];

  ——Steve Sounders

——Steve Sounders

3、字符串表达
在PHP中用两种不同的方式来表示一个字符串-单引号或者双引号。主要的区别在于语法解释器会对双引号表示的字符串进行变量替换,而不会处理单引号表示的字符串。因此您应该总是使用单引号,除非您真的需要在字符串中处理变量。这样,我们可以减少程序运行消耗,因为语法解释器不需要每次多处理一大堆根本没有变量的字符串。
同样,如果您在函数调用中使用了一个字符串变量作为参数,您不需要将这个变量包含在引号里。这会导致语法解释器多做好多无用功。记住,几乎所有双引号中的转义符对于单引号都是无效的。您需要留意以上的规则,但是有时候为了代码的可读性,可以适当的破例。

1 文件合并

1 利用js作用域链

// 不好的写法$str = "This is a really long string with no variables for the parser to find.";do_stuff;// 好的写法$str = 'This is a really long string with no variables for the parser to find.';do_stuff;// 有时候单引号不是那么合适$post_url = $phpbb_root_path . 'posting.' . $phpEx . '?mode=' . $mode . '&start=' . $start;// 双引号有时候能让代码行更集中$post_url = "{$phpbb_root_path}posting.$phpEx?mode=$mode&start=$start";

CSS Sprites

作用域链

4、循环定义中的操作
在比较部分如果存在运算请一定要进行优化。因为这部分会在循环中的每一步进行操作:

  利用css
sprites将网站用到的图片合并成一张图片,通过background-position、width、height控制背景图位置来使用某一个图标,这种方式可以将多个图片请求缩减为一次,生成css
sprites的工具也很多,grunt和gulp中都有相关的插件,CssGaga也不错。

当执行一段JavaScript代码时,JavaScript引擎会创建为其创建一个作用域又称为执行上下文,在页面加载后会首先创建一个全局的作用域,然后每执行一个函数,会建立一个对应的作用域,从而形成了一条作用域链。每个作用域都有一条对应的作用域链,链头是全局作用域,链尾是当前函数作用域。

// 在每次循环中sizeof函数都要被调用 for ($i = 0; $i < sizeof { do_something(); }// 您可以在循环起始部分对这个不变的量赋值 for ($i = 0, $size = sizeof; $i < $size; $i++) { do_something(); } 

合并js和css

作用域链的作用是用于解析标识符,当函数被创建时,会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中,当JavaScript需要查找变量X的时候,它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性,如果没有找到就顺着作用域链继续查找,直到查找到链头,也就是全局作用域链,仍未找到该变量的话,就认为这段代码的作用域链上不存在x变量,并抛出一个引用错误的异常。

5、分支判断,switchcase好于ifelse
使用分支语句要比用很多ifelse好很多。6、不要滥用@操作符
不要滥用@操作符,看上去很简单,但实际上用@比不用@效率要差几倍。
特别不要在循环中使用@。7、获取时间的方法
很多时候我们习惯使用time终归是一个函数,不如直接用$_SERVER[‘REQUEST_TIME’]好一点。8、字符串长度判断两种写法:
< 5){/* do something */}{ /* do something */ }

  和精灵图一样,合并css和js文件也是减少HTTP请求很重要的方式,对css文件的合并目前来说没有什么争议,但是对于当前js模块化盛行,将所有js文件合并成一个文件,仿佛是一种倒退。正确的方式是遵守编译型语言的模式,保持js的模块化,在生成过程中只对初始请求用到的js文件生成目标文件。

管理好作用域链的深度,是一种只要少量工作就能提高性能的简易方法,我们应避免因无意中增长了作用域链而导致执行速度变得缓慢。

以上是小编在网上整理的php优化技巧,希望对大家的学习有所帮助!

2 使用内容发布网络

使用局部变量

  HTTP请求时间另一个影响因素是你与网站web服务器所处的距离,显然距离越远,请求所需的时间也越久,通过CDN可以大大改善这一点。

如果理解了作用域链的概念,那么我们应该清楚JavaScript引擎对变量的解析时间跟作用域链的深度有关,显而易见,局部变量由于处于链尾,存取速度是最快的,因此,一个好的经验是:任何非局部变量使用超过一次时,请使用局部变量将其存储下来,例如:

  CDN是分布在多个不同地理位置的web服务器,用于更加有效的向用户发布内容。CDN最主要的功能是给终端用户存放静态文件,另外也提供下载、安全服务等功能。

function changeDiv(){document.getELementById.className = 'changed';document.getELementById.style.height = 150;}

3 设置浏览器缓存

这里myDiv这个dom元素被引用了两次,为了更快的引用,我们应该用一个局部变量将其存储下来,这样做的好处不仅缩短了作用域链,而且避免了DOM元素的重复查询:

使用Expire/Cache-control

function changeDiv(){var myDivStyle = document.getElementById.style;myDiv.className = 300;myDiv.style.height = 150;}

  浏览器通过使用缓存可以避免每次都进行重复的请求,HTTP
1.0和HTTP1.1分别有不同的缓存实现方式,Expires和Cache-control。Web服务器通过expires告诉客户端在指定的时间内,都使用该文件的缓存副本,不再向服务端重复发出请求,例如:

避免使用with

Expires: Thu, 01 Dec 2016 16:00:00 GMT

一般在代码执行过程中,函数的作用域链是固定的,然而with可以临时增长函数的作用域链。with用于将对象属性作为局部变量来显示,使其便于访问,例如:

  这个设置意味着截止到2016年12月1日,都可以使用该缓存副本,无需再发出请求。

var user = {name:'vicfeel',age:'23'};function showUser(){var local = 0;with{console.log;console.log;console.log;

  Expires这种通过截止日期的方式,存在一个限制:要求客户端和服务端时钟严格同步,而HTTP
1.1引入的Cache-Control通过指定一个以秒为单位的时间指定缓存日期,则不存该限制,例如:

这个例子中,通过with在showUser作用域链的链尾中又增加了一个临时作用域,该作用域存储着user对象的所有属性,也就是增长了with这段代码的作用域链,在这段代码中,局部变量像local从链尾的第一个对象变成了第二个,自然减慢了标识符的存取。直到with语句结束,作用域链恢复增长。正因为with的这个缺陷,我们应尽量避免使用with关键字。

Cache-Control: max-age=31536000

2 更合理的流控制

  这个设置意味缓存时间为一年,推荐使用Cache-Control,但是在支持HTTP
1.1的情况下,另外要注意的一点:Cache-Control和Expire同时存在时,Cache-Control具有更高的优先级。

JavaScript与其它编程语言一样,拥有一些流控制语句,在每个环节上使用恰当的语句能极大的提高脚本的运行速度。

配置或移除ETag

快速条件判断

  使用Expire/Cache-Control可以避免第二次访问时,使用本地缓存避免重复HTTP请求,提高网站速度。然而,在用户点击了浏览器刷新或者在expire已过期的情况下,仍然会向服务端发出HTTP
GET请求,而此时如果该文件并没有发生变化,服务端不会返回整个文件而是会返回304
Not Modified状态码。

提到条件判断,首先要避免的一种使用方式:

  服务端判断该文件是否发生变化的依据有两个:Last-Modified;

if{return result0;}else if{return result1;}else if{return result2;}else if{return result3;}else if{return result4;}else if{return result5;}else if{return result6;}else{return result7;}

  ETag是在HTTP
1.1引入的,与Last-Modified同时存在时要有更高的优先级。服务端通过对比客户端发来的ETag和当前ETag,若相同返回304
Not Modifed,否则返回整个文件以及200 OK。

这种使用if进行条件判断的方式存在的主要问题是层次太深,当我要value =
7时,消耗时间要比value = 0长很多,大大损耗了性能,同时可读性很差。

  ETag存在一个问题:当浏览器向一个服务器发送GET请求原始组件,之后又向另一台服务器请求该组件时,ETag是不匹配的,当然,如果你的网站寄宿在一台服务器上不存在这个问题,而现在很多网站使用多台服务器,ETag的存在就大大降低验证有效性的成功率。

一种更好的方式,利用switch进行判断。

  存在这个问题是时的解决办法是对ETag进行配置,移除服务器innode值只保留修改时间戳和大小作为ETag值,或者直接移除ETag,使用Last-Modified来验证文件有效性。

swithc{case 0:return result0;case 1:return result1;case 2:return result2;case 3:return result3;case 4:return result4;case 5:return result5;case 6:return result6;default:return result7;}

4 压缩组件

这样不仅提高了可读性,查询时间也要比if更快。但是如果只有一两个条件时,if是比switch更快的

  通过对HTTP传输的文件进行压缩减小HTTP请求的大小,提高请求速度,GZIP是目前最常用也是最有效的压缩方式。

在JavaScript中,条件查询还有另外一种方式,之前的例子是根据值返回不同的值,刚好可以利用数组实现hash表的映射查询。

  然而,并非所有的资源文件都需要压缩,压缩的成本包括服务端需要花费CPU周期进行压缩,而客户端也需要对压缩文件进行解压缩,必须结合自己网站进行权衡。现在绝大多数网站都对其HTML文档进行压缩,部分网站选择对js、css进行压缩,几乎没有网站对图片、PDF等文件进行GZIP压缩,原因在于这些文件是已经被压缩过的,采用HTTP压缩已经被过压缩的东西并不能使它更小。事实上,添加标头,压缩字典,并校验响应体实际上使它变得更大,而且还浪费了CPU。

//定义数组var results = [result0,result1,result2,result3,result4,result5,result6,result7];//查询结果return results[value];

  如何对网站开启GZIP,需要在所使用的web服务器中进行设置。

这种数组的方式,在查询范围很大时才更加有效,因为它不必检测上下边界,只需要填入索引值就可以查询了。它的局限性在于条件对应的是单一值,而不是一系列操作。因此要综合实际情况,选择合适的条件判断方式,发挥性能最大化。

5 CSS文件放在首部

快速循环

  将CSS文件放在首部和放在尾部,并不影响HTTP请求,因此从请求时间上来讲是一致的,然而从用户体验的角度,将CSS文件放在首部,会获得更好的用户体验。

JavaScript中存在4种循环方式for循环、do-while循环、while循环和for-in循环。下面是一个很常用的循环使用方式:

  原因在于浏览器是从上到下依次解析html文档,将CSS文件置于头部,页面会首先对CSS文件发出请求,随后加载DOM树并对其进行渲染,页面会逐步呈现在用户面前。

var values = [1,2,3,4,5];for(var i = 0;i < values.length;i++){process;}

  而与之相反,如果将CSS文件放置在尾部,页面加载完整DOM之后请求CSS文件,然后对整个DOM树渲染并呈现给用户,从用户的角度,在css文件没有请求完成之前,整个页面是出于白屏状态的,白屏是浏览器的一种行为,David
Hyatt对其的解释是这样的

我们可以看到,这段代码最明显可以优化的地方在于values.length,每次循环i都要和values的长度进行比较,而查询属性要比局部变量更耗时,如果循环次数越大,这种耗时就越明显,因此可以这样优化:

在样式树没有完全加载之前,渲染dom树就是一种浪费,因为在样式树加载完成之后会再次渲染,出现FOUC问题。

var values = [1,2,3,4,5];var length = values.length;//局部变量存储数组长度for(var i = 0;i < length;i++){process;}

  另外要注意的一点,使用link而不是@import引入css样式表,使用@import引入的样式即使写在首部,也会在文档最后加载。

这段代码还可以继续优化,将循环变量递减到0,而不是递加到总长度。

6 JS文件放在尾部

var values = [1,2,3,4,5];var length = values.length;for{ //递减到0process;}

  HTTP请求是并行的,不同浏览器并行下载的数目也不一样,并行下载提高了HTTP请求的速度。而将JS文件放在首部,不仅会阻塞后面文件的下载而且会阻塞页面的渲染。

这里将循环结束改造为与0比较,所以每个循环的速度更快了,根据循环的复杂度不同,这种简单改变可以比原来节约大概50%的时间。

  为什么会这样呢?原因有两个:

JS文件中可能存在document.write修改页面的内容,因此页面会在脚本执行完成之后才可使渲染。

不同JS文件不管大小如何,可能存在依赖关系,因此必须按照顺序进行执行,因此在加载脚本的时候并行下载是禁止的。

所以,最好的方式是讲js文件放置在尾部,等页面所有可视化组件加载完成之后再进行请求,提高用户体验。

以上所述是小编给大家介绍的JavaScript关于提高网站性能的几点建议,希望对大家有所帮助,如果大家想了解更多内容,敬请关注脚本之家。在下篇文章小编给大家介绍javascript提高网站性能优化的建议

发表评论

电子邮件地址不会被公开。 必填项已用*标注