From 4deee860090d897ae9a24318216aa61c0d7d4065 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Mon, 12 Apr 2021 22:55:36 +0800 Subject: [PATCH] =?UTF-8?q?update:=20=E5=89=8D=E7=AB=AF=E6=80=A7=E8=83=BD?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=AE=A4=E7=9F=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{00-前言.md => 00-前端性能优化认知.md} | 108 +++++++++--------- 15-前端进阶/前端工程化.md | 25 ++++ 2 files changed, 80 insertions(+), 53 deletions(-) rename 13-前端性能优化/{00-前言.md => 00-前端性能优化认知.md} (70%) create mode 100644 15-前端进阶/前端工程化.md diff --git a/13-前端性能优化/00-前言.md b/13-前端性能优化/00-前端性能优化认知.md similarity index 70% rename from 13-前端性能优化/00-前言.md rename to 13-前端性能优化/00-前端性能优化认知.md index 5b14a95..c3f3251 100644 --- a/13-前端性能优化/00-前言.md +++ b/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、后端、网络等不是很熟悉的领域，学习起来就比较困难了。结合具体业务开发的应用场景时，却不知从何下手。因此，**我们需要要由点及面，学习全链路前端性能优化的知识体系和解决方案**。 -优化的工作是围绕前端的基本工作原理展开的，包括：客户端和服务器端建立连接、加载资源、解析资源并渲染。 - -上方图片的来源： - -- [The Cost Of JavaScript](https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e) - -- [[译]JavaScript 的时间消耗](https://github.com/dwqs/blog/issues/59) +在实际工作当中，前端性能优化往往比较繁杂，学习难点主要体现在以下几个方面：todo ### 优化标准 @@ -94,19 +98,6 @@ - 所有的事件处理，要在什么时间内完成，才能给用户良好的体验？ -### 收获 - -- 由浅入深：解读优化技术内幕。 - -- 流行+经典：了解技术背后的设计思想。 - -- 了解性能优化的关键环节，升级知识储备。 - - -- 理论+实践：掌握前端业界的流行且成熟的多种性能优化技术，脱颖而出。 - -- 了解大厂正在用的生产环境级别的高性能解决方案。 - ### 技术储备前提 - 掌握前端基础知识。 @@ -131,7 +122,18 @@ - 持续增长的移动端用户和电商业务。现在很多事情都是在移动端做的。 +### 收获 +- 由浅入深：解读优化技术内幕。 + +- 流行+经典：了解技术背后的设计思想。 + +- 了解性能优化的关键环节，升级知识储备。 + + +- 理论+实践：掌握前端业界的流行且成熟的多种性能优化技术，脱颖而出。 + +- 了解大厂正在用的生产环境级别的高性能解决方案。 ## 前端性能优化全过程 diff --git a/15-前端进阶/前端工程化.md b/15-前端进阶/前端工程化.md new file mode 100644 index 0000000..357685d --- /dev/null +++ b/15-前端进阶/前端工程化.md @@ -0,0 +1,25 @@ +### 前端实战开发的各个方面 + +前端实战开发包括很多方面，比如： + +- 跨终端技术体系 + +- 前端监控体系 + +- 多终端可视化页面搭建体系 + +- 前端性能优化体系 + +- 具体业务的架构设计 + +- 前端通道建设 + +- 搭建前端工程化技术体系 + +- 网站前端基础架构升级 + +- 研发日PV达千万的超大流量前端项目 + +- 在 W3ctech、D2、FEDAY等技术大会中发表主题演讲 + +- 分享前端性能优化方面的经验和见解 \ No newline at end of file