- 博客(15)
- 收藏
- 关注
RSS订阅原创 本地服务器访问你的项目，会有这个 CORS 报错了
你遇到的这个 CORS（跨域）错误，是因为你直接用浏览器打开本地的 HTML 文件（协议），而不是通过本地服务器访问。浏览器出于安全考虑，禁止模块脚本在本地文件协议下加载。
2025-07-19 10:25:41
493
原创 使用延迟加载(defer)
但可能一开始渲染的组件太多，不仅js执行时间过长，而且执行完后浏览器要渲染的元素过多，从而导致页面白屏。延迟装载的思路就，本质上是利用requestAnimationFrame事件分批渲染内容。一个可行的办法就是装载组件，让组件按照指定的先后顺序依次一个一个渲染出来。js传输完成后，浏览器开始执行js构造页面。
2025-07-13 00:07:12
108
原创 事件循环（之进阶）
如果让渲染主线程等待这些任务的时机到达，就会导致主线程长期处于 【阻塞】状态，从而导致浏览器【卡死】。所以浏览器选择异步来解决这个问题。使用异步的方式，渲染主线程永不阻塞。
2025-06-29 23:15:16
222
原创 JS 中的计时器能做到精准计时吗？为什么？
按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会由 4 ms的最少时间差，这样在计算时时间少于 4 ms时又带来的偏差。操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终是调用操作系统的函数，也就会携带者这些偏差。受事件循环的影响，计数器的回调函数只能在主线程空闲时运行，因此这样也带来了偏差。计算机硬件没有原子钟，无法做到精准计时。
2025-06-29 23:00:41
155
原创 阐述下 JS 的事件循环
根据 W3C 官方解释，每个任务都有不同的类型，同类型的任务必须在同一队列，不同的任务属于不同的队列。不同的任务有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。在 Chorme 的源码中，它开启一个不会结束的 for 循环，每次循环会从消息队列中取出第一个任务执行，而其它线程只需要在合适的时候将任务队列末尾即可。过去把消息队列分成宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。事件循环又叫消息循环，是浏览器渲染主线程的工作方式。
2025-06-29 22:14:20
244
原创 前端页面绘制
理解这些线程模型可以帮助开发者编写更高性能的前端代码，特别是对于复杂动画和数据可视化等场景。JavaScript → 样式计算 → 布局 → 绘制（生成绘制指令）只改变图层叠加方式时触发（如 transform/opacity）绘制指令 → 光栅化线程 → 合成线程 → 屏幕显示。执行 JavaScript 代码（包括框架代码）长时间运行的 JS 会阻塞渲染（"卡顿"的主因）当几何属性（宽/高/位置等）变化时触发。当非几何样式（颜色/背景等）变化时触发。布局（Layout/Reflow）
2025-06-28 17:20:33
984
原创 如何理解JS的异步
具体做法是当某个任务发生时，比如计时器，网络，事件监听。主线程把任务交给其他线程去处理，自身立即结束当前的任务。当其他线程完成时，会将事先传递的回调函数包装成任务，加入消息队列的末尾排队。如果使用同步的方式，就急有可能导致主线程阻塞，从而导致消息队列中很多其他任务无法执行。JS时一门单线程语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。在这种异步模式下，浏览器永远不会阻塞，从而最大限度的保证了单线程的运行流畅。而JS的渲染主线程承担着许多工作，渲染页面，执行JS都在其中运行。
2025-06-28 15:52:23
222
原创 事件循环（之基础）
有了进程后，就可以运行程序的代码了。运行代码的地方称之为线程。一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。同一个进程中的多个线程是共享同一块内存空间的。
2025-06-28 15:06:58
290
原创 模块导入之 require.context
require.context 是 Webpack 提供的一个高级功能，用于在构建时 动态批量导入模块（如组件、图片、JSON 文件等）。它通过 正则匹配 文件路径，生成一个上下文模块，适合处理 自动化注册组件、动态路由、多语言文件加载 等场景。
2025-06-25 15:27:03
1827
原创 模块导入之 import.meta.glob
import.meta.glob 是 Vite 提供的一个强大的 模块动态导入 功能，用于在构建时 批量导入模块（如 Vue 文件、图片、JSON 等），并生成 按需加载 的代码。它特别适合处理 动态路由、多语言文件、组件自动化注册 等场景。
2025-06-25 15:03:26
1594
原创 js(javaScript)脚本加载
特性没有属性asyncdefer下载是否阻塞 HTML 解析是否否执行是否阻塞 HTML 解析是是（下载完立即执行）否（HTML 解析完才执行）执行时机HTML 解析到脚本时立即执行下载完成后立即执行HTML 全部解析完成后执行（DOMContentLoaded 前）执行顺序按文档顺序不确定（下载完就执行）按文档顺序适用场景依赖 DOM 或其他脚本、需要顺序执行的脚本独立脚本、不依赖 DOM 或其他脚本依赖 DOM 或其他脚本、需要顺序执行的脚本。
2025-06-25 11:06:15
572
原创 前端页面性能优化办法有哪些
启用Gzip压缩，减小HTML、CSS、JavaScript等文本文件的大小。：对非关键资源（如图片、视频）使用懒加载，仅在用户滚动到可视区域时加载。：将小的CSS或JavaScript直接嵌入HTML中，减少外部请求。：将多个CSS或JavaScript文件合并为一个，减少请求次数。：去除CSS、JavaScript中的空格、注释等，减小文件体积。：通过CDN分发静态资源，减少用户与服务器的距离，加快加载速度。：优先使用CSS动画而非JavaScript动画，提升性能。
2025-06-20 09:59:45
422
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人