前端网页加载优化

在现代网络发达的大环境下，各类网站大中型网站横行，网站性能体现的尤为重要，特别是能给访问用户一个不同感受的体验，同样的网络环境，有的网站“嗖”地一下出来，而有的网站等半天才小露头脚，如此一来，给用户产生反感，网站打开速度慢，那访问用户几乎不愿意多等，转头离开了，这样就大大减少了网页访问量，严重影响了用户体验，也不利于SEO优化。

对于前端开发人员而言，对于处理网页加载性能也是需要做诸多事情的，那么就介绍一些如何优化性能，且让页面提高加载的速度。

1、尽可能减少HTTP请求

减少HTTP请求，其中主要一点就是要合并一些内容，诸如css，图片，js，合并成一个文件当然最好，这样可以只进行一次访问请求即可，同时利用浏览器强大的缓存能力，可以达到减少HTTP请求。

比如在实际做法中，使用css精灵图片，字体图标，图片地图等。

具体方案为：

1、浏览器缓存：

对一个网站，一些静态资源文件诸如CSS、javascript、logo、图标更新的频率都比较低，而这些文件又几乎是每次http请求还都得需要，那么，如果我们将这些文件缓存在浏览器中，可以极好的改善性能。通过设置http头中的cache-control和expires的属性，可设定浏览器缓存。

2、使用压缩机制

通常我们在服务端将这些文件进行压缩处理，之后回到浏览器端进行解压缩，可有效减少通信传输的数据量。但既然使用文件压缩，或多或少会对浏览器和服务端产生一定的压力，所以实际中应酌情使用。

同时遵循以下原则：

(1) 减少DNS请求所耗费的时间：

且不说对错,因为从基本来说,减少http请求数的确可以减少DNS请求和解析耗费的时间；

(2) 减少服务器压力：

这个通常是被考虑最多的,也是我用来讲解给别人听的最大理由,因为每个http请求都会耗费服务器资源,特别是一些需要计算合并等操作的服务器,耗费服务器的cpu资源可不是开玩笑的事情,硬盘可以用钱买来,cpu资源可就没那么廉价了；

(3) 减少http请求头：

当我们对服务器发起一个请求的时候,我们会携带着这个域名下的cookie和一些其他的信息在http头部里,然后服务器响应请求的时候也会带回一些cookie之类的头部信息.这些信息有的时候会很大,在这种请求和响应的时候会影响带宽性能。

2、使用图片懒加载策略

我们浏览网页，图片往往是最引人注目的，而往往图片很占网络资源的，使用懒加载策略，可以是页面加载时只加载首屏页面用到的图片即可，其他的图片资源可以稍后再加载，这也是增加用户体验的方式。

3、css放头部，js放底部，或使用js/css外链

根据浏览器加载渲染网页的机制，浏览器会在下载完成全部CSS之后才对整个页面进行渲染，因此最好的做法是将CSS放在页面最上面，让浏览器尽快下载CSS。如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕，所以可以考虑将CSS放在HEAD中。

对于javascript而言，如果浏览器立即加载javascript脚本，可能会阻塞页面执行，表现缓慢，所以此时尽量放在页面底部（除了必要的立即执行等的情况）。

有时候，我们合理地使用js/css外链加载，使用缓存，是HTML文件大大减小，也一定程度上提高加载的速度，当然这也是据实际情况来看，比如说根据实际用户访问的情况（经常性频繁的浏览某一网页等）。

3、传输方面，控制cookie

cookie应尽可能地控制大小，写入cookie的数据应合理控制，减少传输数据量及次数，也是一个优化方案。

4、减少DOM操作

网页中对DOM操作往往是代价很大的，修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

5、使用CDN加速

CDN的全称是Content Delivery Network，即内容分发网络。是一个经策略性部署的整体系统，从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均而产生的用户访问网站响应速度慢的根本原因。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。

6、减少DNS查找

DNS用于映射主机名和IP地址，如同电话本映射人名与电话号码一样，DNS解析有代价，一般一次解析需要20～120毫秒。浏览器在DNS查询完成前不会下载任何东西。

为达到更高的性能，DNS解析通常被多级别地缓存。如由ISP或本地网络维护的DNS缓存服务器，用户机器操作系统的缓存。DNS信息会保存在操作系统的DNS缓存中（如windows上的 DNS Client Service）。大多数浏览器有自己的缓存，与操作系统的缓存有所不同。只要浏览器在自己的缓存上面保留DNS记录，它不会向操作系统请求DNS记录。

IE的缺省 DNS缓存时间为 30分钟，由注册表中的DnsCacheTimeout值指定。Firefox的缺省缓冲时间是1分钟，由network.dnsCacheExpiration配置设定。（Fasterfox将此值改为1小时）。

当客户端的DNS缓存为空时（浏览器与操作系统），DNS查询的次数等同于网页中各域名的个数。包括该网页URL、图片、脚本文件、样式表、FLASH对象等使用的域名。减少域名数量可以减少DNS查询次数。

减少域名主机可减少DNS查询的次数，但可能造成并行下载数的减少。避免 DNS查询可减少响应时间，而减少并行下载数可能增加响应时间。一个可行的折中是把内容分布到至少2个，最多4个不同的主机名上。

...

关于网页加载性能的优化还有很多解决方案，但实际开发中也是根据具体情况来合理分配使用，最大限度地提高网页性能，提升网页加载速度，增强用户体验性，从而加大用户访问量。