web-speed.md

让你页面速度飞起来 Web前端性能优化

Vue-SSR + PWA 新技术，快速突破Web页面性能的瓶颈

第1章 课程简介

前端性能优化点：网络层面、构建层面、服务端层面、服务器渲染层

• 资源的合并与压缩
• 图片编解码原理和类型选择
• 浏览器渲染机制
• 懒加载与预加载
• 浏览器存储
• 缓存机制
• PWA
• Vue-SSR

前端性能优化原理：作用及原理、如何与真实业务场景结合、理论结合实践、量化分析

第2章 资源合并与压缩

2.1 http请求的过程及潜在的性能优化点

• 理解减少http请求数量和减少请求资源大小两个优化要点
• 掌握压缩和合并原理
• 掌握通过在线网站和fis3两种实现压缩与合并的方法

什么是Web前端？

Web前端本质上市一种GUI软件，本可以直接借鉴其他GUI系统架构设计方法。但Web前端有特点特别。

传统CS架构GUI软件的开发与部署过程：资源压缩打包发布成apk，然后客户端解压安装使用，其所有资源均在本地。

Web前端的开发与部署过程：资源打包上传至webserver或CDN，客户端浏览下载渲染展现使用，其所有资源均在线上。

Q: 我们如何寻找优化点呢？ A: 这里找 --> 浏览器的一个请求从发送到返回都经历了什么？

请求过程中一些潜在的性能优化点：

• dns是否可以通过缓存减少dns查询时间？
• 网络请求的过程走最近的网络环境？
• 相同的静态资源是否可以缓存？
• 能否减少http请求的大小？
• 减少http请求数量
• 服务端渲染

深入理解http请求的过程是前端性能优化的核心

这个深入理解是基于现有业务的深入理解，这个前提也是基于对业务的深入理解，以及对业务中所用技术站的理解。

第3章 图片相关的优化

第4章 css 和 js 的装载与执行

第5章 懒加载与预加载

第6章 重绘与回流

第7章 浏览器存储

第8章 缓存优化

第9章 SSR（服务端渲染）