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 篇文章，感谢前辈们的贡献。

3.1 付费网络书籍

[x] 极客时间 - 浏览器工作原理与实践【阅读建议：11.5h】
[x] 掘金小册 - 前端性能优化原理与实践【阅读建议：4h】

3.2 浏览器

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

3.3 浏览器缓存

[x] 深入理解浏览器的缓存机制【阅读建议：1h】
[x] 浏览器缓存【阅读建议：30min】
[x] 前端必须要懂的浏览器缓存机制【阅读建议：10min】
[x] 关于浏览器缓存你知道多少【阅读建议：10min】
[x] 设计一个无懈可击的浏览器缓存方案：关于思路，细节，ServiceWorker，以及HTTP/2【阅读建议：20min】
[x] 前端缓存最佳实践【阅读建议：20min】

3.4 浏览器垃圾回收

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

3.5 回流与重绘

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

3.6 跨域

[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】

3.7 性能优化

3.7.1 Webpack 优化

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】

3.7.2 其他优化

[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】

3.8 本地存储

[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】

3.9 其他

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