专题
浏览器、网络与 Web 性能
从输入 URL、HTTP/HTTPS、缓存和渲染流程，建立浏览器与网络协作方式的完整视图。
这个专题会帮你理清
- 理解导航、请求、缓存与渲染之间的先后关系
- 区分 HTTP、HTTPS、TLS 和常见网络问题
- 把性能优化放回浏览器实际工作流程中判断
全部文章
26 篇什么是浏览器缓存，强缓存和弱缓存的区别？
解释浏览器缓存的工作流程，以及强制缓存与协商缓存的区别、关键响应头和配置建议
·约 2 分钟·社区来稿 · batype
浏览器宏任务与微任务：执行顺序、嵌套与性能陷阱
梳理浏览器 Event Loop 中宏任务与微任务的执行规则、嵌套顺序、async/await 行为、性能陷阱与调试方法。
·约 4 分钟·社区来稿 · batype
HTTP 详解
HTTP（Hypertext Transfer Protocol）是一种用于在网络上传输超文本数据的协议。它是一种客户端 - 服务器协议，客户端发送请求，服务器返回响应。HTTP 是 Web 的基础，
·约 10 分钟
HTTP 请求流程
HTTP 是一种允许浏览器向服务器获取资源的协议，是 Web 的基础，通常由浏览器发起请求，用来获取不同类型的文件，例如 HTML 文件、CSS 文件、JavaScript 文件、图片、视频等。此外，
·约 12 分钟
导航流程：从输入 URL 到页面展示，这中间发生了什么？
“在浏览器里，从输入 URL 到页面展示，这中间发生了什么？” 这是一道经典的面试题，能比较全面地考察应聘者知识的掌握程度，其中涉及到了网络、操作系统、Web 等一系列的知识。所以我在面试应聘者时也必
·约 10 分钟
浏览器渲染流程
在 上一篇文章 /browser/protocol/http-navigation.html 中我们介绍了导航相关的流程，那导航被提交后又会怎么样呢？就进入了渲染阶段。这个阶段很重要，了解其相关流程能
·约 17 分钟
TCP（Transmission Control Protocol，传输控制协议）
TCP（Transmission Control Protocol，传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议，广泛用于互联网中的数据传输。它是 TCP/IP 模型中的核心协议
·约 5 分钟
事件循环（Event Loop）
事件循环（Event Loop）是计算机程序中的一个设计模式，用于处理异步操作，特别是在图形用户界面程序和服务器端应用程序中。事件循环模式通过等待并分派事件或回调函数来驱动程序的执行流程，而不是通过直
·约 4 分钟
HTTPS 和 HTTP 的区别
HTTP : 是一种无状态的请求 - 响应协议。是互联网上应用最广泛的一种通讯协议，基于 TCP ，可以使浏览器工作效率更为高效，减少网络传输。
·约 4 分钟
TLS（Transport Layer Security，传输层安全协议）三次握手
TLS（Transport Layer Security，传输层安全协议）三次握手是建立安全层通信的一个过程，它确保了数据在两个通信实体之间的传输是加密和身份验证的。TLS 是一种安全协议，通常用于在
·约 2 分钟
服务器端渲染（Server-Side Rendering，简称 SSR）
服务端渲染（Server-Side Rendering，简称 SSR）是一种 Web 应用的渲染方式，其中 HTML 是在服务器上生成的，并作为完整页面发送到客户端（通常是浏览器）。客户端然后解析和显
·约 2 分钟
webpack 热更新的实现原理
webpack 的热更新⼜称热替换（Hot Module Replacement），缩写为 HMR。这个机制可以做到不⽤刷新浏览器⽽将新变更的模块替换掉旧的模块。 原理：
·约 2 分钟
session-cookies 三个缓存 localStorage、sessionStorage、Cookies。
https://badge.fury.io/js/session-cookies
·约 1 分钟
网络劫持有哪几种，如何防范？
1. DNS 劫持: 输⼊京东被强制跳转到淘宝这就属于 dns 劫持
·约 2 分钟
RESTful 和 RPC 的区别
RESTful 是一种基于 HTTP 协议，通过 URL、HTTP 方法和参数等方式来访问和操作资源的设计风格和架构方法。它是一种轻量级的、高效的、无状态的 Web 服务架构，可以用于设计和开发各种类
·约 2 分钟
什么是 CSRF 攻击？
CSRF（Cross-Site Request Forgeries） 攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录
·约 3 分钟
什么是 XSS 攻击？
XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。
·约 3 分钟
如何对项目中的图片进行优化？
1. 不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片 完全可以用 CSS 去代替。 2. 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪 费带宽。一般图片都用 CDN 加载，可
·约 3 分钟
前端懒加载是什么？
懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据
·约 2 分钟
节流和防抖
函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件 又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因 为用户的多次点击向后端发送多次请求。 函数节流是指规定一个单位时间
·约 1 分钟
浅谈回流与重绘
当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为回流。 下面这些操作会导致回流：
·约 2 分钟
有哪些可能引起前端安全的问题？
⼀种代码注⼊⽅式，为了与 CSS 区分所以被称作 XSS。早期常⻅于⽹络论坛，起因是⽹站没有对⽤户的输⼊进⾏严格的限制，使得攻击者可以将脚本上传到帖⼦让其他⼈浏览到有恶意脚本的⻚⾯，其注⼊⽅式很简单包
·约 1 分钟
如何⽤ webpack 来优化前端性能？
⽤ webpack 优化前端性能是指优化 webpack 的输出结果，让打包的最终结果在浏览器运⾏快速⾼效。
·约 1 分钟
浏览器缓存的全过程
浏览器缓存的全过程涉及了几种不同的缓存机制，主要包括浏览器缓存和 HTTP 协议中定义的缓存控制策略。下面是浏览器缓存的全过程的概览：
·约 1 分钟
浏览器的渲染进程的线程
GUI 渲染线程是在 GUI 应用程序中负责界面渲染的线程。负责渲染浏览器页面，解析 HTML、CSS，构建 DOM 树、构建 CSSOM 树、构建渲染树和绘制页面；当界面需要重绘或由于某种操作引发回
·约 4 分钟
如何实现浏览器内多个标签页之间的通信？
实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。通信方法如下：
·约 1 分钟