性能知识点二
之前讲到重排，布局的时候使用flex时，比使用inline-block和float时重排更快，所以在布局时可以优先考虑Flex。
H5新增srcset，sizes和
元素用来做响应式图片，虽然对性能有提高，但是要准备很多的图片，只能是看情况使用。
我们知道浏览器的渲染机制，只有CSS和DOM加载完了，构建render树之后页面才渲染，虽然现在浏览器能够渲染不完整的render树，但是最好还是最快的加载CSS和DOM。我们可以将首屏渲染必须用到的CSS提取出来内嵌到中。虽然CSS和DOM是异步并行加载，如果CSS文件过大，用户就需要等待很长的时间才能看到渲染结果。当然这个做法也有一些缺点，比如不能太大，不能缓存。
在JS中倒序循环会略微提升性能
var arr = [1, 2, 3];
for(var i = arr.length;i--;){
console.log(arr[i]);
}
i—直接到0的时候判断为false，原来的i
接下来介绍几种我从来没用过的方法，这几个属性就算浏览器不支持也没关系，不会报错只是不会解析。
preconnect用于启动预链接，其中包含DNS查找，TCP握手，以及可选的TLS协议，允许浏览器减少潜在的建立连接的开销。
Prefetch用于标识下一个导航可能需要的资源。浏览器会获取该资源，一旦将来请求该资源，浏览器可以提供更快的响应。
dns-prefetch可以指定一个用于获取资源所需的源（origin），并提示浏览器应该尽可能早的解析。
prerender用于标识下一个导航可能需要的资源。浏览器会获取并执行，一旦将来请求该资源，浏览器可以提供更快的响应。
通过Preload预先加载需要的资源。
使用Tree-shaking、Scope hoisting、Code-splitting。
单页应用需要等JS加载完毕后在前端渲染页面，也就是说在JS加载完毕并开始执行渲染操作前的这段时间里浏览器会产生白屏。而服务端渲染（Server Side Render，简称SSR）的意义在于弥补主要内容在前端渲染的成本，减少白屏时间，提升首次有效绘制的速度。可以使用服务端渲染来获得更快的首次有效绘制。
（完）
Coding 个人笔记
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20180804G1LIMZ00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
