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

更多可查看原文

一 目录

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

目录
一 目录
二 前言
三 参考文献
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 篇文章：

• 从输入 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】

• 浏览器页面资源加载过程与优化【阅读建议：无】

---

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