日常工作和生活中，我们经常利用浏览器去打开一些URL来获取我们所需的资源，那么作为一个开发者或者性能测试工程师，如何去测试并提升优化前端的性能呢？

一、浏览器打开URL和方式和过程

不同浏览器工作方式不完全一样，大体来讲，浏览器的核心是浏览器引擎；不同浏览器对W3C的规范支持不尽相同，在具体功能的实现上也不完全一致。

1、连接到URL所在的服务器

用户在浏览器地址栏输入URL，打开URL时，浏览器首先寻找该URL所在的服务器。通过向DNS服务器查询，获取该URL所在网站的IP地址，然后浏览器向该地址发起连接请求，

简历浏览器到服务器间的连接。

2、获取页面对应的HTML文档

连接建立后，浏览器向服务器发送http请求，请求URL对应的HTML文档，无论请求的URL是一个静态HTML文件还是一个动态的脚本（ASPX、PHP或JS），服务器返回给浏览器

的一定是一个HTML文档。该文档就是浏览器需要呈现的画面。

3、解析文档并获取所需的资源

浏览器获取到HTML文档后对其进行解析，目的是知道该页面所需资源以及生成DOM树（生成DOM树的工作与下载页面所需资源是并行的）。

4、JS及CSS文件

页面处理JS文件，只需保证一下两点：

①所有JS文件按照其在HTML稳重出现的顺序执行，这样可以保证JS文件之间的依赖关系不被破坏；

②JS文件在执行时，其以来的DOM树已经建立好；

CSS文件的作用：

浏览器处理CSS文件会影响页面的展示，CSS一般用于控制页面元素的显示效果；如果DOM树上某个元素被CSS修改后，浏览器可能需要重新对页面局部或整体进行重绘。

此后如果某外部样式表（Style Sheet）文件被加载，浏览器会根据外部样式表文件的内容重新渲染页面元素，因此，一般建议把对样式表的引用放在HTML文档的最前面。

5、onload事件

当HTML文件解析完成，生成DOM树，所有页面所需资源都已成功下载和执行后，浏览器会发出onload事件并回调HTML文档中的onload函数。

对浏览器来说，onload事件是最接近页面就绪的事件，但onload执行完成，并不完全代表页面已就绪，用户可以进行操作，因为在onload执行完成后，页面可能还有一些

JavaScript脚本需要在其后运行（这种情况在大量运用Ajax技术的网页上非常常见）。

PS:上面简略说了下浏览器打开URL的过程，当然，具体的如何通过DNS服务器获取IP，HTML下载和渲染以及更多的前端知识，请自行查阅。。。

二、提高前端性能的方法

要优化提升前端性能，有以下两大方法：

①减少页面加载所需时间；

②提升用户角度的观感体验（让用户觉得页面更快）；

减少页面加载所需时间，可以从请求数量、请求并发度及网络传输时间等方面着手；提升用户观感，则主要从让页面尽快展示入手；下面一一介绍：

1、减少网络时间

浏览器从服务端获取HTML文档和资源都需要经历“DNS解析——建立连接——获取连接——断开连接”的过程；如果能减少DNS解析和文件在网络上传输的时间，性能自然能得到提升。

①使用DNS缓存技术

使用DNS缓存技术可以让用户获得更快的DNS解析时间，一般而言，由于浏览器本身就具有一定的DNS缓存机制，所以服务端的DNS缓存并不能带来太大的性能提升。

②减少需要传输的文件尺寸

在网络带宽有限的情况下，减少传输的文件尺寸可以提升很大的性能。常见的有将文件进行压缩的方法，除此之外，还有使用混淆等方法尽量减少JS文件和样式表的大小，从JS文件和

样式表中去除不需要使用的部分等，都可以起到减少需要传输文件尺寸的作用。

③加快文件传输速度

Internet网站的用户通常分布在一个较广阔的区域内，Internet本身的多层次网络结构导致从某一个节点到另一些节点之间的可用带宽和网络传输速度都比较慢；这种情况下使用CDN技术，

让用户尽可能访问到对用户节点而言更快速的服务器就可以加快文件传输速度。

国内而言，移动联通电信三大运营商之间并没有建立良好的互联互通，通常需在三个服务商所在网络中设置GDN服务器；另外，出于地域原因，建立CDN也是种常见的方法。

CDN(Content Delivery Network):内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。

2、减少发送的请求数量

在短连接情况下，每个请求都需要经过“建立连接——发送数据——断开连接”的过程，因此减少请求数量可带来显著的性能提升；即使使用持久连接方式，由于浏览器与每个服务器之间的

建立的持久连接数量是有限的，减少必须的请求也可以带来性能提升。

①利用浏览器缓存

为了充分利用浏览器缓存，需要在服务端保证每个可以被缓存的资源在被服务端返回时附带合适的expries头信息；此外，为了保证有尽可能多的内容可以被缓存，也要求网站尽可能将页面

中较少改变的部分提取出来。

△保证服务端返回资源的响应头带有Expires信息，使得资源可以被缓存；

△用引用方式引用样式表和JS脚本。如果使用内嵌的样式表和JS脚本，每次HTML文档的变化都会导致样式表和JS脚本重新加载，无法充分利用缓存；当然，在没有缓存或样式表与JS脚本

经常变动的情况下，引用方式使用样式表和JS脚本反而会导致更多的http请求；

△使用更多的URI可以被缓存。

②使用合并的图片文件

当页面包含很多个小图片文件时，可以考虑将小图片文件合并为一个大的图片文件，在页面使用CSS Sprites技术将大图片显示为分隔开的小图片，在没有缓存的情况下，将许多小图片合并为

大图片文件可以大量减少http请求数。

3、提高浏览器下载的并发度

①JS文件放在HTML文档最后

在某些浏览器上，JS文件的下载和执行会阻止其他页面资源文件的下载和执行，之道JS文件下载和执行完，其他资源文件才可以开始下载和执行，因此，将JS文件放在HTML文档最后可以保证

JS文件不会阻止任何其他元素的下载。

②使用多个域名

浏览器对服务器的连接限制是基于域名的。比如S服务器有2个域名a.com和b.com，在浏览器限制最多与同一个域名建立2个连接时，浏览器实际上可以与服务器S建立4个连接；

一般大型网站都拥有几个域名，根据文件类型（静态资源、动态资源、JS脚本等）选择合适的服务器进行部署，也是个很好的做法。

4、让页面尽早开始显示

①将样式表的引用放在HTML文档的开头（如放在标签中），这样可以使样式表在一开始就被下载下来，一旦样式表下载完成，浏览器就可以使用样式表中定义的样式开始在屏幕上

显示页面元素；另外，也避免了新样式表可能带来的屏幕显示的重绘。

②将JS的引用放在HTML文档的最后，这样JS文件的下载和执行会在所有页面都下载完成后，不会阻止其他页面元素的显示。从用户感官上说，JS文件的下载和执行时间完全不会被用户感觉到。

PS：上面几项都是一些提升前端性能的通用方式，除这些之外，还有更多更细致的针对JS文件或样式表的提升性能技巧，后续会不断更新。。。

三、常见的前端性能工具

下面简单介绍下几种常见的前端性能工具，具体使用方法及用途请自行查找资料。

1、Firebug工具

①Firebug工具是一个备受推崇的、强大的web开发工具，它提供了方便的查看页面元素功能，允许用户以鼠标指示、DOM树等方式查看任意页面元素；

②提供了JavaScript控制台，允许用户在控制台直接调试JavaScript；

③提供了可视化的CSS标尺，方便用户调整页面布局；

④提供了网路面板，允许用户获知每个页面被加载过程中的页面元素下载和执行细节；

⑤还提供了良好的扩展，比如YSlow和Page Spend工具就是基于其扩展而建立；

⑥Firebug以Firefox的插件形式存在，需要安装Firebug；

⑦Firebug给出了浏览器请求URL过程中发生的全部HTTP交互，列出每个元素的返回码、大小及按照时间序列给出的页面元素下载时间等信息；

2、HttpWatch工具

①HttpWatch是可以在IE和Firefox下使用的一个商业网页数据分析工具，其提供了一个基于basic的免费版本；

②安装简单，下载安装包后在Windows平台上直接执行即可；

③与Firebug类似，HttpWatch也给出了浏览器请求URL过程中发生的全部HTTP交互，列出每个元素的返回码、大小及按照时间序列给出的页面元素下载时间等信息；

④HttpWatch在Page Event选项卡中给出了Render Start（浏览器开始渲染页面的时间）、Page Load（onload事件触发时间）和HTTP Load时间（最后一个请求发送和接受完毕的时间点）；

⑤以上三个时间对应Firebug中的第一个Paint事件发生时间、onload时间以及收到最后一个HTTP响应的结束时间；

3、Chrome自带的开发工具

①chrome是Google推出的一款浏览器产品，特点是快速、安全、简洁。

②chrome开发工具在对URL的请求过程的发生的HTTP交互信息和Firebug以及HttpWatch很相似；

③chrome开发工具还提供了非常详尽的浏览器时间信息；

4、Page Speed工具

Page Speed是一个基于Firebug工具的前端性能优化工具，由Google创建并发布，其依据一些规则对页面进行检查，查找可优化的地方并给出响应建议。

5、DynaTrace AJAX Edition工具

①DynaTrace AJAX Edition是Windows平台上的免费工具，其提供了非常强大的前端性能测试支持，主要针对Ajax技术的应用而开发；

②DynaTrace AJAX Edition能够给出浏览器访问给定的URL时的许多信息，如页面各元素下载和执行时间点、页面对浏览器的缓存使用情况，并给出一些优化建议；

③DynaTrace AJAX Edition工具最突出的功能是对页面的JavaScript的调优；

PS：合适的工具可以大大降低前端性能问题定位的难度，但不要过度依赖工具给出的建议，相对于工具，更多的是对浏览器工作方式和前端性能本身的了解。

转载自老_张