页面性能的基础因素 - 《Designing for Performance》

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: 页面性能的基础因素最近读这本小书Designing for Performance,突然想到之前一篇网络性能评价只写了一半,在这里也里也算一个做个补充。

页面性能的基础因素

最近读这本小书Designing for Performance,突然想到之前一篇网络性能评价只写了一半,在这里也里也算一个做个补充。

考虑页面性能可以从两种场景,第一个场景也是因素最多的场景,即首次访问。第二个场景则是重复访问,缓存将起决定性作用。

不同的页面类型的性能优化策略也是不一样的,比如富文本页面,富多媒体页面,响应式设计的页面,游戏页面等。

浏览器也提供了很多工具和插件,比如Chrome DevTools, YSlow和PageSpeed Insight都有相应的插件,可以为开发者提供页面优化建议,这是最为简捷的方式。我在这里也主要使用Chrome进行分析,部分会配合WebPageTest工具。

要优化页面性能,了解浏览器如何渲染页面是非常重要的。以下是浏览器加载的整套流程,特别强调了对首次打开性能影响很大的网络加载流程:
BasicsOfPageSpeed
其中如果HTTPS,建立连接的过程中还需要进行身份认证。

通过Chrome Inspect中的网络也可以看到整个加载数据量,以及耗时:
BasicOfPageSpeed_net
上图是新浪首页的数据,共发出415请求,收到6.5MB的数据,主要是图片大多,果然是个大站!

点开可以看到细节的数据耗时:
BasicOfPageSpeed_net2
上面可以看到为请求建立与服务器的连接的开销还是比较大的。特别是在移动网络下,DNS解析,错误重连的成本都非常高,浏览器厂商也都会针对性的进行优化。

无论是以前的Pipeline, 和现在的Http2都可以达到连接复用的目的,也可以省掉这部分的开销。

Chrome的开发者工具提供了Audit, 可以提供网络相关优化和页面性能优化的建议, 比如:
BasicOfPageSpeed_Audit

在Chrome Web Store里安装YSlow和PageSpeed Insights插件,就可以进一步分析页面的性能,以及提供相关的建议。下图是YSlow的显示页面组件的内容:
BasicOfPageSpeed_YSlow_Weight

在后面Statistics页签会显示资源占比,以及启用缓存(下次访问)时需要发送的请求数和资源大小:
BasicOfPageSpeed_YSlow_Stat
可惜这只是理想,新浪有些资源的url带有随机数,也就是每次请求的url并不相同,会导致http cache无法使用,会重新加载。

最终新浪首页的性能显示不怎么样,YSlow给出了D,附上一堆建议,点来Grade页签就可以看到。

PageSpeed Insights会给出相类似的建议,不过个人还是建议使用PageSpeed Insights, 它给出的建议会更加符合当前业界的标准。

影响加载的主要因素

除了TTFB这种主要由网络环境和后台服务器决定的因素外,页面设计,以及包括User Agent(客户端,如浏览器)可能影响的因素包括:

  • 连接管理 (连接数和复用)
    在HTTP下本来有一个Pipeline的机制,用来达到一个HTTP连接来并发获取多个资源,但是服务器支持的少。
    另一种方法是Keep alive的常连接。即User Agent尝试保持若干个连接,完成一个资源的加载后,这个连接可以继续用来加载另一个资源。这样就没有重新建立连接的开销。
    而HTTP 2最大的特色就是让每一个连接支持多个资源的并发请求。

  • 请求数
    减少请求数,就是要减少资源请求。比如将多张小图合成一张Sprite图片就是典型的做法。也不是请求数越少越好,极端的将所有资源都放到页面里,就是灾难了。还要从浏览器解析、渲染页面的行为上来定义。比如head中的CSS加载会阻塞页面解析,如果使用body中的<link rel="stylesheet">,区分出可显示共域的CSS, 页尾的CSS属生,让浏览器只在需要时加载相应的CSS反而能获得更好的用户体验。参考:The future of loading CSS

  • 请求大小
    因为网络里上行和下行的速度差异,请求的大小也会对页面性能有所影响, 所以要避免不必要的请求头信息,其中Cookie最为明显。首先Cookie的存储、检索和提取就要耗费性能,再加上Cookie的应用往往是针对某个域名下或者路径下的所有请求,会导致性能的影响被放大。

  • 资源大小
    如果资源较小,当然收取数据的时间就会减少,后续的处理也会更加有效率。比如JS可以使用一些工具简化,图片也可以根据不同的应用,选择不同的图片格式(算法),或者压缩比。特别是值得注意的是一些图片常常含有一些不需要的信息,比如EXIF,地理位置信息,自定义调色板等,有时会很大,也可以使用一些工具进行简化。之前遇到过一些图片网站里用户上传的图片超大的情况,就是因为图片里保留了一些Photoshop的冗余信息。参考: Image Optimization
    HTML5新的响应式图片更是允许根据客户端(User Agent)的屏幕大小,而选择不同的图片。

  • HTTP Cache
    网络层的缓存模块,负责管理可缓存的资源,尽量复用缓存中已经有的可用资源。最快的请求就是不发请求,善于使用Http Cache,可以大大优化除首次打开外页面性能。但是一些网站遇到一些缓存问题时,常常简单的为url增加一个随机数,让缓存失效,这样既让客户端的整体缓存命中率下降(缓存了很多不必要的资源),强烈建议不要使用这种方法。
    Http Cache的实现各个浏览器并不相同,命中率也有差异。对前端开发者也是不可见的,如果需要更加细粒度的控制缓存,可以使用H5提供的存储功能,比如Local Storage, App Cache等。参考:管好页面缓存

关键渲染路径 (Critical Rendering Path)

开始加载页面,到实际显示出内容,有一个最小的路径,即关键渲染路径。尽量缩短这条路径才能真正优化到用户的体验。
最核心的流程是浏览器收到页面数据后解析为DOM (Document Object Model), 加载CSS文件,生成CSSOM,计算各个元素的排版数据生成Layout Tree, 结合者CSSOM生成Render Tree,再交由渲染模块完成渲染显示出页面内容。
这过程中包括很多的并发行为,因为串行完成的性能不可能达到用户体验的要求。

  • CSS
    在这个路径主要是注意一些会阻塞页面解析的元素,如CSS。前面提到CSS文件放到head和body中的方式。

  • JavaScript
    直接出现在页面中的JavaScript会阻塞页面解析, 所以需要将一些JavaScript可以改为异步加载和执行。

定义:可操作时间 (Time To Interactivity)
可操作时间是指从开始加载页面到用户可以在页面进行操作(如搜索,点击链接等)的时间。
通过优化关键渲染路径可以减少可操作时间,包括以下方法:

  • 异步加载内容
  • 优先加载可见内容
  • 遵循CSS/JS加载的最佳实践 (看YSlow和PageSpeed Insights的报告)
  • 缓存资源
  • 优先保证主要用户行为尽早可用

比如下面这个Chrome DevTools显示出一个Long Frame, 从前面一个Frame这里花去了很长的时间,这一般代表卡顿的出现 (只有9fps)。
BasicOfPageSpeed_Jank
如果使用PageSpeed Insights,可以得到关于Blocking CSS的建议。

目录
相关文章
|
7月前
|
Web App开发 监控 JavaScript
|
Web App开发 数据可视化 前端开发
测试篇:性能监测之Performance、LightHouse 与性能 API
测试篇:性能监测之Performance、LightHouse 与性能 API
920 0
测试篇:性能监测之Performance、LightHouse 与性能 API
|
7月前
|
Web App开发 监控 前端开发
Web Performance Optimization:前端性能优化全方位指南
【4月更文挑战第6天】本文是关于Web Performance Optimization的指南,重点讲述如何优化前端性能以提升用户体验和网站业务表现。关键性能指标包括First Contentful Paint (FCP)、First Meaningful Paint (FMP)、Largest Contentful Paint (LCP)、First Input Delay (FID)和Cumulative Layout Shift (CLS)。优化策略涉及资源压缩、网络配置、代码架构改进、交互渲染优化及性能监控。
1390 0
|
7月前
|
关系型数据库 MySQL 测试技术
通过performance_schema定量分析系统瓶颈
目前在系统里面, 我们可以通过perf 或者 pt-pmp 汇总堆栈的方式来查看系统存在的热点, 但是我们仅仅能够知道哪些地方是热点, 却无法定量的说这个热点到底有多热, 这个热点占整个访问请求的百分比是多少? 是10%, 还是40%, 还是80%?所以我们需要一个定量分析系统瓶颈的方法以便于我们进...
119 0
|
Oracle 关系型数据库 测试技术
如何对Exadata的I/O进行性能校准测试
前段时间看到MACLEAN LIU分享了一篇不错的关于Exadata I/O性能校准的文章:Calibrate测试Exadata IO,这篇文章基本涵盖到Exadata I/O性能校准的方法。
1530 0
|
关系型数据库 MySQL 测试技术
通过performance_schema 定量分析系统瓶颈
目前在系统里面, 我们可以通过perf 或者 pt-pmp 汇总堆栈的方式来查看系统存在的热点, 但是我们仅仅能够知道哪些地方是热点, 却无法定量的说这个热点到底有多热, 这个热点占整个访问请求的百分比是多少? 是10%, 还是40%, 还是80%? 所以我们需要一个定量分析系统瓶颈的方法以便于我们进行系统优化. 本文通过Performance_schema 来进行定量的分析系统性能瓶颈
158 0
|
传感器 运维
故障检测指标的贡献分析(Reconstruction Based Contribution,RBC)新方法
故障检测指标的贡献分析(Reconstruction Based Contribution,RBC)新方法
故障检测指标的贡献分析(Reconstruction Based Contribution,RBC)新方法
|
传感器 人工智能 供应链
浅谈lot对世界的影响
通信行业的发展和嵌入式设备的激增带来了对物联网(IoT)的愿景,从而带来了一个处处都有传感器的世界,在这个世界里,我们日常环境接触到的事物越来越多地具有计算、传感和通信功能。这些功能有望彻底改变人与物之间的交互。
312 0
|
传感器 安全 物联网
lot对生活的影响
在大信息时代,我们身边充斥着各种各样的物联网产品。小到空调,冰箱,洗衣机等各种家具用品,大到智能工厂,智能交通等涵盖到我们的衣食住行,人的生老健康。物联网无处不在。这对于21世纪新青年来说既是机遇也是挑战。
422 0
|
图形学 内存技术 Java
带你读《计算机组成与体系结构:性能设计(英文版·原书第10版)》之二:Performance Issues
本书以Intel x86体系结构和ARM两个处理器系列为例,将当代计算机系统性能设计问题与计算机组成的基本概念和原理紧密联系起来,介绍了当代计算机体系结构的主流技术和最新技术。本书作者曾13次获a得美国教材和学术专著作者协会颁发的年度最佳计算机科学教材奖。目前,他是一名独立顾问,为众多计算机和网络制造商、软件开发公司以及政府前沿研究机构提供服务。