JavaScript关于提高网站性能的几点建议(一)
近在学习《高性能网站建设指南》这本书，本文算是一个学习笔记，将学到的东西进行整理一下，方便后面查看。
性能黄金法则（Performance Golden Rule)解释了只有10%~20%的最终用户响应时间花在接受所请求的用户HTML文档上，剩余的80%~90%时间花在为HTML文档所引用的所有组件（图片、脚本、样式表等）进行的HTTP请求上，最终用户响应时间花费在页面组件上
——Steve Sounders
1 文件合并（减少HTTP请求数量）
CSS Sprites
利用css sprites将网站用到的图片合并成一张图片，通过background-position、width、height控制背景图位置来使用某一个图标，这种方式可以将多个图片请求缩减为一次，生成css sprites的工具也很多，grunt和gulp中都有相关的插件，CssGaga也不错。
合并js和css
和精灵图一样，合并css和js文件也是减少HTTP请求很重要的方式，对css文件的合并目前来说没有什么争议，但是对于当前js模块化盛行，将所有js文件合并成一个文件，仿佛是一种倒退。正确的方式是遵守编译型语言的模式，保持js的模块化，在生成过程中只对初始请求用到的js文件生成目标文件。
2 使用内容发布网络（减少HTTP请求时间）
HTTP请求时间另一个影响因素是你与网站web服务器所处的距离，显然距离越远，请求所需的时间也越久，通过CDN可以大大改善这一点。
CDN是分布在多个不同地理位置的web服务器，用于更加有效的向用户发布内容。CDN最主要的功能是给终端用户存放静态文件，另外也提供下载、安全服务等功能。
3 设置浏览器缓存（避免重复HTTP请求）
使用Expire/Cache-control
浏览器通过使用缓存可以避免每次都进行重复的请求，HTTP 1.0和HTTP1.1分别有不同的缓存实现方式，Expires(1.0)和Cache-control(1.1)。Web服务器通过expires告诉客户端在指定的时间内，都使用该文件的缓存副本，不再向服务端重复发出请求，例如：
Expires: Thu, 01 Dec 2016 16:00:00 GMT （GMT格式）
这个设置意味着截止到2016年12月1日，都可以使用该缓存副本，无需再发出请求。
Expires这种通过截止日期的方式，存在一个限制：要求客户端和服务端时钟严格同步，而HTTP 1.1引入的Cache-Control通过指定一个以秒为单位的时间指定缓存日期，则不存该限制，例如：
Cache-Control: max-age=31536000
这个设置意味缓存时间为一年，推荐使用Cache-Control，但是在支持HTTP 1.1的情况下，另外要注意的一点：Cache-Control和Expire同时存在时，Cache-Control具有更高的优先级。
配置或移除ETag
使用Expire/Cache-Control可以避免第二次访问时，使用本地缓存避免重复HTTP请求，提高网站速度。然而，在用户点击了浏览器刷新或者在expire已过期的情况下，仍然会向服务端发出HTTP GET请求，而此时如果该文件并没有发生变化，服务端不会返回整个文件而是会返回304 Not Modified状态码。
服务端判断该文件是否发生变化的依据有两个：Last-Modified（最新修改日期）和ETag（实体标签）;
ETag（Entity Tags）是在HTTP 1.1引入的，与Last-Modified同时存在时要有更高的优先级。服务端通过对比客户端发来的ETag（If-None-Match）和当前ETag，若相同返回304 Not Modifed，否则返回整个文件以及200 OK。
ETag存在一个问题：当浏览器向一个服务器发送GET请求原始组件，之后又向另一台服务器请求该组件时，ETag是不匹配的，当然，如果你的网站寄宿在一台服务器上不存在这个问题，而现在很多网站使用多台服务器，ETag的存在就大大降低验证有效性的成功率。
存在这个问题是时的解决办法是对ETag进行配置，移除服务器innode值只保留修改时间戳和大小作为ETag值，或者直接移除ETag，使用Last-Modified来验证文件有效性。
4 压缩组件（减小HTTP请求大小）
通过对HTTP传输的文件进行压缩减小HTTP请求的大小，提高请求速度，GZIP是目前最常用也是最有效的压缩方式。
然而，并非所有的资源文件都需要压缩，压缩的成本包括服务端需要花费CPU周期进行压缩，而客户端也需要对压缩文件进行解压缩，必须结合自己网站进行权衡。现在绝大多数网站都对其HTML文档进行压缩，部分网站选择对js、css进行压缩，几乎没有网站对图片、PDF等文件进行GZIP压缩，原因在于这些文件是已经被压缩过的，采用HTTP压缩已经被过压缩的东西并不能使它更小。事实上，添加标头，压缩字典，并校验响应体实际上使它变得更大，而且还浪费了CPU。
如何对网站开启GZIP，需要在所使用的web服务器（IIS、Nginx、Apache等）中进行设置。
5 CSS文件放在首部
将CSS文件放在首部和放在尾部，并不影响HTTP请求，因此从请求时间上来讲是一致的，然而从用户体验的角度，将CSS文件放在首部，会获得更好的用户体验。
原因在于浏览器是从上到下依次解析html文档，将CSS文件置于头部，页面会首先对CSS文件发出请求，随后加载DOM树并对其进行渲染，页面会逐步呈现在用户面前。
而与之相反，如果将CSS文件放置在尾部，页面加载完整DOM之后请求CSS文件，然后对整个DOM树渲染并呈现给用户，从用户的角度，在css文件没有请求完成之前，整个页面是出于白屏状态的，白屏是浏览器的一种行为，David Hyatt对其的解释是这样的
在样式树没有完全加载之前，渲染dom树就是一种浪费，因为在样式树加载完成之后会再次渲染，出现FOUC(无样式内容闪烁)问题。
另外要注意的一点，使用link而不是@import引入css样式表，使用@import引入的样式即使写在首部，也会在文档最后加载。
6 JS文件放在尾部
HTTP请求是并行的，不同浏览器并行下载的数目也不一样（2、4、或者8个），并行下载提高了HTTP请求的速度。而将JS文件放在首部，不仅会阻塞后面文件的下载而且会阻塞页面的渲染。
为什么会这样呢？原因有两个：
JS文件中可能存在document.write修改页面的内容，因此页面会在脚本执行完成之后才可使渲染。
不同JS文件不管大小如何，可能存在依赖关系，因此必须按照顺序进行执行，因此在加载脚本的时候并行下载是禁止的。
所以，最好的方式是讲js文件放置在尾部，等页面所有可视化组件加载完成之后再进行请求，提高用户体验。
以上所述是小编给大家介绍的JavaScript关于提高网站性能的几点建议(一)，希望对大家有所帮助，如果大家想了解更多内容，敬请关注我们。在下篇文章小编给大家介绍javascript提高网站性能优化的建议(二)
相关推荐
-
javascript性能优化之DOM交互操作实例分析
本文实例讲述了javascript性能优化之DOM交互操作技巧.分享给大家供大家参考,具体如下: 在javascript各个方面,DOM毫无疑问是最慢的一部分.DOM操作与交互要耗费大量时间,因为它们往往需要重新渲染整个页面或者某一部分.理解如何优化与DOM的交互可以极大提高脚本完成的速度. 1.最小化DOM更新 看下面例子: var list = document.getElementById("ul"); for (var i=0; i < 10; i++){ var ite
-
编写高性能Javascript代码的N条建议
多年来,Javascript一直在web应用开发中占据重要的地位,但是很多开发者往往忽视一些性能方面的知识,特别是随着计算机硬件的不断升级,开发者越发觉得Javascript性能优化的好不好对网页的执行效率影响不明显.但在某些情况下,不优化的Javascript代码必然会影响用户的体验.因此,即使在当前硬件性能已经大大提升的时代,在编写Javascript代码时,若能遵循Javascript规范和注意一些性能方面的知识,对于提升代码的可维护性和优化性能将大有好处. 下面给出编写高性能的Javas
-
js性能优化技巧
性能优化:简而言之,就是在不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短 http:超文本协议 它的最上层是应用层 传输层 网络层 物理层 请求信息:请求行 请求头 空行 消息体 响应信息:状态行和状态码 使用值类型的ToString方法: 在连接字符串时,经常使用"+"号直接将数字添加到字符串中.这种方法虽然简单,也可以得到正确结果,但是由于涉及到不同的数据类型,数字需要通过装箱操作转化为引用类型才可以添加到字符串中.但是装箱操作对性能影响较大,因为在进行这
-
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
我们再来聊聊Function.apply() 在提升程序性能方面的技巧. 我们先从 Math.max() 函数说起, Math.max后面可以接任意个参数,最后返回所有参数中的最大值. 比如 alert(Math.max(5,8)) //8 alert(Math.max(5,7,9,3,1,6)) //9 但是在很多情况下,我们需要找出数组中最大的元素. var arr=[5,7,9,1] alert(Math.max(arr)) // 这样却是不行的.一定要这样写 function getMa
-
JavaScript性能优化之小知识总结
随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术.而现在Ajax则是最为流行的一种方式.JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,为了能改进他的性能,我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验,希望能帮助大家改进自己的JavaScript脚本性能. 前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javas
-
JavaScript提高网站性能优化的建议(二)
在javascript关于提高网站性能的几点建议(一)中,从HTTP请求到页面渲染几个方面对提高网站性能提出了几点建议,本文是学习Steve Sounders的另外一本书<高性能网站建设进阶指南>之后,从JavaScript性能的角度进行总结概括,诸君共勉. JavaScript性能是实现高性能Web应用程序的关键 --Steve Sounders 1 利用js作用域链 作用域链(scope chain) 当执行一段JavaScript代码(全局代码或函数)时,JavaScript引擎会创建为
-
javascript性能优化之事件委托实例详解
本文实例分析了javascript性能优化之事件委托.分享给大家供大家参考,具体如下: 为下面每个LI绑定一个click事件 <ul id="myLinks"> <li id="goSomewhere" >Go somewhere</li> <li id="doSomething" >Do something</li> <li id="sayHi" >Sa
-
JavaScript关于提高网站性能的几点建议(一)
近在学习<高性能网站建设指南>这本书,本文算是一个学习笔记,将学到的东西进行整理一下,方便后面查看. 性能黄金法则(Performance Golden Rule)解释了只有10%~20%的最终用户响应时间花在接受所请求的用户HTML文档上,剩余的80%~90%时间花在为HTML文档所引用的所有组件(图片.脚本.样式表等)进行的HTTP请求上,最终用户响应时间花费在页面组件上 --Steve Sounders 1 文件合并(减少HTTP请求数量) CSS Sprites 利用css s
-
图片该如何优化来提高网站性能
概述 图像是web上提供的最基本的内容类型之一.他们说一张图片胜过千言万语.但是如果你不小心的话,图片大小有时高达几十兆. 因此,虽然网络图像需要清晰明快,但它们尺寸可以缩小压缩的,使用加载时间保持在可接受的水平. 在我的网站上,我注意到我的主页的页面大小 超过了1.1MB,图片占了约88%,我还注意到我提供的图像比它们需要的大(在分辨率方面),显然,还有很多改进的空间. 我开始阅读 Addy Osmani 的优秀Essential Image Optimization电子书,并开始在我的网站上
-
提高网站性能之 如何对待JavaScript
尤其是JavaScript 文件,在下载它时,并行下载实际上是被禁用的,并且还会阻塞页面的呈现! 关于JavaScript 的下载 在下载JavaScript 脚本文件时,浏览器不会并行启动其它下载,而是让JavaScript 脚本文件单独下载完毕后,再继续其它请求.这将对页面的整体性能是一个很大的问题,解决方案如下: 解决方案1:将JavaScript 脚本内联在页面中,即直接将JavaScript 脚本写在HTML标签中. 优点:速度最快.在大型网站的首页中,可以合理的将JavaScript
-
单台web服务器如何尽可能的提高网站性能
我觉得首先要选择一个合适的环境,对于大多数php站点来说,运行在lnmp(linux+nginx+mysql+php)环境下是个理想的选择. 首先一点linux对比win的优势我就不说了. 其次nginx的优势总结起来就是负载均衡,高并发性能优异. 这里php采用fastcgi的方式接入nginx,php5.3 自带的php-fpm已经很好了,相比于apache的php模块方式,这里由php自己直接处理php请求是比较好的,并且可调控进程数量以优化并发性能. 上面说的是基本环境,我有一台q660
-
提高Web性能的前端优化技巧总结
这篇文章讲述可以帮助 改善优化前端的技术,非常有用.主要内容有清理代码.压缩图片.压缩外部资源.使用CDN,以及一些其它方法.这些方法会为你的网站带显著的速度提升和整体性能提升. 一. 清理 HTML 文档 HTML,即超文本标记语言,几乎是所有网站的支柱.HTML 为网页带来标题.子标题.列表和其它一些文档结构的格式.在最近更新的 HTML5 中,甚至可以创建图表. HTML 很容易被网络爬虫识别,因此搜索引擎可以根据网站的内容在一定程度上实时更新.在写 HTML 的时候,你应该尝试让它 简洁
-
提高代码性能技巧谈—以创建千行表格为例
微软的开发周期中很重要的一块是调整产品的性能.性能调整也是开发者应当留心的关键部分之一. 经过多年发展,业界对于如何优化Win32程序性能已经有非常多的了解. 现在开发者遇到的问题之一是不太清楚是什么导致DTHML和HTML页面运行快或者慢.当然,有一些很简单的方法--比如不要使用2MB大的图片.我们曾经使用过另外一些有趣的技巧提高了DHTML页面的性能,希望它们能帮助你改善自己的页面性能. 这里我使用了一个建立Table的程序例子.其中用document.createElement()和ele
-
JavaScript执行效率与性能提升方案
如何提升JavaScript执行效率与性能在前端开发中位于一个很重要的地方,这节来研究下如何在平时做项目过程中,提升JavaScript性能与运行效率. 循环 循环是很常用的一个控制结构,大部分东西要依靠它来完成,在JavaScript中,我们可以使用for(;;),while(),for(in)三种循环,事实上,这三种循环中for(in)的效率极差,因为他需要查询散列键,只要可以就应该尽量少用.for(;;)和while循环的性能应该说基本(平时使用时)等价. 而事实上,如何使用这两个循环,则
-
Asp.net 网站性能优化二则分享
随着后端优化空间越来越小,现在越来越多的网站更注重前端性能的优化,就是浏览器,http层面的优化,这里写两点最简单最有效的 asp.net网站优化技巧. 了解常见的网站性能优化技巧 首先我们要学一些优化网站性能和体验的理论和基础知识,雅虎已经帮我们总结好了,详见参考链接中的几篇文章,有好心人已经给翻译成中文了.这里面提到的一些技巧可操作性都很强,建议每一个网站开发人员都仔细学习并进行实践,可以说不了解这里面说的优化技巧,提升网站前端性能就无从谈起. 诊断网站性能 要想优化网站的前端性能,首先要查
-
提高jQuery性能优化的技巧
下面把提高jQuery性能优化技巧给大家分享如下: 缓存变量 DOM遍历是昂贵的,所以尽量将会重用的元素缓存. 复制代码 代码如下: // 糟糕 h = $('#element').height(); $('#element').css('height',h-20); // 建议 $element = $('#element'); h = $element.height(); $element.css('height',h-20); 避免全局变量 jQuery与javascript一样,一般来说