平常工做和生活中，咱们常常利用浏览器去打开一些URL来获取咱们所需的资源，那么做为一个开发者或者性能测试工程师，如何去测试并提高优化前端的性能呢？前端
1、浏览器打开URL和方式和过程web
不一样浏览器工做方式不彻底同样，大致来说，浏览器的核心是浏览器引擎；不一样浏览器对W3C的规范支持不尽相同，在具体功能的实现上也不彻底一致。chrome
一、链接到URL所在的服务器浏览器
用户在浏览器地址栏输入URL，打开URL时，浏览器首先寻找该URL所在的服务器。经过向DNS服务器查询，获取该URL所在网站的IP地址，而后浏览器向该地址发起链接请求，缓存
简历浏览器到服务器间的链接。安全
二、获取页面对应的HTML文档性能优化
链接创建后，浏览器向服务器发送http请求，请求URL对应的HTML文档，不管请求的URL是一个静态HTML文件仍是一个动态的脚本（ASPX、PHP或JS），服务器返回给浏览器服务器
的必定是一个HTML文档。该文档就是浏览器须要呈现的画面。网络
三、解析文档并获取所需的资源并发
浏览器获取到HTML文档后对其进行解析，目的是知道该页面所需资源以及生成DOM树（生成DOM树的工做与下载页面所需资源是并行的）。
四、JS及CSS文件
页面处理JS文件，只需保证一下两点：
①全部JS文件按照其在HTML稳重出现的顺序执行，这样能够保证JS文件之间的依赖关系不被破坏；
②JS文件在执行时，其以来的DOM树已经创建好；
CSS文件的做用：
浏览器处理CSS文件会影响页面的展现，CSS通常用于控制页面元素的显示效果；若是DOM树上某个元素被CSS修改后，浏览器可能须要从新对页面局部或总体进行重绘。
此后若是某外部样式表（Style Sheet）文件被加载，浏览器会根据外部样式表文件的内容从新渲染页面元素，所以，通常建议把对样式表的引用放在HTML文档的最前面。
五、onload事件
当HTML文件解析完成，生成DOM树，全部页面所需资源都已成功下载和执行后，浏览器会发出onload事件并回调HTML文档中的onload函数。
对浏览器来讲，onload事件是最接近页面就绪的事件，但onload执行完成，并不彻底表明页面已就绪，用户能够进行操做，由于在onload执行完成后，页面可能还有一些
JavaScript脚本须要在其后运行（这种状况在大量运用Ajax技术的网页上很是常见）。
PS:上面简略说了下浏览器打开URL的过程，固然，具体的如何经过DNS服务器获取IP，HTML下载和渲染以及更多的前端知识，请自行查阅。。。
2、提升前端性能的方法
要优化提高前端性能，有如下两大方法：
①减小页面加载所需时间；
②提高用户角度的观感体验（让用户以为页面更快）；
减小页面加载所需时间，能够从请求数量、请求并发度及网络传输时间等方面着手；提高用户观感，则主要从让页面尽快展现入手；下面一一介绍：
一、减小网络时间
浏览器从服务端获取HTML文档和资源都须要经历“DNS解析——创建链接——获取链接——断开链接”的过程；若是能减小DNS解析和文件在网络上传输的时间，性能天然能获得提高。
①使用DNS缓存技术
使用DNS缓存技术可让用户得到更快的DNS解析时间，通常而言，因为浏览器自己就具备必定的DNS缓存机制，因此服务端的DNS缓存并不能带来太大的性能提高。
②减小须要传输的文件尺寸
在网络带宽有限的状况下，减小传输的文件尺寸能够提高很大的性能。常见的有将文件进行压缩的方法，除此以外，还有使用混淆等方法尽可能减小JS文件和样式表的大小，从JS文件和
样式表中去除不须要使用的部分等，均可以起到减小须要传输文件尺寸的做用。
③加快文件传输速度
Internet网站的用户一般分布在一个较广阔的区域内，Internet自己的多层次网络结构致使从某一个节点到另外一些节点之间的可用带宽和网络传输速度都比较慢；这种状况下使用CDN技术，
让用户尽量访问到对用户节点而言更快速的服务器就能够加快文件传输速度。
国内而言，移动联通电信三大运营商之间并无创建良好的互联互通，一般需在三个服务商所在网络中设置GDN服务器；另外，出于地域缘由，创建CDN也是种常见的方法。
CDN(Content Delivery Network):内容分发网络。其基本思路是尽量避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
二、减小发送的请求数量
在短链接状况下，每一个请求都须要通过“创建链接——发送数据——断开链接”的过程，所以减小请求数量可带来显著的性能提高；即便使用持久链接方式，因为浏览器与每一个服务器之间的
创建的持久链接数量是有限的，减小必须的请求也能够带来性能提高。
①利用浏览器缓存
为了充分利用浏览器缓存，须要在服务端保证每一个能够被缓存的资源在被服务端返回时附带合适的expries头信息；此外，为了保证有尽量多的内容能够被缓存，也要求网站尽量将页面
中较少改变的部分提取出来。
△保证服务端返回资源的响应头带有Expires信息，使得资源能够被缓存；
△用引用方式引用样式表和JS脚本。若是使用内嵌的样式表和JS脚本，每次HTML文档的变化都会致使样式表和JS脚本从新加载，没法充分利用缓存；固然，在没有缓存或样式表与JS脚本
常常变更的状况下，引用方式使用样式表和JS脚本反而会致使更多的http请求；
△使用更多的URI能够被缓存。
②使用合并的图片文件
当页面包含不少个小图片文件时，能够考虑将小图片文件合并为一个大的图片文件，在页面使用CSS Sprites技术将大图片显示为分隔开的小图片，在没有缓存的状况下，将许多小图片合并为
大图片文件能够大量减小http请求数。
三、提升浏览器下载的并发度
①JS文件放在HTML文档最后
在某些浏览器上，JS文件的下载和执行会阻止其余页面资源文件的下载和执行，之道JS文件下载和执行完，其余资源文件才能够开始下载和执行，所以，将JS文件放在HTML文档最后能够保证
JS文件不会阻止任何其余元素的下载。
②使用多个域名
浏览器对服务器的链接限制是基于域名的。好比S服务器有2个域名a.com和b.com，在浏览器限制最多与同一个域名创建2个链接时，浏览器实际上能够与服务器S创建4个链接；
通常大型网站都拥有几个域名，根据文件类型（静态资源、动态资源、JS脚本等）选择合适的服务器进行部署，也是个很好的作法。
四、让页面尽早开始显示
①将样式表的引用放在HTML文档的开头（如放在<Head>标签中），这样可使样式表在一开始就被下载下来，一旦样式表下载完成，浏览器就可使用样式表中定义的样式开始在屏幕上
显示页面元素；另外，也避免了新样式表可能带来的屏幕显示的重绘。
②将JS的引用放在HTML文档的最后，这样JS文件的下载和执行会在全部页面都下载完成后，不会阻止其余页面元素的显示。从用户感官上说，JS文件的下载和执行时间彻底不会被用户感受到。
PS：上面几项都是一些提高前端性能的通用方式，除这些以外，还有更多更细致的针对JS文件或样式表的提高性能技巧，后续会不断更新。。。
3、常见的前端性能工具
下面简单介绍下几种常见的前端性能工具，具体使用方法及用途请自行查找资料。
一、Firebug工具
①Firebug工具是一个备受推崇的、强大的web开发工具，它提供了方便的查看页面元素功能，容许用户以鼠标指示、DOM树等方式查看任意页面元素；
②提供了JavaScript控制台，容许用户在控制台直接调试JavaScript；
③提供了可视化的CSS标尺，方便用户调整页面布局；
④提供了网路面板，容许用户获知每一个页面被加载过程当中的页面元素下载和执行细节；
⑤还提供了良好的扩展，好比YSlow和Page Spend工具就是基于其扩展而创建；
⑥Firebug以Firefox的插件形式存在，须要安装Firebug；
⑦Firebug给出了浏览器请求URL过程当中发生的所有HTTP交互，列出每一个元素的返回码、大小及按照时间序列给出的页面元素下载时间等信息；
二、HttpWatch工具
①HttpWatch是能够在IE和Firefox下使用的一个商业网页数据分析工具，其提供了一个基于basic的免费版本；
②安装简单，下载安装包后在Windows平台上直接执行便可；
③与Firebug相似，HttpWatch也给出了浏览器请求URL过程当中发生的所有HTTP交互，列出每一个元素的返回码、大小及按照时间序列给出的页面元素下载时间等信息；
④HttpWatch在Page Event选项卡中给出了Render Start（浏览器开始渲染页面的时间）、Page Load（onload事件触发时间）和HTTP Load时间（最后一个请求发送和接受完毕的时间点）；
⑤以上三个时间对应Firebug中的第一个Paint事件发生时间、onload时间以及收到最后一个HTTP响应的结束时间；
三、Chrome自带的开发工具
①chrome是Google推出的一款浏览器产品，特色是快速、安全、简洁。
②chrome开发工具在对URL的请求过程的发生的HTTP交互信息和Firebug以及HttpWatch很类似；
③chrome开发工具还提供了很是详尽的浏览器时间信息；
四、Page Speed工具
Page Speed是一个基于Firebug工具的前端性能优化工具，由Google建立并发布，其依据一些规则对页面进行检查，查找可优化的地方并给出响应建议。
五、DynaTrace AJAX Edition工具
①DynaTrace AJAX Edition是Windows平台上的免费工具，其提供了很是强大的前端性能测试支持，主要针对Ajax技术的应用而开发；
②DynaTrace AJAX Edition可以给出浏览器访问给定的URL时的许多信息，如页面各元素下载和执行时间点、页面对浏览器的缓存使用状况，并给出一些优化建议；
③DynaTrace AJAX Edition工具最突出的功能是对页面的JavaScript的调优；
PS：合适的工具能够大大下降前端性能问题定位的难度，但不要过分依赖工具给出的建议，相对于工具，更多的是对浏览器工做方式和前端性能自己的了解。