前端性能优化方法
日常工作和生活中，我们经常利用浏览器去打开一些URL来获取我们所需的资源，那么作为一个开发者或者性能测试工程师，如何去测试并提升优化前端的性能呢？
一、浏览器打开URL和方式和过程
不同浏览器的工作方式不完全一样，大体上，浏览器的核心是浏览器引擎，目前市场占有率最高的几种浏览器几乎都使用了不同的浏览器引擎：IE使用的是Trident、Firefox
使用的是Gecko、Safari和Chrome使用的是Webkit。不同的浏览器引擎对W3C的规范支持不尽相同。
以下简单讲述浏览器从输入URL地址开始到页面完全可用的大致过程:
1.连接到URL所在服务器
用户在地址栏中输入一个URL，并单击GO按钮要求浏览器打开该URL后，浏览器做的第一件事情是寻找该URL所在服务器，通过向DNS服务器查询，浏览器可以获得该URL所在网站的IP地址。然后，浏览器向该地址发起连接请求，建立到服务器的连接。
2.获取页面对应的HTML文档
当连接建立后，浏览器向服务器发送HTTP请求，请求URL对应的HTML文档。不管请求的URL是一个静态的HTML文件，还是一个动态脚本(ASPX、PHP或JSP)，服务器返回给浏览器的一定是HTML文档。该HTML文档就是浏览器需要呈现的页面
3.解析文档并获取所需要的资源
浏览器在获取HTML文档后会对文档进行解析，目的是知道该页面需要哪些资源以及生成DOM树。生成DOM树的工作与下载页面上需要的其它资源同时进行。大致来说，浏览器会逐行分析HTML文档，一旦发现一个标签，就会根据标签的要求分配对指定资源的下载。当DOM树生成后，DOMContentLoaded事件被触发。
首先，理论上浏览器并行下载页面需要的所有资源会带来最好的性能体验，但由于服务器要保证对尽可能多的用户的支持，因此HTTP/1.1规定了每个客户端只能与每个服务器建立2个连接。
其次，并非所有的元件都可以被并行下载。一般情况下，页面中包含两类需要被执行的JavaScript脚本，一类是直接用<script>标签标识的内嵌的JS语句；另一类则是引用外部的JS文件
4.页面上的JS文件与CSS文件
页面处理JS文件，只需保证一下两点：
①所有JS文件按照其在HTML稳重出现的顺序执行，这样可以保证JS文件之间的依赖关系不被破坏；
②JS文件在执行时，其以来的DOM树已经建立好；
CSS文件的作用：
浏览器处理CSS文件会影响页面的展示，CSS一般用于控制页面元素的显示效果；如果DOM树上某个元素被CSS修改后，浏览器可能需要重新对页面局部或整体进行重绘。
此后如果某外部样式表（Style Sheet）文件被加载，浏览器会根据外部样式表文件的内容重新渲染页面元素，因此，一般建议把对样式表的引用放在HTML文档的最前 面。
5.Onload事件
当HTML文档解析完成，生成了DOM树，所有页面需要的资源文件都已经成功下载和执行后，浏览器会发出Onload事件并回调HTML文档中的onload函数。
二、提高前端性能的方法
要优化提升前端性能，有以下两大方法：
①减少页面加载所需时间；
②提升用户角度的观感体验（让用户觉得页面更快）；
减少页面加载所需时间，可以从请求数量、请求并发度及网络传输时间等方面着手；提升用户观感，则主要从让页面尽快展示入手；下面一一介绍：
1、减少网络时间
浏览器从服务端获取HTML文档和资源都需要经历“DNS解析——建立连接——获取连接——断开连接”的过程；如果能减少DNS解析和文件在网络上传输的时间，性能自然能得到提 升。
①使用DNS缓存技术
使用DNS缓存技术可以让用户获得更快的DNS解析时间，一般而言，由于浏览器本身就具有一定的DNS缓存机制，所以服务端的DNS缓存并不能带来太大的性能提升。
②减少需要传输的文件尺寸
在网络带宽有限的情况下，减少传输的文件尺寸可以提升很大的性能。常见的有将文件进行压缩的方法，除此之外，还有使用混淆等方法尽量减少JS文件和样式表的大小，从J S文件和样式表中去除不需要使用的部分等，都可以起到减少需要传输文件尺寸的作用。
③加快文件传输速度
Internet网站的用户通常分布在一个较广阔的区域内，Internet本身的多层次网络结构导致从某一个节点到另一些节点之间的可用带宽和网络传输速度都比较慢；这种情况 下使用CDN技术，
让用户尽可能访问到对用户节点而言更快速的服务器就可以加快文件传输速度。
国内而言，移动联通电信三大运营商之间并没有建立良好的互联互通，通常需在三个服务商所在网络中设置GDN服务器；另外，出于地域原因，建立CDN也是种常见的方法。
CDN(Content Delivery Network):内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
2、减少发送的请求数量
在短连接情况下，每个请求都需要经过“建立连接——发送数据——断开连接”的过程，因此减少请求数量可带来显著的性能提升；即使使用持久连接方式，由于浏览器与每个服务 器之间的建立的持久连接数量是有限的，减少必须的请求也可以带来性能提升。
①利用浏览器缓存
为了充分利用浏览器缓存，需要在服务端保证每个可以被缓存的资源在被服务端返回时附带合适的expries头信息；此外，为了保证有尽可能多的内容可以被缓存，也要求网站 尽可能将页面中较少改变的部分提取出来。
△保证服务端返回资源的响应头带有Expires信息，使得资源可以被缓存；
△用引用方式引用样式表和JS脚本。如果使用内嵌的样式表和JS脚本，每次HTML文档的变化都会导致样式表和JS脚本重新加载，无法充分利用缓存；当然，在没有缓存或样式表与J S脚本
经常变动的情况下，引用方式使用样式表和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文档的开头（如放在<Head>标签中），这样可以使样式表在一开始就被下载下来，一旦样式表下载完成，浏览器就可以使用样式表中定义的样式开 始在屏幕上显示页面元素；另外，也避免了新样式表可能带来的屏幕显示的重绘。
②将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：合适的工具可以大大降低前端性能问题定位的难度，但不要过度依赖工具给出的建议，相对于工具，更多的是对浏览器工作方式和前端性能本身的了解。
查看原文:https://www.cnblogs.com/imyalost/p/6843622.html