forked from qianguyihao/Web
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6850609
commit 5917104
Showing
22 changed files
with
132 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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的性能和错误监控 |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.