关于前端:jsliang-求职系列-24-浏览器系列汇总

在整顿浏览器相干题型的面试点中，产出了 8 篇文章，参考文献共 68 篇文章，一起折腾吧！

不折腾的前端，和咸鱼有什么区别

目录
一目录
二前言
三参考文献
3.1 付费网络书籍
3.2 浏览器
3.3 浏览器缓存
3.4 浏览器垃圾回收
3.5 回流与重绘
3.6 跨域
3.7 性能优化
3.7.1 Webpack 优化
3.7.2 其余优化
3.8 本地存储
3.9 其余

在整顿 浏览器 相干题型的面试点中，产出了上面的 8 篇文章：

[x] 从输出 URL 到页面出现
- [x] 整体过程：DNS 解析 -> TCP 连贯 -> 发送 HTTP 申请 -> 服务器响应 -> 浏览器解析渲染页面
- [x] DNS 解析过程：浏览器缓存 -> 零碎缓存（host）-> 路由器缓存 -> ISP DNS 服务器 -> 递归查问
- [x] TCP 连贯：建设连贯阶段 -> 数据传输阶段 -> 断开连接阶段，3 次握手和 4 次挥手
- [x] 发送 HTTP 申请：申请行、申请报文和申请注释，GET 和 POST 区别，HTTP 状态码
- [x] 服务器响应：状态码、响应报头和响应报文
- [x] 浏览器解析渲染页面：DOM 树 -> CSS 规定树 -> 渲染树（Render Tree）-> 布局渲染树（Layout tree）-> 绘制渲染树（Painting tree），回流和重绘
- [x] 性能优化：……
[x] 本地存储
- [x] Cookie
- [x] Local Storage
- [x] Session Storage
- [x] IndexedDB
[x] 浏览器缓存
- [x] 缓存地位：Service Worker、Memory Cache、Disk Cache、Push Cache
- [x] 缓存过程
- [x] 缓存机制：强缓存、协商缓存
- [x] 缓存实例：频繁变动的缓存、不常变动的资源
[x] 回流和重绘
- [x] 浏览器渲染过程
- [x] 重绘：批改背景色 / 色彩、设置可见度、设置背景图……
- [x] 回流：增加 / 删除 DOM 元素、扭转边框 / 边距 / 宽高、扭转窗口大小……
- [x] 优化：防止频繁操作 DOM，集中操作；防止 table 布局
[x] 跨域
- [x] 同源策略：什么是同源？为什么要设置跨域？
- [x] 解决跨域的形式：JSONP、CORS、postMessage、WebSocket、Node、Nginx、其余
[x] 垃圾回收
- [x] 栈垃圾回收：ESP 销毁
- [x] 堆垃圾回收：新生代和老生代
- [x] 新生代：Scavenge 算法，对象区域和闲暇区域的转换，两次回收后还存在的进入老生区
- [x] 老生代：标记 - 革除、标记 - 整顿
- [x] 全进展：JavaScript 线程中垃圾回收和其余脚本交替执行
[x] LRU 缓存淘汰策略
- [x] 常见淘汰策略：先进先出（FIFO）、起码应用（LFU）、最近起码应用（LRU）
- [x] 最近起码应用：如果数据最近被拜访过，那么接下来被拜访的概率也越高
- [x] 实现原理：新数据插入到链表表头；链表中有数据被拜访，也晋升到表头；链表满后，链表尾部数据被淘汰
[x] 性能优化
- [x] 从 URL 输出到页面解析过程查看性能优化点：DNS 解析、TCP 连贯、发送 HTTP 申请、服务器响应、浏览器解析渲染页面
- [x] 发送 HTTP 申请：浏览器缓存、Cookie 和 Web Storage、CDN 的应用、负载平衡
- [x] 服务器响应：Webpack 优化、图片优化、Gzip 压缩、服务端渲染（SSR）
- [x] 浏览器渲染解析页面：渲染过程、渲染过程优化、回流和重绘优化
- [x] 其余：Chrome 插件可视化、长列表、preload 预加载页面

当然，还延长到了 计算机网络 局部，例如：

[x] 计算机网络 – DNS
[x] 计算机网络 – TCP

前面还会继续更新的吧！加油！

参考文献共 68 篇文章，感激前辈们的奉献。

[x] 极客工夫 – 浏览器工作原理与实际【浏览倡议：11.5h】
[x] 掘金小册 – 前端性能优化原理与实际【浏览倡议：4h】

[x] (1.6w 字)浏览器灵魂之问，请问你能接得住几个？【浏览倡议：4h】
[x] 前端经典面试题: 从输出 URL 到页面加载产生了什么？【浏览倡议：50min】
[x] 浏览器层合成与页面渲染优化【浏览倡议：20min】
[x] 浏览器页面资源加载过程与优化【浏览倡议：无】
[x] 深入浅出浏览器渲染原理【浏览倡议：30min】
[x] 浏览器的渲染原理简介【浏览倡议：10min】
[x] 浏览器的渲染：过程与原理【浏览倡议：10min】
[x] 经典面试题：从 URL 输出到页面展示到底产生什么【浏览倡议：30min】

[x] 深刻了解浏览器的缓存机制【浏览倡议：1h】
[x] 浏览器缓存【浏览倡议：30min】
[x] 前端必须要懂的浏览器缓存机制【浏览倡议：10min】
[x] 对于浏览器缓存你晓得多少【浏览倡议：10min】
[x] 设计一个无懈可击的浏览器缓存计划：对于思路，细节，ServiceWorker，以及 HTTP/2【浏览倡议：20min】
[x] 前端缓存最佳实际【浏览倡议：20min】

[x] JavaScript 进阶 - 内存机制(表情包初探)【浏览倡议：20min】

[x] 浏览器的回流与重绘 (Reflow & Repaint)【浏览倡议：10min】
[x] 你真的理解回流和重绘吗【浏览倡议：10min】
[x] 页面重绘和回流以及优化【浏览倡议：5min】
[x] [浏览器重绘 (repaint) 重排 (reflow) 与优化[浏览器机制]](https://juejin.im/post/684490…【浏览倡议：10min】
[x] 回流与重绘：CSS 性能让 JavaScript 变慢？【浏览倡议：10min】

[x] 浏览器同源策略与 ajax 跨域办法汇总【浏览倡议：15min】
[x] 九种跨域形式实现原理（完整版）【浏览倡议：15min】
[x] 前端开发如何独立解决跨域问题【浏览倡议：5min】
[x] CORS 原理及实现【浏览倡议：30min】
[x] JSONP 原理及实现【浏览倡议：30min】
[x] 面试题：nginx 有配置过吗? 反向代理晓得吗?【浏览倡议：10min】
[x] 10 种跨域解决方案（附终极大招）【浏览倡议：1h】
[x] [CORS 跨域申请[简略申请与简单申请]](https://www.cnblogs.com/qunxi…【浏览倡议：20min】

2019 年文章：

[x] Webpack 优化——将你的构建效率提速翻倍【浏览倡议：10min】
[x] 性能优化篇 —Webpack 构建速度优化【浏览倡议：10min】
[x] 应用 webpack4 晋升 180% 编译速度【浏览倡议：10min】
[x] 多过程并行压缩代码【浏览倡议：5min】
[x] webpack 的 scope hoisting 是什么？【浏览倡议：5min】
[x] webpack 4: Code Splitting 和 chunks 切分优化【浏览倡议：5min】

2018 年文章：

[x] Tree-Shaking 性能优化实际 – 原理篇【浏览倡议：10min】
[x] 体积缩小 80%！开释 webpack tree-shaking 的真正后劲【浏览倡议：10min】
[x] 你的 Tree-Shaking 并没什么卵用【浏览倡议：5min】
[x] webpack 如何通过作用域剖析打消无用代码【浏览倡议：5min】
[x] 让你的 Webpack 腾飞—考拉会员后盾 Webpack 优化实战【浏览倡议：5min】
[x] webpack dllPlugin 打包体积和速度优化【浏览倡议：5min】
[x] webpack 优化之 code splitting【浏览倡议：5min】

2017 年文章：

[x] Webpack 打包优化之速度篇【浏览倡议：5min】
[x] 减速 Webpack- 放大文件搜寻范畴【浏览倡议：5min】
[x] 通过 Scope Hoisting 优化 Webpack 输入【浏览倡议：5min】
[x] Webpack 大法之 Code Splitting【浏览倡议：5min】

[x] 网站性能优化实战——从 12.67s 到 1.06s 的故事【浏览倡议：30min】
[x] 聊聊前端开发中的长列表【浏览倡议：30min】
[x] 再谈前端虚构列表的实现【浏览倡议：30min】
[x] 浅说虚构列表的实现原理【浏览倡议：30min】
[x] 用 preload 预加载页面资源【浏览倡议：20min】
[x]（译）2019 年前端性能优化清单 — 上篇【浏览倡议：20min】
[x]（译）2019 年前端性能优化清单 — 中篇【浏览倡议：20min】
[x]（译）2019 年前端性能优化清单 — 下篇【浏览倡议：20min】
[x] App 内网页启动减速实际：动态资源预加载视角【浏览倡议：20min】
[x] 腾讯 HTTPS 性能优化实际【浏览倡议：30min】
[x] 5 分钟撸一个前端性能监控工具【浏览倡议：20min】
[x] 现代化懒加载的形式【浏览倡议：5min】
[x] 懒加载和预加载【浏览倡议：10min】

[x] cookie、Session、Token、sessionStorage、localStorage 简介【浏览倡议：5min】
[x] session,cookie,sessionStorage,localStorage,token 的区别？【浏览倡议：5min】
[x] 什么是 Http 无状态？Session、Cookie、Token 三者之间的区别【浏览倡议：5min】
[x] Session 是怎么实现的？存储在哪里？【浏览倡议：5min】
[x] 用户登录，前后端如何交互判断是否登录超时！【浏览倡议：5min】
[x] 前后端拆散模式下，如何跟踪用户状态？【浏览倡议：5min】

[x] 摈弃 console.log()，拥抱浏览器 Debugger【浏览倡议：10min】
[x] 浏览器 IMG 图片原生懒加载 loading=”lazy”实际指南【浏览倡议：10min】
[x] 浏览器页面资源加载过程与优化【浏览倡议：无】

一 目录

二 前言

三 参考文献

3.1 付费网络书籍

3.2 浏览器

3.3 浏览器缓存

3.4 浏览器垃圾回收

3.5 回流与重绘

3.6 跨域

3.7 性能优化

3.7.1 Webpack 优化

3.7.2 其余优化

3.8 本地存储

3.9 其余

一目录

二前言

三参考文献