前端优化，提高网页加载速度的思路与技巧汇总

网页的加载速度直接影响到用户的体验，尤其是对于新用户，这种影响非常明显。但是网页的加载速度受到网络，服务器和浏览器等多方面的影响，所以网页优化不仅仅涉及后端开发，前端同样“大有可为”，所以本文在前端的角度来探讨网页优化思路和技巧。

网页加载慢的后果

1 严重影响直接用户体验

这个每个人都有很直观的体会，如果一个网页半天打不开，绝大部分人都会选择直接关闭。也许数字更具说服力：有统计表明，如果页面超过3秒没有加载出来，那么至少会白白丢失40%以上的用户，所以给出的建议让用户能够等待的时间不要超过2秒。

2 影响在SEO上的表现

搜索引擎爬虫总是尽量模仿人的行为从而提高其自身的服务水平，如果一个网页加载很慢，就会影响到网页在SEO上的排名，这回简洁影响你网页的曝光量。

网页加载的过程

一个完整的页面加载过程，包括客户端（浏览器）发送请求、网络传输、服务器接收请求处理并返回数据、数据经过网络传输、客户端接收数据并渲染呈现。所以网页的加载速度受到网络，服务器性能，客户端性能等多方面的影响，所以网页加载速度的提升，不仅仅是后端服务器的事情，前端仍然大有可为。

前端能做什么

在提高网页加载方面，前端主要要从以下几个方面入手：减少代码大小、优化代码结构、优化网络请求、页面异步延迟加载。

减少代码大小

包括html、css、js代码文件的大小，又包括两个方面：

第一是精简代码，提升性能。在确保功能和性能等软性要求的前提下，采用更简洁的代码实现方式，也就是说能用一行代码搞定的就不用两行，包括不必要的html标签嵌套，css代码、js代码，这对前端编程的要求较高，另外js局部变量的查找速度比全局变量快的多，所以js中尽量使用局部变量而非全局变量。第二个是优化代码。在编码过程中，为提高易读性，必然带有许多空格，注释，或者其他冗余的代码，使用代码压缩工具，快速删掉逗号、注释甚至不需要的空格，可以显著压缩 JavaScript 代码大小，这类的工具有Google Closure Compiler 等。不仅仅是js代码可以用工具压缩，css和html代码同样可以压缩，工具也有很多。除了本身代码的优化，在使用第三方库的时候，要记得删除一些不必要的组件。第三是优化图片资源图片本身比文字（代码）占有更大体积，但是一图胜千文，图片的使用可以极大的美化页面，所以图片还是要用的，但是在保证美观的前提下，我们可以对图片进行优化，寻求美观与速度之间的平衡。

第一就是图片压缩，减小图片本身的大小。压缩分为有损压缩和无损压缩，各有利弊，这里不再细说了。具体方法可以下载专门的工具，也可以在线压缩。

第二是如果可以用CSS样式来替代图片，那就尽量用CSS替代图片。现在随着CSS3的成熟，一些特殊的形状和效果都可以实现了，但这各很考验CSS的功底哈。

第三是使用图片的时候的小细节，能用background使用图片就尽量不用img标签来加载图片，另外如无必要，能使用png8就不使用gif格式。

第四就是图片预加载和延迟加载技术，比如使用缩略图，默认占位符替代图片，但不影响后续页面内容的呈现。

第五是有些情况下，可以将图片转base64，将图片变成字符串，这样可以减少http请求，但是这个仅适用一些体积较小的图片，比如图标，不然转换后的字符串会比较大，得不偿失。

优化代码结构

页面是按照从上到下的顺序加载页面内容的，首先 部分中的所有内容都会在在你看到页面内容（body标签里的内容）之前加载完成。js的加载会中断所有其他元素的加载，正常情况下，只有在js加载完成之后，才会继续加载后续css和DOM元素，所以在 部分中使用 JavaScript 会导致延迟页面内容的呈现。

对此有两个方法。1 将样式表放在头部，如非必要，则将脚本放在底部。2 如果必须放在head标签里，可以采用async 标记，这样在加载js的过程中，不会中断后续CSS和DOM的加载，以及其他JS的运行。

优化网络方面请求

1 减少网络请求次数

每次加载页面的时候，除了嵌入页面本身的css,js代码，其他独立的每个css、js文件、图片文件都会产生一个网络请求。可以通过对多个CSS文件，js文件的合并来减少文件的个数。对于图片则可以使用雪碧图的形式，将

2 减少域名DNS查找

DNS查找是网络请求的第一步，浏览器只有根据域名找到对应的IP地址才能找到目标服务器，这个查找IP的过程如果耗时比较久，就会影响到网页的请求速度，所以需要适当降低DNS的时间设置。

3 Cookie的管理，使用缓存，设置期限

在Cookie的管理上， 减小Cookie大小，设置合理的过期时间能可以有效的提高网页内容加载速度。

4 使用CDN服务也是选项之一。

快到飞起

曲线救国——延迟加载

通常情况下，需要等网页的所有内容加载出来才会呈现，但是如果页面的内容确实较多，比如一些综合性的门户网站，那用户等候的时间肯定就得非常长了。而实际上，用户最先看多的只有一个屏幕那么多的内容，所以只需要在最短的时间内，将第一屏或者前几屏的内容呈现出来就可以了，其他的内容可以在用户浏览第一屏内容的时候继续加载，类似上面提高的图片延迟加载的方法，页面异步延迟加载，可以让别人“感觉起来”加载速度很快，从而提高用户体验。

以上是一些提高网页加载速度方面思路和技巧的总结，水平有限，如果有遗漏或者更好更新的方法，欢迎指正与交流！