性能知识点二

之前讲到重排,布局的时候使用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个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue mixins原理

    以前一直以为mixins在vue里面应该不是很重要,只是提供了一个混入的api,慢慢的才知道mixin在vue里面非常重要。生命周期、vuex等都有mixin的...

    wade
  • Vue下拉刷新组件

    之前写了上拉加载,当然也就有下拉刷新。下拉刷新在web项目中使用会比上拉加载少。这边补充两点:

    wade
  • vue和react中循环key的作用

    没用过react开发项目,但想来跟vue在循环渲染中key的作用应该原理是一样的。循环在没有使用key的时候,vue会警告。但是这个key的作用是什么。

    wade
  • Ledger Nano S开箱实测2 -- 添加数字资产

    熊市买了一个Ledger Nano S硬钱包进行定投囤币,昨天文章《Ledger Nano S开箱实测1 -- 初始化设备》介绍了如何初始化设备,注意备份好助记...

    申龙斌
  • ubantu16.04搭建Qt环境

    「下载 qt-everywhere-opensource-src-4.8.7.tar.gz:http://download.qt-project.org/arc...

    DeROy
  • Web前端性能基础指标&计算方式

    从用户角度而言,打开一个页面想要的就是页面可以尽快有响应,加载完并且可以允许交互;因此前端的性能可以用白屏时间,首屏时间,可交互时间来衡量。

    腾讯移动品质中心TMQ
  • Linux命令之tcpdump

    基于MHA+consul的高可用方案上线已经一段时间了,目前比较稳定,之前线上环境使用的是VIP+MHA的高可用方案,这种方案在跨机房之间进行故障切换存在...

    AsiaYe
  • MySQL 在查询结果中记录行号

    在其他的关系型数据库中,都有rownum这类型的内置函数来提供查询结果的行号,但是MySQL没有,阿福也一直觉得奇怪。

    用户2353021
  • Python GUI项目实战(七)学生信息的修改、删除和保存

    上一节,我们实现了添加学生信息的功能,在明细窗体中输入的学生信息并添加到总列表中,与此同时在主窗体的表格中能自动刷新添加的数据。作为一个学生信息管理系统除了具备...

    小雨编程
  • 模切ERP实施前准备这个事半功倍

    很多模切厂在上线模切ERP时,负责人都会比较纠结在开启之前应该做好哪些准备才能让模切ERP顺利上线。今天就让小编以点晴模切ERP系统为例告诉你们:

    用户3865428

扫码关注云+社区

领取腾讯云代金券