一般来讲,工程师熟悉某个系统会只要搞清楚其数据结构和数据流转过程基本足够了,但从商业的角度来看,先后端工程师都应该关注的另外一个重要维度是系统性能,纯技术角度来看性能能够认为是系统的响应速度(实际上还能够认为是执行效率等),而从用户角度来看性能就是使用体验。web
页面性能差的直接后果是用户须要等待,而等待,尤为是不肯定要多长时间的等待会给用户带来焦虑,为了尽早的结束这种焦虑,除非访问网页是刚需,用户一般会选择直接关闭页面。从实际数据来看,性能差是页面高跳出率的重要缘由之一。算法
为了搞清楚页面性能对业务目标的影响,诸如 Yahoo、Google、Amazon 等科技公司都投入了很多资源去研究和优化,好比下面是 ThinkWithGoogle 运用神经网络分析 2017 年 1100 万广告落地页加载速度和页面跳出率关系所获得的结论:后端
结论显而易见:越快越好,少便是多。浏览器
实际上,最近几年来大型互联网公司在页面性能优化研发中产出了很多工具和文档,方便工程师给网站作性能分析和优化。缓存
其中文档方面比较经典的当属三本书:性能优化
而工具则很是多,尤为是 2015 年开始爆发的各类应用性能管理(APM,如 New Relic)工具,对工程师来讲,比较经典易用的有:网络
要清晰、准确的衡量网页性能,咱们先要定义页面性能,如何定义页面性能?数据结构
性能优化工做处在不一样阶段,或者业务场景不一样,上面不一样定义视角的适用性是不一样的,也有把上面 3 种衡量方法加权求和获得综合的性能指数。工具
要想真正开始作优化,须要搞清楚从发起请求到浏览器渲染页面并呈现给用户的过程当中有哪些关键环节,好在现代浏览器提供的 Navigation Timing API 已经把这个过程标准化,方便咱们作性能指标的计算,以下图:性能
举例来讲上面提到的首字节时间和彻底加载时间能够用以下公式计算:
首字节时间 = responseStart - navigationStart
彻底加载时间 = loadEventEnd - navigationStart
至于首次渲染时间,准确的计算方式须要结合录屏,篇幅缘由,这里不作展开。
PressOne 是基于区块链的内容分发公链,而 https://press.one 则是项目入口,目前功能还比较简单,主要包括帐户建立、用户登陆、三方帐号绑定、用户主页、内容签名等功能。首页是任何网站的门户,确保其访问速度和体验的重要性不言而喻,而 press.one 给笔者的初体验除了新奇还包括慢,新用户加载页面平均须要 6s 以上,即便内容渲染以前有加载中提示,仍是有明显的等待感。
虽然 press.one 是基于 angular 开发的单页应用,适用于传统页面的大部分性能优化方法一样适用,下面结合 LightHouse 对 press.one 首页作简单的性能分析,并列出行之有效的优化行动清单。
LightHouse 能够独立安装使用,也能够在 Google Chrome 中使用,由于集成到了开发者工具的 Audits 面板中,使用方法比较简单,建议直接阅读文档。
下面是使用 Google Chrome 作性能诊断的结果:
百分制的性能指数结果是 18 分,3G 网络下的彻底可交互时间长达 20S,一般到 10S 用户基本都觉得网站坏掉了,可见优化的空间是巨大的。
LightHouse 列出的优化手段(Opportunities)和可能的缘由诊断(Diagnostics)都比较直观:
若是上面的优化手段都落地实施,从新评估性能指数大几率能够达到及格线。
结合瀑布流分析,咱们也不难发现更进一步的优化点,关键资源加载链条(Critical Request Chain)太长了,以下图:
要开始首次渲染(对应以下瀑布流图右侧蓝色的竖线)除主文档外,咱们还须要额外下载 5 个 JS 文件,1 个 CSS 文件:
关键资源加载链条太长的问题怎么优化呢?
关键资源加载链条的问题解决以后,从新评估的性能指数大几率能达到 80 分。
那么接下来呢?理论上看起来性能优化是无止境的,实际上任何一个领域花 20% 的时间能达到 80% 的目的(好比把页面首次渲染时间降到 3s 之内),而后能够收手去解决更重要的问题,固然时间容许的话,有追求的工程师会不断的问本身,这是我能作到的极致么?
继续往下优化则要从页面渲染的角度去考虑,毕竟咱们已经尽量快的把渲染页面所需的各类资源交给了浏览器,怎么让它更快、更流畅的渲染出可交互的页面是接下来须要重点考虑的。而渲染速度跟 DOM 节点的组织、JS 的组织、JS 和 DOM 交互的优化都有关系,篇幅缘由,能够单独写文章介绍。
以上,但愿对你有用。