jsliang 求职系列 - 24 - 浏览器系列汇总

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

一 目录

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

二 前言

在整理 浏览器 相关题型的面试点中，产出了下面的 8 篇文章：

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

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

• 计算机网络 - DNS
• 计算机网络 - TCP

后面还会持续更新的吧！加油！

三 参考文献

参考文献共 68 篇文章，感谢前辈们的贡献。

3.1 付费网络书籍

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

3.2 浏览器

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

3.3 浏览器缓存

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

3.4 浏览器垃圾回收

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

3.5 回流与重绘

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

3.6 跨域

• 浏览器同源策略与ajax跨域方法汇总【阅读建议：15min】
• 九种跨域方式实现原理（完整版）【阅读建议：15min】
• 前端开发如何独立解决跨域问题【阅读建议：5min】
• CORS 原理及实现【阅读建议：30min】
• JSONP 原理及实现【阅读建议：30min】
• 面试题：nginx 有配置过吗?反向代理知道吗?【阅读建议：10min】
• 10 种跨域解决方案（附终极大招）【阅读建议：1h】
• CORS跨域请求[简单请求与复杂请求]【阅读建议：20min】

3.7 性能优化

3.7.1 Webpack 优化

2019 年文章：

• Webpack优化——将你的构建效率提速翻倍【阅读建议：10min】
• 性能优化篇---Webpack构建速度优化【阅读建议：10min】
• 使用webpack4提升180%编译速度【阅读建议：10min】
• 多进程并行压缩代码【阅读建议：5min】
• webpack 的 scope hoisting 是什么？【阅读建议：5min】
• webpack 4: Code Splitting和chunks切分优化【阅读建议：5min】

2018 年文章：

• Tree-Shaking性能优化实践 - 原理篇【阅读建议：10min】
• 体积减少80%！释放webpack tree-shaking的真正潜力【阅读建议：10min】
• 你的Tree-Shaking并没什么卵用【阅读建议：5min】
• webpack 如何通过作用域分析消除无用代码【阅读建议：5min】
• 让你的Webpack起飞—考拉会员后台Webpack优化实战【阅读建议：5min】
• webpack dllPlugin打包体积和速度优化【阅读建议：5min】
• webpack优化之code splitting【阅读建议：5min】

2017 年文章：

• Webpack 打包优化之速度篇【阅读建议：5min】
• 加速Webpack-缩小文件搜索范围【阅读建议：5min】
• 通过Scope Hoisting优化Webpack输出【阅读建议：5min】
• Webpack 大法之 Code Splitting【阅读建议：5min】

3.7.2 其他优化

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

3.8 本地存储

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

3.9 其他

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