性能知识点二

之前讲到重排,布局的时候使用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
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励