# 宏观流程 要了解浏览器渲染引擎工作原理，就要先了解一下浏览器架构涉及到哪些进程。 网络进程：负责网络资源的加载、下载、缓存等 渲染进程：负责页面的渲染、布局、绘制等 浏览器主线程：负责处理用户交互、事件、定时器等 GPU 进程：负责页面的合成、绘制等 插件、扩展程序进程：负责插件、扩展程序的运行 在这些进程中，渲染进程是最重要的一个进程，我们在这里着重介绍。 # 渲染流水线 浏览器渲染引擎是浏览器的核心组件之一，它负责将 HTML、CSS、JavaScript 等代码转换为用户可以看到的页面。浏览器渲染引擎的主要工作流程如下： # 1. 解析 HTML 其实是一个 Parse...

# 什么是设计模式 设计模式是解决特定问题的经验总结和可复用的解决方案。可以提高代码的复用性、可维护性和可读性，是提高开发效率的重要手段。它有基本的五大原则可见 SOLID 原则在前端中的实践。 下面以 JS 的角度介绍一些在前端中常用的设计模式。 # 单例模式 全局只允许创建一个实例的模式，在前端中常用于： 全局状态管理 浏览器 window 对象 日志记录 代码实现： 123456789101112131415class Singleton { constructor() { if (!Singleton.instance) {...

# 什么是 SOLID 原则 其是面向对象设计的五大基本原则，为了创建维护性高、扩展性高的代码。起源是 Java、C++ 这类强面向对象对语言，但在前端、JS 中也能有很好的借鉴作用。 # 单一职责原则 (Single Responsibility Principle, SRP) 每个类 / 模块应该只有单一的职责，降低类之间的耦合度，使代码可维护性高。 例如 react 组件有时会同时负责 UI、业务逻辑。 1234567const UserProfile = (userId) => { const [username, setUsername] =...

# 什么是 XSS Cross-Site Scripting（跨站脚本攻击）简称 XSS。本质是将恶意代码 / 脚本注入目标网站，从而读取用户的敏感信息（如 cookie，sessionId）危害数据安全。 # XSS 常见场景 例如，我们有时候需要从 URL 取参数在页面上展示。 123456789<body> 用户搜索的关键词为：<p></p> <script> const params = new URLSearchParams(location.search); const...

由于本人对 commonjs 和 module 的导入导出不是很熟悉，因此在这里做一个总结。 # ES Module # Name 命名导出 顾名思义就是导出时需要声明名字。因此在导入时也需要声明其名字。 123456/** 1.js */export const name = 'imtx';/** 2.js */import { name } from './1.js';console.log(name); // 'imtx' # Default...

# 什么是 CSRF Cross-site request forgery（跨站请求伪造）简称 CSRF。本质是攻击者诱导用户点击恶意网站并向后台发送请求，冒充用户已有的登录凭证（cookie）来做到获取数据。 上面运用了浏览器的特性做到冒充，常见流程如下： 用户登录 a.com，留下了登录后的 cookie。 攻击者在 a.com 发布了一个恶意链接 b.com。 用户好奇点击了恶意链接，恶意链接对 a.com 的服务端发出请求。 由于浏览器的策略，对于已有 cookie 的网页会自动携带之前的 cookie。 服务端校验 cookie 通过，返回了攻击者想要的数据。 # CSRF...

# 什么是 Websocket 一种处于应用层的基于 TCP 的网络传输协议，支持在 1 个 TCP 连接上全双工通信，达到实时通信的效果。 一次握手之后即可双向数据传输。 采用二进制帧结构但与 HTTP2.0 不兼容。不支持多路复用等特性。 协议名为 ws 或 wss，对应 http 和 https 的关系，且默认端口也一致。 握手过程需要设定 Upgrade: websocket 字样，1 次 HTTP 请求就可以从 HTTP 协议升级至 Websocket 协议。 # 为什么需要心跳检测？是什么？ 虽然 Websocket...

# 项目场景 最近在开发一款聊天项目，其中需要加载用户之间的消息列表，正常逻辑是从后端 - 数据库获取对应消息并渲染，但是如果消息过多会使得网络请求压力大，页面 DOM 渲染量大，导致性能不佳，所以了解到这两种优化方式。 # 什么是分页加载 分页加载是一种按需获取数据的策略，只在需要的时候加载数据，减少初次加载时间和内存占用。 在消息列表中，由于用户视窗内只能看到少数消息，我们可以一次只加载 15 条消息，当用户需要查看更多（上拉）时再从后端获取一次消息。 # 实现逻辑 我们在获取消息的时候可以传入 lastId 和 limit，分别代表最后获取的一条消息 id（如果按 id...

# 什么是 JWT JWT (JSON Web Token) 是一种开放标准，用于在各方之间安全地传输信息。token 由三部分组成： Header（头部）：主要声明使用的算法。 Payload（负载）：消息体，存放实际的内容，也就是 Token 的数据声明，例如用户的 id。 Signature（签名）：是对头部和载荷内容进行签名，设置一个 secretKey，对前两个的结果进行 HMACSHA25 算法。保证一旦前面两部分数据被篡改，只要服务器加密用的密钥没有泄露，得到的签名肯定和之前的签名不一致。 # JWT 的用处 在目前前后端分离的开发过程中，使用 token...

# 协程 协程（coroutine）是一种异步编程解决方案。意思是多个线程互相协作，完成异步任务。 协程的运行流程大致如下： 第一步，协程 A 开始执行。 第二步，协程 A 执行到一半，进入暂停，执行权转移到协程 B。 第三步，（一段时间后）协程 B 交还执行权。 第四步，协程 A 恢复执行。 上面流程的协程 A，就是异步任务，因为它分成两段（或多段）执行。这可以类比到平时的网络请求。 Generator 就是一种在 ES6 的协程实现。它内部有 yield 关键字可以交出函数的执行权，等到需要执行时再执行。 # 异步应用 因为 generator...