性能知识点二
之前讲到重排，布局的时候使用flex时，比使用inline-block和float时重排更快，所以在布局时可以优先考虑Flex。
H5新增srcset，sizes和<picture>元素用来做响应式图片，虽然对性能有提高，但是要准备很多的图片，只能是看情况使用。
我们知道浏览器的渲染机制，只有CSS和DOM加载完了，构建render树之后页面才渲染，虽然现在浏览器能够渲染不完整的render树，但是最好还是最快的加载CSS和DOM。我们可以将首屏渲染必须用到的CSS提取出来内嵌到<head>中。虽然CSS和DOM是异步并行加载，如果CSS文件过大，用户就需要等待很长的时间才能看到渲染结果。当然这个做法也有一些缺点，比如不能太大，不能缓存。
在JS中倒序循环会略微提升性能
var arr = [1, 2, 3];
for(var i = arr.length;i--;){
console.log(arr[i]);
}
i—直接到0的时候判断为false，原来的i < arr.length过程是判断是i是否小于总数，然后判断是否为true，而现在直接一步是否为true，少了判断总数的一步。
接下来介绍几种我从来没用过的方法，这几个属性就算浏览器不支持也没关系，不会报错只是不会解析。
preconnect用于启动预链接，其中包含DNS查找，TCP握手，以及可选的TLS协议，允许浏览器减少潜在的建立连接的开销。
<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>
Prefetch用于标识下一个导航可能需要的资源。浏览器会获取该资源，一旦将来请求该资源，浏览器可以提供更快的响应。
<link rel="prefetch" href="//example.com/next-page.html" as="html">
<link rel="prefetch" href="/library.js" as="script">
dns-prefetch可以指定一个用于获取资源所需的源（origin），并提示浏览器应该尽可能早的解析。
<link rel="dns-prefetch" href="//example.com">
prerender用于标识下一个导航可能需要的资源。浏览器会获取并执行，一旦将来请求该资源，浏览器可以提供更快的响应。
<link rel="prerender" href="//example.com/next-page.html">
通过Preload预先加载需要的资源。
使用 Tree-shaking、Scope hoisting、Code-splitting。
单页应用需要等JS加载完毕后在前端渲染页面，也就是说在JS加载完毕并开始执行渲染操作前的这段时间里浏览器会产生白屏。而服务端渲染（Server Side Render，简称SSR）的意义在于弥补主要内容在前端渲染的成本，减少白屏时间，提升首次有效绘制的速度。可以使用服务端渲染来获得更快的首次有效绘制。
欢迎关注Coding个人笔记 公众号
