如何更快地构建与渲染

原创 2017年10月06日 18:13:14

上一篇中,我详细描述了浏览器渲染的过程,那么,如何来提升渲染效率,使页面更快的加载完成呢。
我将这些方法分为几部分分别介绍。

CSS部分

1. 媒体类型和媒体查询

  将CSS分割为片段,对于不同的浏览器,不同的终端,不同的阅读模式,应用不同的CSS样式表。如果将这些内容写到统一个文件中,浏览器需要下载并解析他们。所以我们应该将这些内容通过对link元素的media属性来指定:

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
<link rel="stylesheet" type="text/css" href="style.css" media="(min-width:40em)"/>
</head>

  注意:无论是否需要解析使用,浏览器都会下载这些样式表。
  

2. 编写高效的CSS

  关键选择器,是一个复杂的CSS选择器中最右边部分。它是浏览器最先寻找的。写CSS代码的时候,关键选择器是能否高效的决定因素。

#content .intro {..}

  浏览器会寻找.intro的实例(可能会很多),然后沿着DOM树向上查找,确定刚才找到的实例是否在一个带有ID为content的容器里面。
  但是,下面的选择器就有点糟糕啦:

#content * {..}`

  这个选择器所做的是选择所有在页面上的单个元素(是每个单个的元素),然后去看看它们是否有一个 #content 的父元素。这是一个非常不高效选择器因为它的关键选择器执行开销太大了。
  更多高效选择器的知识戳这里

3.GPU加速

  利用CSS3 transform:translate3d开启硬件加速,提升网站动画渲染性能。
  更多相关知识戳这里

JS部分

1. 异步加载

  DOM 扮演着两种角色:它既是 HTML 文档的对象表示,也充当着外界(比如JavaScript)和页面交互的接口。
  js脚本的加载会阻塞DOM树的构建,因为有些js脚本需要操作DOM,这将改变DOM树。js脚本还可以查询关于 DOM 的一些东西,如果是在 DOM 还在在构建的时候,它可能会返回意外的结果。这些脚本如果在DOM树构建完成再操作,减少了对浏览器渲染速度的影响。
  deferasync 属性提供给开发者一个方式来告诉浏览器哪些外部脚本(包含src的脚本)是需要异步加载的。他们都告诉浏览器在“后台”加载脚本的同时继续解析 HTML,并在脚本加载完执行。
  defer 和 async 之间的不同是他们开始执行脚本的时机的不同。
  defer 比 async 要先引入浏览器。它的执行在解析完全完成之后才开始,它处在DOMContentLoaded事件之前。 它保证脚本会按照它在 HTML 中出现的顺序执行,并且不会阻塞解析。
  async 脚本在它们完成下载完成后的第一时间执行,它处在 window 的load 事件之前。 这意味着有可能(并且很有可能)设置了 async 的脚本不会按照它们在 HTML 中出现的顺序执行。这也意味着他们可能会中断 DOM 的构建。设置async 的脚本的加载有着较低的优先级。他们通常在所有其他脚本加载之后才加载,而不阻塞 DOM 构建。然而,如果一个指定async 的脚本很快就完成了下载,那么它的执行会阻塞 DOM 构建以及所有在之后才完成下载的同步脚本。

2.预加载

Preloader 简介
  HTML 解析器在创建 DOM 时如果碰上同步脚本(synchronous script),解析器会停止创建
  DOM,转而去执行脚本。所以,如果资源的获取只发生在解析器创建DOM时,同步脚本的介入将使网络处于空置状态,尤其是对外部脚本资源来说,当然,页面内的脚本有时也会导致延迟。

  预加载器(Preloader)的出现就是为了优化这个过程,预加载器通过分析浏览器对 HTML文档的早期解析结果(这一阶段叫做“令牌化(tokenization)”),找到可能包含资源的标签(tag),并将这些资源的 URL收集起来。令牌化阶段的输出将会送到真正的 HTML 解析器手中,而收集起来的资源 URLs会和资源类型一起被送到读取器(fetcher)手中,读取器会根据这些资源对页面加载速度的影响进行有次序地加载。
  preload使开发者能够自定义资源的加载逻辑,且无需忍受基于脚本的资源加载器带来的性能损失。通过这一方法我们告诉浏览器开始获取某一特定资源,毕竟我们是作者,知道浏览器很快就会用到这一资源。
  你只需写上:

<link rel="preload" href="very_important.js" as="script">

  你可用as告诉浏览器你让他预加载文件的类型:

“script” “style” “image” “media” “document”

  忽略 as 属性,或者错误的 as 属性会使 preload 等同于 XHR 请求,浏览器不知道加载的是什么,因此会赋予此类资源非常低的加载优先级。
  关于预加载,我们已经有<link rel=“prefetch”>,而且浏览器支持情况还不错。但是他的作用是告诉浏览器加载下一页面可能会用到的资源,不是当前页。
  web 字体是较晚才能被发现的关键资源(late-discovered critical resources)中常见的一类 。有了 preload 这个标准,简单的一段代码就能搞定字体的预加载。

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

  需要注意的一点是:crossorigin 属性是必须的,即便是字体资源在自家服务器上,因为用户代理必须采用匿名模式来获取字体资源。

 
  参考文章:
 1. 关于Preload,你应该知道些什么
 2. 更快地构建 DOM: 使用预解析, async, defer 以及 preload

版权声明:本文为博主原创文章,未经博主允许不得转载。

使用WebGL 2.0更快地渲染 3D

发布人:Google 软件工程师 Zhenyao Mo WebGL JavaScript API 将硬件加速 3D 图形技术带入网络。Chrome 56 带来了对 WebGL 2.0 的支持,后...
  • jILRvRTrc
  • jILRvRTrc
  • 2017年03月21日 22:50
  • 68

如何更快地批量数据处理?

如何更快地批量数据处理? 如何更快地批量数据处理? 作者 xzh2000   在批量处理数据时,比如从上亿条记录的表中删除上1000万条数据,不仅要考虑对undo的影响,还要考虑对red...
  • zc2003
  • zc2003
  • 2012年06月09日 22:44
  • 300

51Nod-1319-跳跃游戏

ACM模版描述题解计算几何问题,这里的考点是三角形周长和边长的关系。众所周知,三角形周长大于任意一条边的两倍,那么只要大于最长的一条边长,那么一定可以构成三角形。接着,我们来分析在什么时候需要考虑是否...
  • f_zyj
  • f_zyj
  • 2016年09月06日 16:22
  • 339

51Nod-1981-如何愉快地与STL玩耍

ACM模版 描述 题解 线段树 + bitsetbitset + 二分 + 输入外挂 + 输出外挂 + Visual C++\text{Visual C++}……运气好可以卡过! ...
  • f_zyj
  • f_zyj
  • 2018年01月05日 19:15
  • 155

如何更快地读懂别人的代码

如果你能更快速的读懂别人的代码并且使用,那么你的开发效率将成倍增加, 因为很多东西你不用自己写,拿来就可以用,这样你就可以站在更高的高度 开发出更好的东西,那么我们该如何更快更好地阅读和理解别人的代码...
  • a2657222
  • a2657222
  • 2012年05月20日 18:03
  • 1735

Python:更快地遍历文件夹

【概述】说起,如何快速地遍历文件夹。或许,某人立刻就想到了线程池,几个worker并行处理遍历任务,总比一个worker的速度更快吧。当然,很多人不以为然。这要看单机性能是否够强悍,使你能够起更多的w...
  • Cataleya
  • Cataleya
  • 2015年04月15日 09:40
  • 3354

浏览器渲染页面的步骤

浏览器的渲染页面时,表示网站资源已经请求成功。 渲染时,大致的流程如下: (解析html以构建dom树->构建render树->布局render树->绘制render树) 具体的流程如下: 1...
  • longholidays
  • longholidays
  • 2017年03月14日 20:26
  • 1053

【浏览器渲染原理】 渲染树和页面渲染

【浏览器渲染原理】 渲染树和页面渲染 我们主要讨论以下列出的几个问题: 什么是渲染树?和DOM树及CSSOM树有什么关系? 渲染树是如何形成的? 浏览器渲染顺序问题 1.什么是渲染树?和DOM树及C...
  • qq243541844
  • qq243541844
  • 2016年07月16日 10:06
  • 1258

js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗

结论: 1. css加载不会阻塞DOM树的解析 2. css加载会阻塞DOM树的渲染 3. css加载会阻塞后面js语句的执行...
  • cristina_song
  • cristina_song
  • 2017年08月23日 22:04
  • 201

如何更好更快地完成设计之快速原型

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。 “一副好图胜过千言万语”,这句老话道出了用户界面原型的核心内容——使用各种可视化材料直接展示软...
  • jongde1
  • jongde1
  • 2018年02月02日 12:06
  • 25
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何更快地构建与渲染
举报原因:
原因补充:

(最多只允许输入30个字)