前言
面试官：从url输入到页面展现发生了什么？ 这是一道非常经典的面试题，包含前端大部分的基础知识点。
- 第一步 浏览器通过DNS查找该域名的 IP 地址
- 第二步 浏览器根据解析得到的IP地址与服务端建立TCP连接
- 第三步 TCP连接建立成功后，浏览器向服务器发送http请求
- 第四步 服务器接收http请求，并返回响应
- 第五步 浏览器对该响应进行解码，解析html生成dom tree
- 第六步 如果页面中有css，则解析css生成cssom tree
- 第七步 结合dom tree + cssom tree生成render tree
- 第八步 布局。
- 第九步 绘制。
- 第十步 整个过程结束之后，关闭TCP连接 本文便从这前9步对前端性能优化手段做了全面的总结和文章汇总。
- 第一步到第四步：主要涉及网络层的优化
- 第四步到第九步：主要涉及渲染层的优化
总览
性能优化总览图
网络层性能优化
DNS解析优化
TCP连接优化
TCP连接数优化
- 第 15 题：简单讲解一下 http2 的多路复用
- 浅析HTTP/2的多路复用
- HTTP/2 相比 1.0 有哪些重大改进？
- Introduction to HTTP/2
- 深入研究：HTTP2 的真正性能到底如何
- 怎样把网站升级到http/2
- Fundebug网站升级HTTP/2，真的变快了！
TCP连接过程优化
请求发送响应过程优化
静态资源
减少请求包体积大小
TreeShaking
- Webpack:Tree Shaking
- Reduce JavaScript Payloads with Tree Shaking
- Tree-Shaking性能优化实践 - 实践篇
- Tree-Shaking性能优化实践 - 原理篇
- 你的Tree-Shaking并没什么卵用
- 你的 Tree-Shaking 真的起作用了吗？
- 基于Tree-shaking的多平台Web代码打包实践
- 十：CSS Tree Shaking
- Tree shaking CSS Modules
代码分割
实战
- Webpack:Code Splitting
- Code-Splitting
- Webpack (v4) Code Splitting using SplitChunksPlugin
- Webpack 大法之 Code Splitting
- 用React.lazy和Suspense优化React代码打包
- 项目不知道如何做性能优化？不妨试一下代码分割
- 如何使用 splitChunks 精细控制代码分割
- Webpack 的 Bundle Split 和 Code Split 区别和应用
- Webpack 理解 Chunk
- CSS代码分割：MiniCssExtractPlugin
原理
- Webpack:Under The Hood
- 重学webpack4之原理分析
- webpack打包原理 ? 看完这篇你就懂了 !
- 简单易懂的 webpack 插件原理分析
- [万字总结] 一文吃透 Webpack 核心原理
代码压缩混淆
API
按需请求数据
- 是什么让我放弃了Restful API？了解清楚后我全面拥抱GraphQL！
- 直接干掉 RESTful：GraphQL 是真的香！
- 深度解析GraphQL：澄清你对GraphQL的误解
- 后端服了！这通操作让接口提速了 60%
网络链路优化
CDN优化
- 境外业务性能优化实践
- 如何优雅的使用 CDN 优化博客
- 【第119期】CDN 带来这些性能优化（进阶必知）
- 网站性能提升之CDN缓存优化
- CDN实践 | 优化CDN不用愁，从全链路入手就会找到答案
- 超详解析 | CDN HTTPS优化实践，全网一分钟生效
- 一文彻底了解 CDN 加速原理
- CDN 是什么鬼？一文细说 CDN
自动化部署实践
- 前端工程之CDN部署
- 大公司里怎样开发和部署前端代码？
- 大公司里怎样开发和部署前端代码？(附实践方案)
- 工程化能力必备技能，前端 jenkins 自动化部署持续集成
- 前端部署的发展历程
- 大厂如何开发和部署前端代码？淘宝8年案例解读
- 前端赋能业务 - Node实现自动化部署平台
- 手把手教你用 Github Actions 部署前端项目
- 从零开始 Node实现前端自动化部署
- 前端自动化部署的深度实践
- 你不知道的前端项目自动化部署（实战教学，超详细教程）
减少请求数
静态资源
缓存优化
原理
实战
- 通过 Node.js 实践彻底搞懂强缓存和协商缓存
- 通过 Node.js 小示例学习浏览器缓存策略
- 前端缓存最佳实践
- Webpack 持久化缓存实践
- 基于webpack解决持久化缓存
- 【第835期】Webpack 的静态资源持久缓存
- Service Worker：让你的 Web 应用牛逼起来
- 用 Service Worker 实现前端性能优化
- webpack Code Splitting 与 浏览器持久化缓存
- 技术干货分享：前端缓存如何助力性能大提升
- 移动端web缓存，优化第二次访问速度
合并资源
懒加载&预加载
JS
- [译] React 16.6 懒加载(与预加载)组件
- 用React.lazy和Suspense优化React代码打包
- React的未来：与Suspense共舞
- 【实战】动态表单之表单组件的插件式加载方案
- 高级工程师的晋升之路：如何用 JavaScript 打造十亿级的应用
- webpack 的异步加载原理及分包策略
CSS
- 有一种优化，叫Preload
- 用 preload 预加载页面资源
- 好家伙，这些写 CSS 的新姿势你还不知道？
- 一文详解 CSS-in-JS
- CSS-in-JS：一个充满争议的技术方案
- 深入浅出 CSS-in-JS 工作原理
图片
API
API结果缓存
- 前端 api 请求缓存的 5 种方案
- React hooks中swr的原理和源码解析
- 【第1795期】SWR：最具潜力的 React Hooks 数据请求库
- 浏览器缓存库设计总结（localStorage/indexedDB）
- 鹅厂原创 | 前端持久化 -- evercookie
- H5 页面列表缓存方案
- JavaScript中的缓存API
- Cache API -- 异步请求的缓存控制
- Axios 如何缓存请求数据？
- React 中后台系统多 Tab 页缓存功能实现（keep-alive）
- 「React缓存页面」从需求到开源（我是怎么样让产品小姐姐刮目相看的
- 如何实现 React 中的状态自动保存？
防抖节流
- 一起围观由React Hooks防抖引发的面试翻车现场
- 震惊！拉动一下控制台大小，后台请求数量爆炸，竟是没做好防抖与节流！！
- 手撕代码系列（三）：一石二鸟探寻防抖和节流的多种实现思路
- Lodash 防抖和节流是如何实现的
- 从搜索系统来聊聊防抖和节流
- 7 个角度吃透 Lodash 防抖节流原理
- 函数的防抖和节流是个啥？？？
渲染层性能优化
DOM构建优化
dom构建阻塞优化
原生DOM
原理
- 从JS的阻塞角度谈谈浏览器渲染原理
- Deciphering the Critical Rendering Path
- 前端开发这么多年，你真的了解浏览器页面渲染机制吗？ | 技术头条
- critical-rendering-path
- 阻塞渲染的 CSS
- async、defer与DOMContentLoaded的执行先后关系
- async vs defer attributes
- 加快构建 DOM: 使用预解析, async, defer 以及 preload
实战
- 浏览器渲染原理 （二）html中的css、javascript、dom之间的解析和相互阻塞关系
- 原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的
- js和css的加载造成阻塞
- How the browser renders a web page? — DOM, CSSOM, and Rendering
虚拟DOM
- React推出并发模式：可中断渲染、指定加载顺序、并行处理多状态
- 虚拟 DOM 到底是什么？
- 虚拟DOM如何进化为真实DOM
- Virtual DOM 不是必需品
- Virtual DOM 是纯粹的挥霍
- 【第1365期】漫谈前端性能，突破React应用瓶颈
- 如何理解 Virtual DOM 的 “快”
- 从 React 历史的长河里聊虚拟DOM及其价值
- 从各大跨平台技术说开去，我们真的需要虚拟 DOM 吗？
- 增量 DOM 与虚拟 DOM 的对比使用
- 干货：深入了解React 渲染原理及性能优化
- 【第1530期】React Fiber架构
- 【第1963期】探索 React 的内在 — Fiber & Algebraic Effects
- 解析 React 性能利器 — Fiber
- 走进 React Fiber 的世界
- 六个问题助你理解 React Fiber
- 这可能是最通俗的 React Fiber 打开方式
- 漫谈 React Fiber
- 新兴前端框架 Svelte 从入门到原理
按需渲染
- 再谈前端虚拟列表的实现
- 浅说虚拟列表的实现原理
- 当后端一次性丢给你10万条数据, 作为前端工程师的你,要怎么处理?
- 手把手封装React 按需渲染组件
- [开源推荐]：一个轻量的React懒加载组件，冰冰用了都说6~
- 如何实现一个高度自适应的虚拟列表
- 前端虚拟列表的实现原理
- 「前端进阶」高性能渲染十万条数据(虚拟列表)
- 从头开始，彻底理解服务端渲染原理
- 如何实现高性能的在线 PDF 预览
- 轻雀长列表性能优化实践
- ali-react-table：高性能 React 表格组件
- react-virtualized
SSR(服务端渲染)
- React 中同构（SSR）原理脉络梳理
- 从头开始，彻底理解服务端渲染原理
- 大前端时代，如何做好C 端业务下的React SSR？
- Rax SSR 完成6倍 React 渲染性能 提升!
- React 服务器渲染 SSR，你缺的不是教程，是产品级完整案例
- 【第1560期】前端同构渲染的思考与实践
- 【第2102期】Vue SSR 性能优化实践
- 快速在你的vue/react应用中实现ssr(服务端渲染)
- React服务端渲染与同构实践
- 为什么需要使用服务端渲染，SSR项目实战篇
- react服务端渲染: cookie如何透传给后端，后端如何设置cookie
- 大势所趋：流式服务端渲染
- React的未来：服务端组件
- 「干货」你需要了解的六种渲染模式
- CSR、SSR、NSR、ESR傻傻分不清楚，一文帮你理清前端渲染方案！
CSSOM构建优化
重绘重流优化
- reflow和repaint引发的性能问题
- 一个拖拽卡顿问题引发出对setTimeOut的探索
- 经典性能优化面试题: 从一个 Transform 动画引发的关于浏览器渲染的深度思考
- 浏览器极致性能调优之——浏览器合成与渲染层优化
