让你页面速度飞起来 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: 这里找 --> 浏览器的一个请求从发送到返回都经历了什么?

2-1-1

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

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

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

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

第3章 图片相关的优化

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

第5章 懒加载与预加载

第6章 重绘与回流

第7章 浏览器存储

第8章 缓存优化

第9章 SSR(服务端渲染)

Last Updated: 6/29/2018, 3:23:37 PM