Web性能优化

标签: 性能 javascript | 发表时间:2017-03-14 19:18 | 作者:Kyxy
出处:https://segmentfault.com/blogs

1 Web性能优化

Web网站的性能细线在几个方面:

  • 网站首页加载速度

  • 动画的流畅度

通过分析浏览器的渲染原理、资源对渲染的影响,得出优化网站性能的办法。

2 查看性能的工具

Chrome的 Timeline面板录制网页加载的过程,分析记录浏览器渲染过程中每个过程的耗时。

2.1 录制时注意事项

  1. 禁用浏览器缓存: Network Tab下的 disable cache

  2. 关闭Chrome扩展或者启用隐身模式

  3. 根据使用场景,模拟真实的网络加载情况: Network Tab下的 throttling下拉按钮

2.2 Timeline工具的各个组成

  • Main Thread中可以看到页面渲染的整个过程及耗时

图片描述

3 浏览器渲染原理

图片描述

3.1 DOM树构建

DOM树的构建过程

  1. 根据HTML文档的内容,根据标签进行分词 Token

  2. 根据 Token生产对应的节点 Node

  3. 将节点根据嵌套关系组合为一棵对象节点树 DOM

浏览器解析文档对象模型 DOM增量进行的,无需等待整个HTML文档加载完毕,便可以开始解析 DOM

CSSOM解析会阻塞 HTML Parser;JavaScript脚本文件 执行会阻塞HTML解析; CSS、JavaScript、Images和Font等静态资源的异步加载的,渲染页面与CSS解析与JavaScript执行会有相互的依赖

图片描述
图片描述

3.2 CSSOM树的构建

CSSOM的解析依赖于 选择器,选择器的匹配是从内到外的。所以选择器嵌套层次越深,匹配的时间会越长。

CSSOM只解析可视部分 body标签中的内容,将所有匹配的元素共同构建一个 CSSOM树, 从根节点一次向下,所有节点的属性向下继承

图片描述

3.3 RenderTree树的构建

利用DOM和CSSOM组合构建生成RenderTree,对应 Recaculate Style

RenderTree中包含所有渲染网页必须的节点

无需渲染的节点不会被添加到RenderTree中,如 headdisplay:none;的节点

visibility: hidden;的节点会添加到RenderTree中

图片描述

3.4 Layout

Layout利用渲染树的信息,计算渲染树中所有节点在页面上的 位置和大小

类似绘画中各个元素位置摆放及尺寸规划

会引起页面重新Layout的操作: 所有改变节点位置和大小的操作

  • 屏幕旋转

  • 浏览器视窗改变

  • 与大小、位置相关的CSS属性

  • 增加与删除DOM元素

Layout操作比较耗时,对于动画中频繁引起Layout的操作(元素位置移动), 最好使用transform代替,可以使用GPU进行动画处理(将Layout重绘在GPU完成)

图片描述

viewport

如果页面 body元素设置的宽度为 100%,并且根元素 html没有明确设置宽度绝对值, 此时 body元素的宽度等于 viewport的宽度 vw

  • 使用 meta标签可以设置浏览器 viewport的尺寸。 <meta name="viewport" content="width=device-width">

  • device-width为浏览器的理想视口(屏幕的物理分辨率)

  • 在移动端,如果不设置 device-width,默认 viewport宽度为980px, 导致文字很小,需要放大

viewport相当于可视内容布局的容器

3.5 Paint

填充Layout中的具体内容和样式,将Layout生成的区域填充为最终显示在屏幕上的像素

3.6 总结

  1. 浏览器通过 GET请求获取网页HTML,同时将增量解析HTML文档,生成 DOM

  2. 解析 DOM节点树时,对于需要加载的资源 全部执行异步加载,但是 CSS的解析、 JavaScript的执行与 font文件的下载会阻塞HTML Parser

  3. 局部 DOM树与 CSSOM树构建完成后, 立即组装 RenderTree进行渲染

图片描述

4 资源对渲染的影响

页面中加载的资源主要包括: cssjs脚本文件和 font字体与 images静态资源,不同资源类型对渲染的影响不同。

4.1 浏览器渲染页面的时机

增量解析解析 DOM树,并且完成相应 CSSOM解析后(RenderTree依赖于 DOM树, CSSOM树),开始直接渲染页面。

4.2 CSS加载会阻塞初次渲染

图片描述

4.3 非关键资源

对于首页无关的样式,需要使用适当的方式避免其阻塞初次渲染:

  • document.write()会阻塞页面初次渲染

  • 使用 media=print媒体查询,虽然加载样式表,但只针对打印时才应用该样式,不会阻塞初次渲染。

  • 通过 DOMAPI引入CSS,可以避免阻塞。

  • CSS中 <link rel="preload" href="index_print.css" as="style" onload="this.rel='stylesheet'">

图片描述

图片描述

图片描述

图片描述

4.4 JS文件

图片描述

  • 输出:先输出 Hello,10s之后再输出 World。JS脚本 执行会阻塞 HTML Parser,但是 HTML Parser是增量解析的, 并且CSS样式的解析会阻塞JS脚本执行,当解析完 Hello时,生成对应 DOM节点,并且完成其 CSSOM,直接开始渲染 Hello节点。

  • 脚本执行完成后再解析后续的 World

JS脚本执行会阻塞HTML Parser;

CSS解析会阻塞JS脚本执行:js可能会读、写CSSOM

虽然JS会阻塞HTML Parser解析; 但是浏览器的资源异步加载机制 Preload会异步加载 head标签内的资源

图片描述

图片描述

图片描述

4.5 非关键JS资源解析阻塞的优化方案

  • 将JS资源文件放在文档底部,延迟JS的执行(但是存在必须解析完HTML才能加载JS资源,相较于 head标签中加载会慢)

  • 使用 defer延迟脚本执行: scipt标签的 defer属性,脚本会在HTML文档解析完毕后再开始执行; defer的脚本在执行时严格按照HTML文档中出现的顺序执行---优势可以提早加载JS资源,但是解析完HTML再执行

  • 使用 async异步执行脚本:

    • script标签有 async属性时,脚本执行不会阻塞HTML Parser,只要脚本加载完毕便开始执行

    • async的脚本,不会严格按照在HTML文档中的顺序执行

    • async适用于无依赖的外部独立资源(注意不要错误操作状态)

图片描述
图片描述

4.6 font字体文件

  • font字体文件会阻塞内容渲染
    图片描述

4.7 图片资源

图片资源的加载不会阻塞渲染,但是最好在HTML标签中设置图片的高度和宽度,可以在 Layout时留出图片渲染的空间,避免页面的抖动

5 优化关键渲染路径

优化目标是将下列三个指标压缩到最低:

  • 关键资源数---初次渲染时依赖的资源

  • 关键资源的体积最小---压缩文件或图片

  • 关键资源网络来回数---网络传输资源消耗很多时间

图片描述
图片描述
图片描述
图片描述

6 其余优化过程

  • HTTP2可以在传输HTML页面后向客户端推送页面内包含的资源

  • 减少资源的大小:压缩

  • 减少请求的来回时间

图片描述
图片描述

相关 [web 性能优化] 推荐:

Web性能优化

- - SegmentFault 最新的文章
Web网站的性能细线在几个方面:. 通过分析浏览器的渲染原理、资源对渲染的影响,得出优化网站性能的办法. Chrome的 Timeline面板录制网页加载的过程,分析记录浏览器渲染过程中每个过程的耗时. 关闭Chrome扩展或者启用隐身模式. 根据使用场景,模拟真实的网络加载情况:. 2.2 Timeline工具的各个组成.

Web性能优化:prefetch, prerender

- - Harttle Land
本文从预加载的角度介绍如何优化页面载入和渲染的性能,在展开内容之前先了解一下浏览器显示页面的过程: 首先是DNS解析,然后建立TCP连接,接着下载HTML内容以及资源文件,最后才是整个页面的渲染. 图片来源: https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o/present?slide=id.gc03305a_0106.

web前端性能优化进阶路

- - 阿里巴巴(中国站)用户体验设计部博客
Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践. 可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化 黄金法则,以及大名鼎鼎的优化大师 Steve Souders. 本文并非一篇讨论性能优化技术方法的文章,而更多的是对中文站 搜索List页面持续两年多的前端性能优化实践的 思路总结.

Java Web 服务性能优化实践

- - 博客 - 伯乐在线
来源: IBM developerworks. 简介: 本文介绍如何提升 Java Web 服务性能,主要介绍了三种方法:一是采用 Web 服务的异步调用,二是引入 Web 服务批处理模式,三是压缩 SOAP 消息. 重点介绍在编程过程中如何使用异步 Web 服务以及异步调用和同步调用的差异点. 本文还示范了如何在项目中使用以上三种方法,以及各种方法所适合的应用场景.

Web性能优化之图片优化

- - 极客521 | 极客521
HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过一半的流量和时间都用来下载图片. 从性能优化的角度看,图片也绝对是优化的热点和重点之一,Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段,本文覆盖了Web图片优化的方方面面,从基本的图片格式选择、到尚未被广泛支持的响应式图片均有所提及.

HTTP/2 与 WEB 性能优化(一)

- - JerryQu 的小站
2013 年 11 月份开始,我的博客开始支持了 SPDY 协议( 详见这里),也就是 HTTP/2 的前身. 今年二月份,Google 宣布将在 16 年初放弃对 SPDY 的支持,随后 Google 自家支持 SPDY 协议的服务都切到了 HTTP/2. 今年 5 月 14 日,HTTP/2 以 RFC 7540 正式发布.

HTTP/2 与 WEB 性能优化(二)

- - JerryQu 的小站
在「 HTTP/2 与 WEB 性能优化(一)」这篇博客中,我主要写了 HTTP/2 中的 Server Push 给 WEB 性能优化带来的便利,今天继续来聊一聊 HTTP/2 其他方面的改变. 我们知道,HTTP/2 并没有改动 HTTP/1 的语义部分,例如请求方法、响应状态码、URI 以及头部字段等核心概念依旧存在.

Web性能优化:What? Why? How? - 木的树

- - 博客园_首页
Web性能黄金准则:只有10%~20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上.   web性能对于用户体验有及其重要的影响,根据著名的`2-5-8`原则:. 当用户在2秒以内得到响应,会感觉系统的响应非常快. 当用户在2-5秒之内得到响应,会感觉系统的响应速度还可以.

H5 缓存机制浅析 移动端 Web 加载性能优化

- - SegmentFault 最新的文章
腾讯Bugly特约作者:贺辉超. H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性. 离线存储(也可称为缓存机制)是其中一个非常重要的特性. H5 引入的离线存储,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. H5 应用程序缓存为应用带来三个优势:. 离线浏览 用户可在应用离线时使用它们.

优化无止境,爱奇艺中后台 Web 应用性能优化实践

- - IT瘾-tuicool
爱奇艺视频生产智能云平台系统在今年进行了一次 重大升级,前端团队也趁此机会将 底层技术架构从三年前的 Arm.js(内部MVC框架)+ Java BFF + Velocity 模板完全切换到了 Vue.js + Node.js BFF 的技术栈. 新的前端应是一个拥有超过 十个业务模块的单页面应用,每个模块已经通过路由懒加载进行了拆分,同时公共的第三方依赖也拆分到了单独的 Vendor 文件.