Backend
Business
DataScienceAI
Frontend
InfoSecurity
Infrastructure
Product
ProgrammingLanguage
SoftwareEngineering

Web-Optimization-CheatSheet

返回目录

Web 性能优化清单

web performance optimization

用户体验是。良好的用户体验往往能有效提升产品的竞争力

需要注意的是,性能优化并不仅仅是与技术相关,还会与你的产品逻辑,交互设计

性能的首要评判要素即是速度

Strangeloop 在对众多的网站做性能分析之后得出了一个著名的 3s 定律“页面加载速度超过 3s,57%的访客会离开”,可见页面加载速度对于互联网产品的重要性。速度在 Google、百度等搜索引擎的 PR 评分中也占有一定的比例,会影响到网站的 SEO 排名。

性能优化是个系统性工程,涉及到后端、前端、移动端、系统网络及各种基础设施,每一块都需要做各自的性能优化。

过早,或者过度的优化同样是万恶之源

性能优化是个系统性工程,涉及到后端、前端、移动端、系统网络及各种基础设施,每一块都需要做各自的性能优化。1. 产品逻辑与用户行为

产品逻辑过于复杂、功能交互过于丰富、产品设计过于绚丽、页面元素素材过多等都会影响产品性能。

  1. 基础网络

中国的基础网络是世界上最复杂的基础网络,国内的网络运营商众多且各自为政,互联互通成本很高。

  1. 代码及应用

开发语言瓶颈、代码质量及系统架构等都会影响系统性能,常见的代码及应用问题有:

架构不合理。业务发展超越架构支撑能力而导致系统负荷过载,进而导致出现系统奔溃、响应超时等现象。另外不合理的架构如:单点、无 cache、应用混部署、没有考虑分布式、集群化等也都会影响性能。

  1. 移动端环境

移动互联网时代,移动端环境的复杂性对产品的性能影响也很大,比如用户的设备类型、设备性能、操作系统类型、系统版本及网络类型(电信/移动/联通,Wi-Fi/4G/3G/2G)等。

本清单参考了 Front-End Performance Checklist 2018,更多 Web 性能优化相关的文章参考 Web Performance Reference 或者性能优化章节

性能指标与评测方式

当我们系统的分析性能问题时,可以通过以下指标来衡量:

Web 端:首屏时间、白屏时间、可交互时间、完全加载时间等。 首屏时间是指从用户打开网页开始到浏览器第一屏渲染完成的时间,是最直接的用户感知体验指标,也是性能领域公认的最重要的核心指标。

首屏时间 = DNS 时间 + 建立连接时间 + 后端响应时间 + 网络传输时间 + 首屏页面渲染时间

移动端:Crash 率、内存使用率、FPS(Frames Per Second, 每秒传输帧数)、端到端响应时间等。 Native 相比于 H5 在交互体验方面有更多的优势,FPS 是体现页面顺畅程度的一个重要指标,另外移动端开发同学还需要关注 App 进程的 CPU 使用率、内存使用率等系统性能指标。端到端响应时间是衡量一个 API 性能的关键指标,比纯后端响应时间更全面,它会受到 DNS、网络带宽、网络链路、HTTP Payload 等多个因素的影响。端到端响应时间是 DNS 解析时间、网络传输时间及后端响应时间的总和。

后端:响应时间(RT)、吞吐量(TPS)、并发数等。 后端系统响应时间是指系统对请求做出响应的时间(应用延迟时间),对于面向用户的 Web 服务,响应时间能很好度量应用性能,会受到数据库查询、RPC 调用、网络 IO、逻辑计算复杂度、JVM 垃圾回收等多方面因素影响。对于高并发的应用和系统,吞吐量是个非常重要的指标,它与 request 对 CPU、内存资源的消耗,调用的外部接口及 IO 等紧密关联。

关键渲染路径

WebAssembly

浏览器这几年在 Chrome 的带动下,性能飞速发展,但毕竟其核心原理没有变化,性能始终难以达到原生 App 的水平,这部分是很有可能出现大的变化的,一个可能的方向就是浏览器变成虚拟机,前端代码编译为字节码,通过这种方式来将性能提升一个等级,虽然还是难以达到原生 App 的水平,但已经能够满足绝大部分应用的性能需求,类似于 Java 对比 C/C++一样。

大概在 2008 年的时候,提出了 JIT 的概念,它是使 JavaScript 运行更快的一种手段(JIT,内联缓存和隐藏类)之一,通过监视代码的运行状态,把 hot 代码(重复执行多次的代码)进行优化。通过这种方式,可以使 JavaScript 应用的性能提升很多倍。

和 JS 需要解释执行不同的是,WebAssembly 字节码和底层机器码很相似可快速装载运行,因此性能相对于 JS 解释执行大大提升。

也就是说 WebAssembly 并不是一门编程语言,而是一份字节码标准,需要用高级编程语言编译出字节码放到 WebAssembly 虚拟机中才能运行.

他的优点就是:

体积小:由于浏览器运行时只加载编译成的字节码,一样的逻辑比用字符串描述的 JS 文件体积要小很多; 加载快:由于文件体积小,再加上无需解释执行,WebAssembly 能更快的加载并实例化,减少运行前的等待时间;