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