主站性能优化项目 Review

[cssmagic]

项目周期	2017.03～2017.06
所在公司	百姓网
角色	项目负责人 / 前端架构师

概述

百姓网在 2017 年春季发起的全站性能优化项目。CTO 只给出最终目标——在年中时间点，桌面和移动两个网站的 “四大核心页面” 的两大指标（首屏渲染、完全加载）分别 ≤1s 和 ≤4s。这是一个非常激进的目标，而具体达成路径需要自行探索和实践。

这不是一个单纯的前端项目，而是一个涉及前端和后端、横跨多个技术团队（架构组 + 业务开发 + 商业化）、持续数月的大型项目。

职责

• 作为项目负责人，完成目标拆解，确定优化思路。
• 优化性能指标监控工具，开发 A/B 测试功能，实现精细化的性能评估。
• 带领前端架构组完成多轮前端性能优化；组织近十人的虚拟团队，与常规工作并行，推进项目整体目标。

业绩

• 项目通过 CTO 验收。

项目回顾

---

注：

• 由于无法在用户端无侵入地获取 “首屏渲染” 数据，项目的实际指标采用 FirstPaint 换算。

• 近年来，随着开发者观念的升级、浏览器观察能力的提升、前端应用形态的变化，网页性能指标也在不断演化。本项目所选取的指标仅代表当时特定条件下的决策，并不一定适合现今的项目。

---

---

➡️ 前端性能优化

---

➡️ 后端性能优化一期

（内容略）

---

➡️ 广告相关优化

（内容略）

---

➡️ 列表查询系统优化

（内容略）

---

➡️ 后端性能优化二期

（内容略）

---

---

相关链接

• 技术分享：
  • 《前端性能优化血泪史》
• 开源项目：
  • cssmagic/simple-web-perf —— 一个精简的网页性能数据上报工具，为主流移动浏览器优化。

---

© 经验分享 · 日拱一卒   |   Star = 收藏   |   Watch = 订阅