Web Performance List

前端优化的根本目的是为了有一个更好地用户体验的同时尽可能减少后端负载压力。即保证更少的加载时间、更快的首屏渲染、更流畅的用户交互。

Overview | 概述

• 2017-Production Web Apps Performance Study Q4/16 - Q1/17

• 2017-Frontend Performance Check-list For Production: In this article I will share with you my chick-list that I use to optimize my web pages after development. So feel free to leave a comment if you think I miss something.

• 2017-The State of the Web: A guide to impactful performance improvements.

• 400% 飞跃：Web 页面加载速度优化实战

• 移动端 HTML5 页面开发备忘录

• 钉钉的 H5 性能优化方案

• 解耦 —Hybrid H5 跨平台性思考

• Mobile JavaScript Apps: The Problem with the Mobile Web

• Speed Matters: Designing for Mobile Performance

• 2017-Tracking CPU with Long Tasks API: the old bottleneck for web performance used to be the network. But the new bottleneck for web performance is the CPU, and particularly the main thread.

• 2018-Front-End Performance Checklist: The only Front-End Performance Checklist that runs faster than the others

• Front-End Checklist: The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your site / HTML page to production.

Case Study | 案例分析

• 美团境外业务性能优化实践: 本文根据第 16 期美团点评技术线上沙龙 OnLine 演讲内容整理而成。

• 2018-蚂蚁金服如何把前端性能监控做到极致?: 将分享如何通过 Performance 相关的 API 准确的采集用户性能数据，并如何通过大数据计算加工最终产出用户性能分析产品，以及如何通过性能数据纵向衡量产品性能、发现性能瓶颈。

• 2017- 美团点评收银台前端可用性保障实践：本文主要讨论的是前端可用性相关话题，以在美团点评移动端网页收银台的实践为例，讲解收银台前端是如何保障可用性的。

Resource

• 小胡子哥的性能专栏

Benchmark | 性能评测与监控

• SiteSpeed: itespeed.io is a set of Open Source tools that helps make your web pages faster.

• stacks-cli : Check website stack from the terminal.

• WebPagetest

Page Metric | 页面评测

• Leveraging the Performance Metrics that Most Affect User Experience: But as you try to answer the question: how fast is my app?, you’ll realize that fast is a vague term. What exactly do we mean when we say fast? In what context? And fast for whom?

• 2014-FEX-7 天打造前端性能监控系统

• 2015- 使用 HMTL5 API 监控前端性能: 用户计时 API 可以在网页应用中测量两个预定义标记之间的性能。开发者仅仅需要分别定义测量的开始和结束标记。

• 前端性能：监控起步

• 2018-使用 RAIL 模型评估性能: RAIL 是一种以用户为中心的性能模型。每个网络应用均具有与其生命周期有关的四个不同方面，且这些方面以不同的方式影响着性能。

API Metric | 接口性能评测

• Locust: Define user behaviour with Python code, and swarm your system with millions of simultaneous users.

• wrk: wrk is a modern HTTP benchmarking tool capable of generating significant load when run on a single multi-core CPU.

• Apache JMeter: The Apache JMeter™ application is open source software, a 100% pure Java application designed to load test functional behavior and measure performance.

Code Coverage | 代码覆盖率

• Using the Chrome devtools new code coverage feature: This is an exciting feature that is useful both when working with JavaScript and CSS, so I thought I’d do a quick demo and explore how it can be helpful.