diff --git a/13-前端面试/02-性能优化/00-前言.md b/13-前端面试/02-性能优化/00-前言.md new file mode 100644 index 0000000..c4cef3f --- /dev/null +++ b/13-前端面试/02-性能优化/00-前言.md @@ -0,0 +1,132 @@ +## 前言 + +### 前端实战开发的各个方面 + +前端实战开发包括很多方面,比如: + +- 跨终端技术体系 + +- 前端监控体系 + +- 多终端可视化页面搭建体系 + +- 前端性能优化体系 + +- 具体业务的架构设计 + +- 前端通道建设 + +- 搭建前端工程化技术体系 + +- 网站前端基础架构升级 + +- 研发日PV达千万的超大流量前端项目 + +- 在 W3ctech、D2、FEDAY等技术大会中发表主题演讲 + +- 分享前端性能优化方面的经验和见解 + +### 什么是前端性能优化 + +通常来讲,前端性能优化是指:从用户开始访问网站到整个页面完整地展现出来的过程中,通过各种优化策略和优化方法,让页面加在得更快,让用户的操作相应更及时,给用户更好的使用体验。 + +随着时间的推移,如果一个网站由于各种原因导致心梗越来越差,以至于用户每打开一个页面都要等待很长时间,甚至出现加载失败的情况,那么,不仅新用户不会沉淀下来,老用户也会纷纷离去,最终导致产品的加速衰败。 + +而且网站的加载快慢,最产品收入有着直接的影响。数据表明:网页加载时间在5秒内的网站比加载时间为19秒的网站,广告收入会增加近一倍。也就是说,网站或者App的性能直接关系到产品的用户增长和收入增长。 + +正因为如此,我们才需要通过性能优化的技巧,并结合其他的技术手段来不断提高网站和App的用户体验,从而助力公司的业务增长;同时,我们也可以借此提升自己的技术实力,这对个人的职业成长也会以后很大的帮助。 + +### 学习前端性能优化的难点 + +我们在网上找到的博客,有很多都只是对CSS、JS技术本身的优化,一旦涉及到App、后端、网络等不是很熟悉的领域,学习起来就比较困难了。结合具体业务开发的应用场景时,却不知从何下手。因此,我们需要要由点及面,学习全链路前端性能优化的知识体系和解决方案。 + +## 前端性能优化包括哪些方面 + +### 1、静态资源优化 + +静态资源优化包括html、css、js、图片等资源的性能优化。包括: + +- html、css、js的具体优化策略 + +- 图片的应用场景和使用 + +- 资源文件的优化:比如文件压缩合并策略、打包方案、版本号更新方案 + +- 前端工程化工具等。 + + +### 2、页面渲染架构设计及相关的技术方案选型 + +按照技术方案的分类,包括: + +- 前后端分离技术 + +- SPA单页应用 + +- BigPipe + +- 同构直出 + +- PWA + +- 页面加载策略 + +- 接口服务调优、接口缓存策略 + +- 大型网站背后的实际性能优化案例 + +- 前端组件化、模块化,加速业务开发 + +### 3、原生App优化、混合开发优化 + +- 浏览器的整体优化方案。比如导航条、登录态、滚动条优化等。 + +- 前端缓存策略和优化 + +- H5静态资源请求代理的技术原理 + +- H5离线技术,达到页面秒开的目标 + +- 混合式开发解决方案 + +- RN、小程序、flutter等 + +### 4、服务端与网络优化 + +- CDN 和 DNS 优化 + +- 如何减少 http 请求数、减少cookie大小 + +- nginx缓存配置和优化 + +- 开启和配置 gzip 压缩 + +- 如何开启全站 https + +- 升级 Http2.0 的好处和方法 + + +### 5、研发流程优化 + +- 技术调用的方法 + +- 前后端接口约定、加快前后端接口联调 + +- 前端自动化测试 + +- 自动化部署和上线 + +- 从研发的整体流程层面梳理出提升研发效率的方式和方法。 + + +### 6、全链路质量监控体系建设 + +主要是对性能优化的结果进行衡量、打分、考核: + +- 上线前,页面质量及时检测 + +- 上线后,页面性能和错误监控 + +- 线上运行时,页面的可用性监控 + +- 愿生App的性能和错误监控 diff --git a/13-前端面试/03-网友面经/20180116-博客园:一年经验初探阿里巴巴前端社招.md b/13-前端面试/03-面试题积累/20180116-博客园:一年经验初探阿里巴巴前端社招.md similarity index 100% rename from 13-前端面试/03-网友面经/20180116-博客园:一年经验初探阿里巴巴前端社招.md rename to 13-前端面试/03-面试题积累/20180116-博客园:一年经验初探阿里巴巴前端社招.md diff --git a/13-前端面试/02-面试题积累/ES6.md b/13-前端面试/03-面试题积累/ES6.md similarity index 100% rename from 13-前端面试/02-面试题积累/ES6.md rename to 13-前端面试/03-面试题积累/ES6.md diff --git a/13-前端面试/02-面试题积累/ES6:模块化的使用和编译环境.md b/13-前端面试/03-面试题积累/ES6:模块化的使用和编译环境.md similarity index 100% rename from 13-前端面试/02-面试题积累/ES6:模块化的使用和编译环境.md rename to 13-前端面试/03-面试题积累/ES6:模块化的使用和编译环境.md diff --git a/13-前端面试/02-面试题积累/JS相关.md b/13-前端面试/03-面试题积累/JS相关.md similarity index 100% rename from 13-前端面试/02-面试题积累/JS相关.md rename to 13-前端面试/03-面试题积累/JS相关.md diff --git a/13-前端面试/02-面试题积累/JavaScript高级面试:前言.md b/13-前端面试/03-面试题积累/JavaScript高级面试:前言.md similarity index 100% rename from 13-前端面试/02-面试题积累/JavaScript高级面试:前言.md rename to 13-前端面试/03-面试题积累/JavaScript高级面试:前言.md diff --git a/13-前端面试/02-面试题积累/MVVM.md b/13-前端面试/03-面试题积累/MVVM.md similarity index 100% rename from 13-前端面试/02-面试题积累/MVVM.md rename to 13-前端面试/03-面试题积累/MVVM.md diff --git a/13-前端面试/02-面试题积累/http.md b/13-前端面试/03-面试题积累/http.md similarity index 100% rename from 13-前端面试/02-面试题积累/http.md rename to 13-前端面试/03-面试题积累/http.md diff --git a/13-前端面试/02-面试题积累/z-web安全.md b/13-前端面试/03-面试题积累/z-web安全.md similarity index 100% rename from 13-前端面试/02-面试题积累/z-web安全.md rename to 13-前端面试/03-面试题积累/z-web安全.md diff --git a/13-前端面试/02-面试题积累/z-其他.md b/13-前端面试/03-面试题积累/z-其他.md similarity index 100% rename from 13-前端面试/02-面试题积累/z-其他.md rename to 13-前端面试/03-面试题积累/z-其他.md diff --git a/13-前端面试/02-面试题积累/z-推荐文章.md b/13-前端面试/03-面试题积累/z-推荐文章.md similarity index 100% rename from 13-前端面试/02-面试题积累/z-推荐文章.md rename to 13-前端面试/03-面试题积累/z-推荐文章.md diff --git a/13-前端面试/02-面试题积累/z-计算机网络.md b/13-前端面试/03-面试题积累/z-计算机网络.md similarity index 100% rename from 13-前端面试/02-面试题积累/z-计算机网络.md rename to 13-前端面试/03-面试题积累/z-计算机网络.md diff --git a/13-前端面试/02-面试题积累/函数.md b/13-前端面试/03-面试题积累/函数.md similarity index 100% rename from 13-前端面试/02-面试题积累/函数.md rename to 13-前端面试/03-面试题积累/函数.md diff --git a/13-前端面试/02-面试题积累/变量提升的题目.md b/13-前端面试/03-面试题积累/变量提升的题目.md similarity index 100% rename from 13-前端面试/02-面试题积累/变量提升的题目.md rename to 13-前端面试/03-面试题积累/变量提升的题目.md diff --git a/13-前端面试/02-面试题积累/异步.md b/13-前端面试/03-面试题积累/异步.md similarity index 100% rename from 13-前端面试/02-面试题积累/异步.md rename to 13-前端面试/03-面试题积累/异步.md diff --git a/13-前端面试/02-面试题积累/我的面试经历 by 千古壹号.md b/13-前端面试/03-面试题积累/我的面试经历 by 千古壹号.md similarity index 100% rename from 13-前端面试/02-面试题积累/我的面试经历 by 千古壹号.md rename to 13-前端面试/03-面试题积累/我的面试经历 by 千古壹号.md diff --git a/13-前端面试/02-面试题积累/清单.md b/13-前端面试/03-面试题积累/清单.md similarity index 100% rename from 13-前端面试/02-面试题积累/清单.md rename to 13-前端面试/03-面试题积累/清单.md diff --git a/13-前端面试/02-面试题积累/网友面经.md b/13-前端面试/03-面试题积累/网友面经.md similarity index 100% rename from 13-前端面试/02-面试题积累/网友面经.md rename to 13-前端面试/03-面试题积累/网友面经.md diff --git a/13-前端面试/02-面试题积累/虚拟DOM.md b/13-前端面试/03-面试题积累/虚拟DOM.md similarity index 100% rename from 13-前端面试/02-面试题积累/虚拟DOM.md rename to 13-前端面试/03-面试题积累/虚拟DOM.md diff --git a/13-前端面试/02-面试题积累/面经链接推荐.md b/13-前端面试/03-面试题积累/面经链接推荐.md similarity index 100% rename from 13-前端面试/02-面试题积累/面经链接推荐.md rename to 13-前端面试/03-面试题积累/面经链接推荐.md diff --git a/13-前端面试/02-面试题积累/面试技巧 by 千古壹号.md b/13-前端面试/03-面试题积累/面试技巧 by 千古壹号.md similarity index 100% rename from 13-前端面试/02-面试题积累/面试技巧 by 千古壹号.md rename to 13-前端面试/03-面试题积累/面试技巧 by 千古壹号.md diff --git a/13-前端面试/02-面试题积累/面试题整理 by 千古壹号.md b/13-前端面试/03-面试题积累/面试题整理 by 千古壹号.md similarity index 100% rename from 13-前端面试/02-面试题积累/面试题整理 by 千古壹号.md rename to 13-前端面试/03-面试题积累/面试题整理 by 千古壹号.md