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

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

一 目录

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

二 前言

返回目录

在整顿 浏览器 相干题型的面试点中，产出了上面的 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/ 处取得。