性能优化 | 姜波

Canvas Ci/Cd Css Docker Docker Compose Dockerfile Express Flutter Git Gitlab Gulp Html Item2 Js Koa Mock Mongodb Mysql Nginx Node Pm2 React Socket Vue Webpack 填坑微前端性能优化架构设计正则算法设计原则设计模式面试

Docker

docker常用命令与配置

docker环境搭建

Node

Node技术方案设计

PM2使用

Koa2中间件及原理

Express中间件及原理

HTTP核心模块

Node使用Socket.io

Node使用MongoDB

nginx使用

Koa应用

Express应用

Node基础

前端

JavaScript填坑进阶篇

JavaScript填坑常用方法篇

JavaScript填坑基础篇

性能优化面试

渲染优化

传输优化

资源优化

代码优化

浏览器渲染原理和关键渲染路径

性能指标和优化目标

JavaScript数据结构与算法(leetcode)

JavaScript设计模式

JavaScript设计原则

JavaScript基础面试

JavaScript Web API

JavaScript基础

webpack面试

webpack进阶

React面试

React原理

React高级特性

React基础

Vue面试

Vue原理

Vue高级特性

webpack使用与常用配置

Flutter安装

mock数据实现

JavaScript正则表达式

JavaScript函数式编程

JavaScript高级

JavaScript&QA工程师

gulp安装与使用

CSS3高级

canvas核心

CSS3核心

ES6核心

jQuery框架封装

JavaScript模块化

HTML5核心

前端架构

微前端实现方式对比

技术债务填补与崩溃预防

架构前期准备

如何保证架构的质量

软件设计原则与分层

前端架构的前世今生

微前端的架构设计

微前端的业务划分方式

微前端的技术拆分方式

软技能

mac配置item2主题

团队协作

© 2019 - 2021 姜波苏ICP备20040891号

性能优化面试

星期四，九月 10 日，2020 年

从输入URL到页面加载显示完成都发生了什么

Browser Process

UI Thread：搜索 or URL => 搜索引擎or请求的站点

@ 姜波

2 分钟阅读

渲染优化

星期四，九月 10 日，2020 年

移动端图标SVG

从PNG到IconFont

多个图标一套字体，减少获取时的请求数量和体积
矢量图形，可伸缩
直接通过CSS修改样式（颜色、大小等）

从IconFont到SVG

@ 姜波

2 分钟阅读

传输优化

星期四，九月 10 日，2020 年

启用压缩Gzip

@ 姜波

1 分钟阅读

资源优化

星期三，九月 9 日，2020 年

资源的压缩与合并

为什么要压缩与合并

减少http请求数量
减少请求资源大小

HTML压缩

@ 姜波

2 分钟阅读

代码优化

星期三，九月 9 日，2020 年

JS开销和如何缩短解析时间

代码解决方案

Code splitting代码拆分，按需加载
Tree shaking代码减重

减少主线程工作量

@ 姜波

2 分钟阅读

浏览器渲染原理和关键渲染路径

星期二，九月 8 日，2020 年

浏览器的渲染流程

JavaScript => Style => Layout => Paint => Composite

浏览器构建对象模型

@ 姜波

1 分钟阅读

性能指标和优化目标

星期二，九月 8 日，2020 年

性能指标

加载

理解加载瀑布图
基于HAR存储与重建性能信息
速度指数（Speed Index）
重要测量指标
- Speed Index页面渲染速度
- TTFB网络请求耗时
- 页面加载时间
- 首次渲染

响应

@ 姜波

2 分钟阅读

Image text

Image text

Image text

Image text