从URL到页面，如何优化性能？

从输入URL之后，浏览器先做DNS解析，即将URL解析为唯一的ip地址，全互联网服务器都各自有一个唯一的ip地址，但一个ip地址可能是对应对台服务器，因此在获取资源是通过唯一的ip地址定位的。

DNS解析也是有一个过程的。以www.taobao.com为例，大致解析过程为：

①本机向local dns请求www.taobao.com

②local dns向根域请求www.taobao.com，根域返回com.域的服务器IP

③向com.域请求www.taobao.com，com.域返回taobao.com域的服务器IP

④向taobao.com请求www.taobao.com。

这里会涉及到一个重定向问题，比如输入的URL为https://taobao.com会被重定向到https://www.taobao.com。

为什么要这么做，第一是为了可以把两种方式的访问量累计到一起在一些搜索方面积累优势，

第二则是如果两个地址去访问的话对缓存问题存在一些不友好。

定位到ip地址后，向该服务器发起http请求，下载网页资源。

浏览器工作是边解析边渲染，其实下载html资源时间消耗很小，主要时间用于构建DOM树。

获取到HTML文件资源后：

众所周知，浏览器引起加载解析是自上而下的。

一、浏览器开始显示HTML，在没有接受全部HTML的时候已经开始显示；

二、浏览器发送获取嵌入HTML中的对象请求，比如CSS文件，JS文件，图片等等的资源。

这些请求其实也都和HTML获取经历一个类似的过程，也有DNS解析等等。

但和动态资源不同的是，这些静态资源可以做缓存，不需要每次都从服务器去获取。

三、最后展现完整的页面。

这三个步骤中，大家应该知道一下两点：

1.CSS文件会阻塞所有DOM渲染，但不阻塞DOM解析；

2.JS文件不仅阻塞其后面的DOM渲染也阻塞DOM解析。因为JS和UI是共用一个线程的。

因此要在HTML加载之前把CSS加载解析完毕，在最后才引入JS，则不会影响在它之前的流程，也能够显示页面（优雅降级，即使JS出错）。

另外也存在js中会有改变某个DOM元素的样式，但若CSS还未解析，如style.width等属性还未生成则会报错。

这也就是为什么外部JS文件放在body之后引入，CSS文件放在head内引入。

那么基于这些过程，能够如何优化性能呢？

首先，我们应该了解浏览器渲染过程中，有reflow和repain两个概念。

reflow是改变盒子大小，成本极高，应该会改变整个DOM布局；repain则是改变颜色等一些只影响本身的属性，成本较低。

一、因此在初始化过程中尽量避免用JS去reflow导致性能受较大的影响。

二、CSS选择器匹配机制是自右向左的！！！什么意思呢，很多人往往写样式的时候会习惯#id .xx .xx .xx p a等等，

查找步骤其实是先全页中匹配到a标签，然后再向上遍历到根节点#id为止。

这样的写法是比较消耗性能的，那么很明显，最右边的选择器是标签选择器必然会消耗很大的性能要避免；同时，如果是唯一的id选择器那么速度则会很快。

三、本文上面也有讲到，对于一些静态资源可以做缓存来提高页面加载速度和性能，关于http请求缓存相关内容，可出门左拐哈=>http请求缓存

四、减少http请求，压缩代码等等，雅虎前端优化规则等等之类的可以逐一进行学习。