update: 前端性能优化认知

13-前端性能优化/00-前端性能优化认知.md

@@ -1,49 +1,58 @@
-## 前言
+## 前端性能优化认知
 
-### 前端实战开发的各个方面
 
-前端实战开发包括很多方面，比如：
 
-- 跨终端技术体系
-
-- 前端监控体系
-
-- 多终端可视化页面搭建体系
-
-- 前端性能优化体系
-
-- 具体业务的架构设计
-
-- 前端通道建设
-
-- 搭建前端工程化技术体系
-
-- 网站前端基础架构升级
-
-- 研发日PV达千万的超大流量前端项目
-
-- 在 W3ctech、D2、FEDAY等技术大会中发表主题演讲
-
-- 分享前端性能优化方面的经验和见解
 ### 什么是前端性能优化
 
 通常来讲，前端性能优化是指：从用户开始访问网站到整个页面完整地展现出来的过程中，通过各种优化策略和优化方法，让页面加载得更快，让用户的操作相应更及时，给用户更好的使用体验。
 
-### 学习前端性能优化的难点
+优化是在做什么：
+
+
+
+![](http://img.smyhvae.com/20210115-1507.png)
+
+如上图所示，优化工作是围绕前端的基本工作原理展开的，包括：**客户端和服务器端建立连接、加载资源、解析资源并渲染**。
+
+上方图片的来源：
+
+- [The Cost Of JavaScript](https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e)
+- [[译]JavaScript 的时间消耗](https://github.com/dwqs/blog/issues/59)
+
 
-我们在网上找到的博客，有很多都只是对CSS、JS技术本身的优化，一旦涉及到App、后端、网络等不是很熟悉的领域，学习起来就比较困难了。结合具体业务开发的应用场景时，却不知从何下手。因此，我们需要要由点及面，学习全链路前端性能优化的知识体系和解决方案。
 
 ### 性能优化的重要性（程序员角度）
 
-**大家都知道性能优化很重要，但是落实到具体，怎么去优化**？这就需要我们深入去了解前端技术背后的原理，才能总结出相应的优化方案，而且需要多年的经验积累。
+当领导问：“**为什么网页访问这么慢**？”我们不能只是回答“**网络不好**”这么简单，网络不可能一直都不好。
 
-当领导问：“为什么网页访问这么慢？”我们不能只是回答“网络不好”这么简单，每个程序员如果想要成长，就不能回避“性能优化”这个话题。很多人写了多年的代码，一直在构建样式、写业务逻辑。但是平凡的程序员之路，何时才是尽头呢？怎么才能从团队中脱颖而出呢？如何区分出平凡程序员/大牛程序员/架构师的分水岭呢？
+每个程序员如果想要成长，就不能回避“性能优化”这个话题。很多人写了多年的代码，一直在构建样式、写业务逻辑。但是平凡的程序员之路，何时才是尽头？前端职业发展的瓶颈在哪儿？怎么才能从团队中脱颖而出？如何区分出平凡程序员/大牛程序员/架构师的分水岭？
 
-公司评价一个程序员的价值，不是加班越多越好，也不是代码写得越多越好，而是看他是否能解决其他人解决不了的一些技术难题或者瓶颈。
+职场晋升时，我们也要想一想：大部分人都在写业务代码，和别人相比，我的核心竞争力在哪里？除了**技术深度、前端工程化、综合素质**之外，还有其他的吗？**性能优化**，绝对是不能忽视的一方面。而且它是贯穿于开发和维护的的全过程。
 
-掌握正确和主流的优化方案，是非常重要的。我们需要学习一些主流的前端性能优化技术方案，掌握性能优化技术，提升Web性能；进而到达前端技术圈的上游，提高自己的核心竞争力。
+前端工程化是侧重于**提效**，具体包括编译打包发布流程、物料中心、组件化等；而前端性能优化是侧重于**体验**。
+
+公司评价一个程序员的价值，不是加班越多越好，也不是代码量越多越好，而是看他**是否能解决其他人解决不了的一些技术难题或者瓶颈**。
+
+**大家都知道性能优化很重要，但是落实到具体，怎么去优化**？这就需要我们深入去了解前端技术背后的原理，学习一些主流的前端性能优化技术方案，掌握性能优化技术，提升Web性能，才能总结出相应的优化方案，而且需要多年的经验积累；进而到达前端技术圈的上游，提高自己的核心竞争力。
+
+### 前端性能优化面试
+
+性能优化是前端面试的必考问题，面试者在回答这个问题时，大致情况如下：
+
+- 70% 的人上来就说减少合并资源、减少请求、数据缓存这些优化手段。
+
+- 15% 的人会提到需要在 DevTools 下先看看首屏时间，围绕首屏来做优化。
+
+- 10%的人会提到需要接入一个性能平台来看看现状，诊断一下。
+
+- 而只有 5% 的人会从前端性能体系来系统考虑性能优化。
+
+面试官期待的是你在什么场景下，遇到了什么性能问题，围绕什么样的性能指标，采取了哪些性能优化手段，最后取得了什么样的结果，而不仅仅是直接说采取了哪些优化手段。
+
+比如说，“**为什么首页打开慢**？”	面试官期待的是，前端能和后端一样，通过查日志和数据就能定位问题，而不是停留在猜测层面。但在实际当中，能做到这点的前端同学并不多。
+
+那么，前端有没有这样的工具呢？有，那就是性能监控平台。平台上面有各个业务的性能指标及其对应场景下的性能标准，一旦遇到性能问题，就能直接判断当前性能数据有没有问题，然后提示问题是出在前端、后端，还是网络层。
 
-职场晋升时，我们也要想一想：大部分人都在写业务代码，和别人相比，我的核心竞争力在哪里？除了技术深度、综合素质之外，还有其他的吗？性能优化，绝对是不能忽视的一方面。而且它是贯穿于开发和维护的的全过程。
 ### 性能优化的意义
 
 
@@ -72,18 +81,13 @@
 
 
 
+## 如何学习性能优化
 
-### 优化是在做什么
+### 学习难点
 
-![](http://img.smyhvae.com/20210115-1507.png)
+我们在网上找到的文章，有很多都只是对CSS、JS技术本身的优化，一旦涉及到App、后端、网络等不是很熟悉的领域，学习起来就比较困难了。结合具体业务开发的应用场景时，却不知从何下手。因此，**我们需要要由点及面，学习全链路前端性能优化的知识体系和解决方案**。
 
-优化的工作是围绕前端的基本工作原理展开的，包括：客户端和服务器端建立连接、加载资源、解析资源并渲染。
+在实际工作当中，前端性能优化往往比较繁杂，学习难点主要体现在以下几个方面：todo
-
-上方图片的来源：
-
-- [The Cost Of JavaScript](https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e)
-
-- [[译]JavaScript 的时间消耗](https://github.com/dwqs/blog/issues/59)
 
 
 ### 优化标准
@@ -94,19 +98,6 @@
 
 - 所有的事件处理，要在什么时间内完成，才能给用户良好的体验？
 
-### 收获
-
-- 由浅入深：解读优化技术内幕。
-
-- 流行+经典：了解技术背后的设计思想。
-
-- 了解性能优化的关键环节，升级知识储备。
-
-
-- 理论+实践：掌握前端业界的流行且成熟的多种性能优化技术，脱颖而出。
-
-- 了解大厂正在用的生产环境级别的高性能解决方案。
-
 ### 技术储备前提
 
 - 掌握前端基础知识。
@@ -131,7 +122,18 @@
 
 - 持续增长的移动端用户和电商业务。现在很多事情都是在移动端做的。
 
+### 收获
 
+- 由浅入深：解读优化技术内幕。
+
+- 流行+经典：了解技术背后的设计思想。
+
+- 了解性能优化的关键环节，升级知识储备。
+
+
+- 理论+实践：掌握前端业界的流行且成熟的多种性能优化技术，脱颖而出。
+
+- 了解大厂正在用的生产环境级别的高性能解决方案。
 
 
 ## 前端性能优化全过程

15-前端进阶/前端工程化.md

@@ -0,0 +1,25 @@
+### 前端实战开发的各个方面
+
+前端实战开发包括很多方面，比如：
+
+- 跨终端技术体系
+
+- 前端监控体系
+
+- 多终端可视化页面搭建体系
+
+- 前端性能优化体系
+
+- 具体业务的架构设计
+
+- 前端通道建设
+
+- 搭建前端工程化技术体系
+
+- 网站前端基础架构升级
+
+- 研发日PV达千万的超大流量前端项目
+
+- 在 W3ctech、D2、FEDAY等技术大会中发表主题演讲
+
+- 分享前端性能优化方面的经验和见解