2020版前端性能检查项来了!
“Web性能是一个很狡猾的野兽”。当我们面对性能
时,我们怎么真正知道我们该怎么做?是昂贵的JavaScript
,缓慢的web字体传送
,笨重的图片
或 缓慢的渲染
?探索tree-shaking
、作用域提升(Scope Hoisting)
、代码分割(Code Splitting)
、Server Push
、Client Hints
、HTTP/2
和Service Workers
等是否值得?
最重要的是,我们从哪里开始提升性能,并且怎么建立一个长期的性能文化。
性能问题不是一个纯技术概念,它从可访问性(Accessibility)到搜索引擎优化的使用的各个方面。性能必须是可度量、可监控和持续精炼的。
作者在文中列出了性能优化的几个步骤,每一步都有一些详细的讲解。大致如下:
- 准备:规划和指标(Getting Ready: Planning And Metrics)
- 设置实际可行的目标(Setting Realistic Goals)
- 定义好环境(Defining The Environment)
- 资源优化(Assets Optimizations)
- 构建优化(Build Optimizations)
- 传输层优化(Delivery Optimizations)
- HTTP/2
- 测试和监控(Testing And Monitoring)
前端性能优化大致的几点不会变化太大,随着前端工程化构建的方式改变,会有一些细节的改变,建议阅读全文,并做深入思考,并落地到自己的项目中去。
文中的检查项,提供了PDF、Word和Pages格式的文件,文中有下载链接。