# Web 性能优化资源合集（持续更新）
# 调试工具
# 指标
# memory
- The Breakpoint Ep. 8: Memory Profiling with Chrome DevTools 视频
- 解决内存问题
- 使用 chrome-devtools Memory 面板
- js 内存泄漏场景、如何监控以及分析
- 一个 Vue 页面的内存泄露分析
# Performance
- 如何使用 Timeline 工具
- 狙杀页面卡顿 —— Performance 工具指北
- 如何读懂火焰图？
- 使用 chrome-devtools Performance 面板
- 脱离 996，Chrome DevTools 面板全攻略！！！
- Tools for Web Developers chrome 官网
- Chrome 开发者工具中文文档
- 前端性能优化之利用 Chrome Dev Tools 进行页面性能分析
- Improving Load Performance - Chrome DevTools 101
- 今天,搞定 Chrome 运行时的性能、内存问题 太实用了
# 监控
- 如何优雅处理前端异常？
- 《大型网站性能监测、分析与优化》
- 研究首屏时间？你先要知道这几点细节
- 使用 chrome-devtools Network 面板
- Measure Resource Loading Times
- Chrome DevTools 中的这些骚操作，你都知道吗？
# 网络
# 资源请求
- Loading Performance
- 在服务器架构中，集群、负载均衡、分布式有什么区别吗？ - baby mini 的回答 - 知乎 https://www.zhihu.com/question/20695647/answer/219141748
- Fast load times
- [译] 关于渐进式 Web 应用，你应该知道的一切
- Beginner’s Guide: What is a Domain Name and How Do Domains Work?
- DNS 解析的过程是什么，求详细的？ - wuxinliulei 的回答 - 知乎 https://www.zhihu.com/question/23042131/answer/66571369
- 访问 CSDN, Proxy negotiation 时间过长问题的复现分析及解决
- Resource Hints - What is Preload, Prefetch, and Preconnect?
- Resource Hints W3C 规范
- Preload, Prefetch And Priorities in Chrome
- web 性能优化(二)：针对 TCP 传输过程中的堵塞
- “非主流”的纯前端性能优化
- 浏览器中的网络
- prefetch 和 preload 及 webpack 的相关处理
- Preload, Prefetch and Preconnect: Speed Up your Website with Resource Hints
- CDN 原理及为自己的网站部署
- Nginx+Tomcat 集群环境搭建
- 大型网站分布式架构（七）—— Nginx 整合 Tomcat 实现动静分离
- KeepAlive，你优化了吗
- HTTP keep-alive 二三事
- HTTP Keep-Alive 模式
# 资源下载
- 资源合并与压缩
- 首屏加载速度优化
- 如何”有效“减小 js 包的体积
- How to use Webpack Bundle Analyzer video
- 探索 HTTP 传输中 gzip 压缩的秘密
- 有没有简单的方法来查看 Chrome 中的压缩量？
- 如何使用 GZIP 来优化你的网站
- 你知道 Chrome Network ，Size 和 Time 为什么有两行参数吗？
- HTTP 压缩，浏览器是如何解析的
- vue cli 加载速度优化
- 如何使用 GZIP 来优化你的网站
- 探索 HTTP 传输中 gzip 压缩的秘密
- 你真的了解 gzip 吗？
- gZip compression with Node Express.js server explained. Enable Text Compression. 视频
- Tomcat 启用 GZIP 压缩，提升 web 性能
- http 数据协商
- 简单聊聊 GZIP 的压缩原理与日常应用
# 资源渲染
- 浅谈script标签的defer和async
- SSR 、CSR、预渲染、同构等首屏优化技术要如何选择？
- C端服务端渲染（SSR）和性能优化实践
- Vue 项目骨架屏注入实践
- 认识 Skeleton Screen【屏幕加载骨架】
# 图片
- 三种图表技术 SVG、Canvas、WebGL 3D 比较
- SVG 与 HTML5 的 canvas 各有什么优点，哪个更有前途？
- 渲染引擎：Canvas or SVG
- web 地图引擎的技术演进 百度地图引擎的技术演讲，从 SVG 到 Canvas、WebGL。
- 2D Canvas 的渲染优化 Canvas 渲染优化，从思路上讲解异步渲染、拾取加速和局部渲染三个方面。
- WebGL 性能问题定位和常见优化手段|WebGL 地图引擎系列第六期
- WebGL 教程
- Canvas or SVG？一张好图，两手准备，就在 ECharts 4.0
- When to Use SVG vs. When to Use Canvas
- 图片处理不用愁，给你十个小帮手
- Tinypng 图片无损压缩网站
- Docsmall 不仅仅能压缩图片的压缩网站，还支持 GIF、PDF 的压缩
- WEB 前端无损数据压缩方案等运用
- Webpack 之 treeShaking
- 手把手实现图片懒加载+Vue封装
# 缓存
# 浏览器缓存
# HTTP 缓存
- Chrome HTTP 缓存
- MDN HTTP 缓存
- 离线指南
- Caching Headers - Supercharged
- How to Clear Your DNS Cache (Mac, Windows, Chrome)
- 大公司里怎样开发和部署前端代码？
- 什么是蓝绿部署、滚动发布和灰度发布？
- Configuring HTTP caching behavior
- 用node实践HTTP缓存控制
- 第 35 题：请求时浏览器缓存 from memory cache 和 from disk cache 的依据是什么，哪些数据什么时候存放在 Memory Cache 和 Disk Cache中？
- 一文读懂前端缓存
- 设计一个无懈可击的浏览器缓存方案：关于思路，细节，ServiceWorker，以及HTTP/2
- f5到底刷新了点什么，你知道吗
- 理清HTTP缓存的一些概念
- vue项目部署的最佳实践
- 浏览器缓存知识小结及应用
- HTTP 缓存机制一二三
- Web 缓存机制系列
# 本地存储
- Storage for the web
- https://storage-quota.glitch.me/
- 网页存储概览
- 很全很全的前端本地存储讲解
- 浏览器里的本地数据库：IndexedDB
- indexedDB 使用
- 使用 IndexedDB
- 使用localStorage必须了解的点
- How to use IndexedDB to build Progressive Web Apps
- Service Workers! Your first step towards Progressive Web Apps (PWA)
- pwa 实战
# 应用层缓存
# 渲染
- 无线性能优化：Composite
- Myth Busting: CSS Animations vs. JavaScript
- 《浏览器工作原理与实践》
- Web Worker 使用教程
- 你不知道的 Web Workers
- 史上最全！图解浏览器的工作原理
- javascript 既然是单线程语言 ， 为什么会分主线程和消息线程(event loop) ?
- JavaScript 多线程编程
- JavaScript 运行机制详解：再谈 Event Loop
- 一文看懂 Chrome 浏览器运行机制
- Web Worker 使用场景
- ZIP 也能边下载边解压？流式解压技术揭秘！
- Vue 版的团队代码规范
- [译]尤雨溪：Vue3 的设计过程 vue3 中如何克服虚拟 dom 的性能瓶颈
- 对 virtual-dom 的一些理解
- 2020 ArcGIS 空间信息技术开发者大会
- Comparing jspdf vs. pdfkit vs. pdfmake
# 大数据
- 前端内存优化的探索与实践
- 如何实现高性能的在线 PDF 预览
- 生产环境可选择
- 虚拟化列表 Clusterize 或者 React Virtualized。
- 滚动，可以通过 "框架名 + infinite scroll"来进行搜索。
- 虚拟化树 react-trees
- ztree
- jqTree
- jquery.treeselect
- angular Select Tree
- infinite-scroll
- vue 能否做到支持 3W 条数据复选、全选、行点击不卡顿？
- 基于 vue 解决大数据表格卡顿问题
- 聊聊前端开发中的长列表
- 再谈前端虚拟列表的实现
- 使用 vue-virtual-collection 优化滚动性能
- 前端 tree 组件，10000 个树节点，从 14.65s 到 0.49s
- 「中高级前端」高性能渲染十万条数据（时间分片） —— 看到这篇文章后，至少可以明白什么是闪屏现象，以及 EventLoop 的原理了。
# 编码优化
# 其他
- JavaScript 是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
- 前端性能优化指南[6]--Web 性能标准
- 前端性能优化指南[7]--Web 性能指标
- 8 个提高 JS 性能的方法
- 如何快速提升 JSON.stringify() 的性能？——保存表单条件就是用的 JSON.stringify()，另外后端抱怨存的东西太大了。还有在使用
get请求接口时，参数是对象时，也需要做stringify()的处理。 - 如何实现高性能的在线 PDF 预览
# 综合
- Web Performance Working Group W3C 性能工作组
- 前端性能优化不完全指北
- 【译】唯快不破：Web 应用的 13 个优化步骤
- My website now loads in less than 2 sec! Here's how I did it! ⚡
- Get Started With Analyzing Runtime Performance Chrome 官方博客性能优化系列
- 网站性能优化实战——从 12.67s 到 1.06s 的故事
- 饿了么前端知识专栏
- 前端性能优化
- 浏览器渲染过程及 JS 引擎浅析
- 视频 https://coding.imooc.com/class/chapter/130.html#Anchor
- 9 Examples of building your own version of React
- 《计算机网络》
- 《JavaScript 高级程序设计 3》
- 《性能优化权威指南》
- 《高性能 JavaScript》
- 掘金小册：前端性能优化原理与实践
- 《深入浅出 Webpack》
← 图表的性能优化