【网站加速】网站如何提高网页打开速度？

问题：网站如何提高网页打开速度？

 

一、减小页面请求： 
从WEB运行原理上讲，IIS请求是无状态的，在服务器端一直是链接和关闭的不断进行着，若是能减小服务器请求，总的时间将会减小。 
以前我下载163邮箱的登录页面的图片时发现，它们的只用到了一个图片来完成整个页面的全部图片，当时我就纳闷了，这跟平时作的网站不同呀。然来这样作减小浏览器的请求次数，用httpwatch你会发现请求的总时间大大减小了。一样的想法，在作css样式，JavaScript代码的时候也要作到尽量的放在一个文件下来减小WEB请求。

二、页面压缩技术，给咱们JS，HTML代码进行瘦身。 
jQuery 做为JS最轻量级的类库，它的原类库是242KB，压缩后的它竟只有91.6KB。 常见的压缩工具备Google Closure Compiler、YUI Compressor、JsPacker、gzip。我经常使用的是gzip，由于它的压缩率是最高的。用jdk压缩后它会把一些空格去掉，把咱们很长的变量名换成换成很短的字母来代替。

三、样式、行为、结构分离。 
当第一次访问页面的时候，用户就能够把CSS,JS代码下载下来，这样作虽然第一次使网页加载的速度变慢了，但后面的页面将快不少。当用户访问这个网站的其它的页面时，因为其它页面也引用了这个CSS样式和JS代码。浏览器发现它已经下载好了，下一次就能够不用下载了。这样就作到了一次下载，后续速度的效果。

四、使用存储过程 
在运行存储过程前，数据库已对其进行了语法和句法分析，并给出了优化执行方案。这种已经编译好的过程可极大地改善SQL语句的性能。因为执行SQL语句的大部分工做已经完成，因此存储过程能以极快的速度执行。这种预编译的sql语句就能够直接执行而节省了很大一部分查询的时间。

五、一些细节： 
把CSS样式放在头部，若是JS不少的话，把js代码放在尾部。这样作能够尽量的先加载页面的DOM结构，而后才能够级用户体验。若是JS不少的大的话，页面都没加载完，何来用户体验之说呢。

六、适当的使用AJAX 
如今的Ajax好像有点被神话了，好像网页只要Ajax了，那么就不存在效率问题了。其实这是一种误解。拙劣的使用Ajax不会让你的网页效率更高，反而会下降你的网页效率。Ajax的确是个好东西，可是请不要过度的神话它。使用Ajax的时候也要考虑上面的那些准则。

七、尽可能少使用样式工具为咱们生成的页面样式代码，本身动手把样式写在样式文件里。尽可能写得通用些。

八、页面缓存 
在大型的门户网站都用到了缓存技术，它是以空间换时间的技术。 
缓存主要是为了提升数据的读取速度。由于服务器和应用客户端之间存在着流量的瓶颈，因此读取大容量数据时，使用缓存来直接为客户端服务，能够减小客户端与服务器端的数据交互，从而大大提升二次页面的访问速度的程序的效率。

九、配置网站的实体标签: 
这个Etag不是给用户用的，而是给浏览器缓存用的。Etag是服务器告诉浏览器缓存，缓存中的内容是否已经发生变化的一种机制。经过Etag，浏览器就能够知道如今的缓存中的内容是否是最新的，需不须要从新从服务器上从新下载。

十、使用CDN技术。 
咱们上网下载东西的时候常常会看见什么“南方服务器”、“北方服务器”的就是用到了CDN技术来提升下载速度与稳定性。 
CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽量避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。经过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统可以实时地根据网络流量和各节点的链接、负载情况以及到用户的距离和响应时间等综合信息将用户的请求从新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的情况，提升用户访问网站的响应速度（来自百度百科）。

11.使用Gzip压缩文档： 
GZIP编码是用来改进网页性能的方法，不只能够减少存储空间，还能够减小传输所需的时间。将网站中的文件使用Gzip压缩后，能够显著的增长网页加载速度，同时也能够下降网站的带宽流量消耗。

12.样式表文件放在外部调用： 
把页面中须要用到的JavaScript和CSS样式表文件放在另外的文件夹中，这样一来在打开网站其它页面时就会缓存这些调用的文件，从而加快网站页面的加载速度。

13.给JavaScript文件减肥： 
这个方法不一样于gzip压缩功能，缩小JavaScript文档有不少方法，好比去除没必要要的空格等其余标签等。减小脚本文件后能够显著的提升网页的访问速度。

14.图片使用height和width属性 
每一个图片的height和width属性可让浏览器在加载图片以前就知道图片的长和宽，并预留出指定的长宽待图片加载后显示。若是没有这两个属性，浏览器还须要在读取图片成功后再处理一次页面布局样式，这无疑减慢了网页加载速度。因此在固定图片大小的状况下最好都使用上长和宽属性。

15.CSS文件压缩瘦身 
DIV+CSS是如今流利的网页布局方式，DIV定义了元素，CSS控制显示效果。因此每每咱们会把CSS写到另一个或多个外部连接CSS文件中，而且CSS文件代码也有不少行。咱们可使用一些CSS压缩工具来删除CSS文件中没必要要的多余内容，如重复定义样式、空格等来瘦身。能够尝试使用一下CleanCSS工具来压缩你的CSS文件。

16.整合CSS、JS文件减小HTTP请求次数 
如今的网页都有多个图片、CSS外部文件连接、Javascript外部脚本连接。因此当访问一个网页时浏览器须要屡次向服务器请求这些文件。在请求和加载之间会产生很多的时间差。特别是一些网页上有多个小图片、图标按钮的网页，有多少图片，浏览器就须要请求多少将这些小文件，多将请求这些小图片文件将明显影响网页的加载速度。因此咱们应该尽量将小图片拼合一个PNG大图片上，而后经过坐标来显示图标。一次请求一个大图片比屡次请求小图片速度要快很多。一样，最好将CSS和Javascript尽量地整合到一个文件中都有助于加快网页载入速度。

17.目录地址后加上斜杠（/） 
如访客点击访问这样一个目录地址：a.abc.cn/aa，去打开这个目录下的index.html文档。当服务器收到请求后它须要消耗一些时间来分析这是一个文件仍是一个目录。可是若是咱们在最后加上一个斜杠（/），服务器就知道你是在访问一个目录地址，而后就直接加载默认文档index.html或index.PHP就好了。这样服务器就不用花时间来分析这个地址，也起到了必定加速的做用。

 

做者：赖忠标

日期：2018.12.3