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] 浏览器页面资源加载过程与优化【阅读建议：无】

---

jsliang 的文档库由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议 进行许可。<br/>基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/>本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。