共计 2009 个字符，预计需要花费 6 分钟才能阅读完成。
一、写在后面
再过半个月，Internet Explorer 就正式服役了，已经的浏览器霸主，退役超过 25 年的浏览器闭幕。它的闭幕可能有多方面因素综合的后果，但浏览器性能和用户体验不符预期，必然是它被市场和用户所“摈弃”的重要起因。
市面上的浏览器很多，据统计超过 8 0 种，很多你可能都没听过，例如 greenbrowser,chromeplus（枫树），
Lunascape，糖果浏览器，彗星浏览器，Gomodo Dragon，蜜蜂浏览器，Slim Browser 等。
不论啥浏览器，也不过有多少种浏览器，浏览器性能永远是避不开的话题，也经常是各大浏览器发布会上“卖点”。
至此，浏览器性能重要性显而易见了。
那么接下来，就看看对于浏览器方向的优化，以及咱们具体上能做些什么。
tips：分明本文是对于介绍浏览器方向的优化，对于读懂本文并有所播种很重要。
二、高谈阔论：“一字一图”
一字指的是“预”字，一图指的是上面这张概括浏览器方向优化的脑图。
痴呆的你，置信看出了一些货色。咱们晓得，不同的浏览器，它们的内核，它们的外部运行机制，可能是有所不同，这意味着在具体的优化技术上，可能要“就地取材”，能力更好的见效，是浏览器性能和用户体验失去晋升。
尽管如此，从外围优化策略的角度看，也能够大抵的将针对浏览器方向的优化分为两类：
一是，文档类优化
二是，揣测类优化
也就是说，对于浏览器方向的优化，在外围优化策略上，能够分为两个方向，一是文档优化方向，二是浏览器揣测性优化方向。
而在具体的技术手段上，次要分为上面这四种技术：
①页面预渲染
页面预渲染，是通过猜想你可能要拜访的指标，从而在暗藏的标签页中事后渲染整个页面。当然，如果你是首次拜访某个指标，这可能不现实。留神，这是通过咱们的一些示意，例如输出局部关键字，此时咱们还没确定拜访，也还没正式拜访，但浏览器通过一些线索，揣测咱们可能要拜访的指标，事后渲染了这些页面。当用户真正拜访浏览器猜中并提前渲染的指标页面时，置信会有一种这个浏览器或这个站点响应速度真快的“错觉”。咱们无可否认，这是一种令大多数用户称心的体现，所以，页面预渲染很棒。
②DNS 预解析
DNS 预解析，有点页面预渲染的滋味，当然，这一步通常产生在页面预渲染的后面。它是一种通过揣测用户可能要拜访的域名，提前对这些域名进行解析，从而缩短用户感知到的消耗工夫，晋升体验的伎俩。既然是揣测提前解析，那么揣测的根据是啥呢？这可能和浏览器的标签页，鼠标悬浮指向，导航历史等无关。咱们晓得，http 申请是存在 DNS 提早的，而如果浏览器的揣测正确，提前进行了 DNS 解析，这种提早问题能够失去很好的解决。
③TCP 预连贯
浏览器揣测性的提前开始 TCP 连贯，就是所说的 TCP 预连贯，它产生在 DNS 解析之后。TCP 预连贯能带来的益处是，如果浏览器的揣测正确，那么能够省下一次残缺的 TCP 握手实际。不要小瞧这一次握手的工夫，这对机器而言，能够产生很多事，尤其是在“领先占位”这种方向上。
④资源预取
和页面相干的解析器，例如文档解析器、款式解析器、脚本解析器等，能够和网络协议层沟通，申明预加载某些资源。某些资源，当然是指那些初始化渲染必要的资源，必要而又会阻塞持续渲染的资源。
tips1：综上图文信息，一字是四种技术手段的“预”，一图是概括浏览器方向优化的脑图。
tips2：下面提到的策略和伎俩，其实浏览器自身曾经做了，或者说浏览器厂商曾经做了。所以说这有点“高谈阔论”的意思，而咱们须要分明这些机制和特点，从而做一些更具体的，一般开发人员能做的事件，从而晋升经咱们手上开发的利用的性能。
具体落地：一个 link 标签
对于预加载预解析方面的技术 http 方向有，html 的 link 标签也通过 ref=“prefetch”，ref=“prerender”，ref=“dns-prefetch”来反对。
通过 link 标签 ref 提醒一些关键字，通知浏览器为咱们采纳对应的优化机制。举例 link 标签在这方面的利用：
<!– 预解析特定的域名 –>
<link rel=”dns-prefetch” href=”//example.com”>
<!– 预获取某些页面要用到的要害资源 –>
<link rel=”subresource” href=”//example.com/app.js”>
<!– 预获取某些未来要用的资源，例如浏览器标签上小 logo 图标等 –>
<link rel=”prerender” href=”//example.com/logo.png”>
<!– 预渲染某些指定页面 –>
<link rel=”prefetch” href=”//example.com/index.html”>
复制代码
tips：link，HTML 内部资源链接元素，规定了以后文档与内部资源的关系。
tips：留神到了吗？这些具体落地的，应用在咱们开发的应用程序上的技术上，是不是和前述的高谈阔论“一字一图”非亲非故。
