月刊少女野崎君のBlog

CDN 缓存是什么？首先来了解下什么是 CDN CDN 是什么CDN 内容分发网络，CDN 是 Content Deliver Network 的简称。常说的 CDN 加速指的网站加速或是用户下载资源加速，CDN加速通常是和域名绑定的，会通过 DNS 分离查找找到最近的 CDN 边缘节点 IP CDN 可以理解为分布在每个县城的火车票代售点，用户在浏览网站的时候，CDN 会选择一个离用户最近的 CDN 边缘节点来响应用户的请求，这样广东的移动用户请求就不会千里迢迢跑到北京的电信机房（假设源站部署在北京的电信机房上）的服务器上了 CDN 的优势 CDN 节点解决了跨运营商和跨地域访问的问题，访问延时大大降低 大部分请求在CDN边缘节点完成，CDN 起到了分流作用，减轻了源站的负载压力 CDN 缓存是什么？用户浏览器和服务器交互，没有接入 CDN 时：用户在浏览网站的时候，浏览器能够在本地保存网站中的图片或者其他文件的副本，这样用户再次访问该网站的时候，浏览器就不用再下载全部的文件，减少了下载量意味着提高了页面加载的速度 用户浏览器和服务交互，接入 CDN 时：客户端浏览器会先检查是否有 ...

Vite 构建原理 快速的冷启动：No Bundle + esbuild 预构建 即时的模块热更新： 基于 ESM 的 HMR，同时利用浏览器缓存策略提升速度 真正的按需加载： 利用浏览器的 ESM 支持，实现真正的按需加载 Vite 其核心原理是利用浏览器现在已经支持 ES6 这一特性，碰见 ES6 的 import 就会发送一个 HTTP 请求去加载文件，Vite 启动一个 Koa 服务器拦截这些请求，并在后端进行相应的处理 将项目中使用的文件通过简单的分解与整合，然后再 ESM 格式返回给浏览器。Vite 整个过程中没有对文件进行打包编译，做到了真正的按需加载，所以其运行速度比原始的 webpack 开发编译速度快出许多！ 核心原理基于 ESM 的 Dev server在 Vite 出来之前，传统的 打包工具 如 webpack 是先解析依赖、打包构建再启动开发服务器，Dev server 必须等所有的模块构建完成，当我们修改了 bundle 模块中的一个子模块，整个 bundle 文件都会重新打包然后输出。项目应用越大，启动时间越长。而 Vite 利用浏览器对 ESM 的支 ...

模板编译与渲染什么是模板编译在 Vue 中推崇 使用.vue 文件，在.vue 文件中使用 标签来编写 vue 语法。 Vue 会把在 标签 中的内容（类似于原生 HTML）进行编译，把“原生 HTML”的内容找出来，再把“非原生 HTML”找出来，经过一系列的逻辑处理生成渲染函数，也就是 render 函数。 render 函数 会把模板内容生成对应的 VNode， VNode 经过 patch 过程 从而得到 可渲染的视图中的 VNode 最后根据 VNode 创建 真实的 DOM 节点，并插入到视图中，最终完成视图的渲染更新。 其中，【Vue 会把在 标签 中的内容（类似于原生 HTML）进行编译，把“原生 HTML”的内容找出来，再把“非原生 HTML”找出来，经过一系列的逻辑处理生成渲染函数，也就是 render 函数。】 这一过程称之为模版编译。 模板转换成视图的过程 Vue.js 通过编译将 template 模板转换成渲染函数 render，执行渲染函数就可以得到一个虚拟节点树。 在对 Model 进行操作的时候，会触发对应 Dep 中的 ...

Vue 的构建和初始化构建版本通常我们利用 vue-cli 去初始化我们的 Vue.js 项目的时候会询问我们用 Runtime Only 版本的还是 Runtime + Compiler 版本 Runtime Only编译时转化，离线编译。 Runtime Only 版本通常需要借助如 webpack 的 vue-loader工具 把 .vue 文件 编译成 JavaScript，因为是在编译阶段做的，所以它只包含运行时的 Vue.js 代码，因此代码体积也会更 轻量，性能更优。 Runtime + Compiler运行时，客户端编译 如果没对代码做预编译，但又使用了 Vue 的 template 属性 并传入一个字符串，则需要在客户端编译模板，即运行时编译。因为在 Vue2.0 中，最终渲染都是通过 render 函数，如果写 template 属性，则需要编译成 render 函数，那么这个编译过程会发生运行时，所以需要带有编译器的版本，很显然，这个编译过程对性能有一定的损耗。所以我们通常更推荐使用 Runtime- Only 的 Vue.js 初始化当代码执行 import ...

复杂异步嵌套逻辑分析 async/await 在事件循环中的表现 对于不同Chrome 版本，async/await 会有两种表现，如下代码 123456789101112131415161718async function async1() { console.log(1) await async2() console.log(2)}async function async2() { console.log(3)}async1()new Promise((resolve) => { console.log(4) resolve()}).then(() => { console.log(5)}) 不同的 Chrome 版本，会输出两种结果 1 3 4 2 5 1 3 4 5 2 根据 最新的 ECMAScript 规范下，第一种为正确表现 最新的 ECMAScript 规范最新的 ECMAScript 规范中，await 直接使用 Promis ...

页面生成的过程： HTML -> 被 HTML 解析器解析成 DOM 树 CSS -> 被 CSS 解析器解析成 CSSOM 树 结合 DOM 树和 CSSOM 树 生成一颗渲染树（Render Tree） 这一个过程称之为 Attachment 生成布局（flow），浏览器在屏幕上“画”出渲染树中的所有节点 将布局绘制（paint）在屏幕上，显示出整个页面 4和5 结合起来也就是我们所说的渲染，同时也是最耗时的部分 渲染：在网页生成时，至少会渲染一次。在用户访问的过程中，还会不断触发重绘和重排，从而影响性能。所以在开发过程中应该避免页面的重排重绘。 什么是重绘、重排？什么是重绘、重排？从字面意思就可以理解 重绘：重新绘制，一般发生在布局不变，视觉上变化的时候，比如阴影颜色 重排：重新排列，一般发生在布局变化或元素大小发生变化时 如上概念可以得出： 单单改变元素的外观，肯定不会引起网页的重新生成布局。 改变元素大小和布局变化时，那元素乃至周边的 DOM 可能都需要重新绘制。 也就是说：重绘不一定导致重排，但重排一定会导致重绘 重排（reflow）：概念：当 DO ...

CommonJS、AMD、CMD 和 ESM一、Common JS CommonJS 它是通过 require 来引入模块，通过 module.exports 定义模块的输出接口。这种模块加载方案是服务端的解决方案，它是以同步的方式来引入模块的。（因为服务端的文件都存储在本地磁盘，所以读取起来非常快，用同步的方式没有问题，但在浏览器端，由于模块加载是使用网络请求的，所以使用 异步的方式更合适） CommonJS 输出的是一个只的拷贝，会有缓存，这个值一旦输出，模块内部更新， 对于输出的这个值不会有影响 CommonJS 是在运行时加载的，CommonJS 模块是个对象，输入时会先加载一整个模块生成一个对象，从这个对象上取值 二、AMD AMD 采用 异步方式来加载模块的，模块的加载不影响后面语句的执行，所有依赖这个模块的语句都定义在一个回调函数里，等到加载完成再去执行回调函数。require.js 实现了 AMD 规范 AMD 在使用模块依赖时，必须先声明依赖，并且依赖模块加载完成就立即执行，依赖模块的顺序可能和我们书写的并不一致 三、CMD CMD 和 AMD 一样都是为了解 ...

webpackwebpack 的作用：将前端代码模块编译打包成浏览器可以识别的 html + css + js 1. 有哪些常用的 loader file-loader: 处理文件的 loader,处理文件导入地址并替换成其访问地址，并把文件输出到相应位置 babel-loader: 将 es6 转 es5 sass-loader: 将 sass 转 css css-loader: 处理样式间的相互引用 ts-loader: 处理 TS 文件 vue-loader： 处理 .vue 文件…. loader 的作用就是用于处理源文件代码，将它们转换成 webpack 可处理的模块，处理源码文件时，针对不同的源码模块使用 不同的 loader 处理 loader 的执行顺序是从右往左，从下往上， modules: { rules: [{ use: [ ‘style-loader’ ‘css-loader’, ‘postcss-loader’, ‘sass-loader’] }]} 2.常见的 Plugin html ...

Css 的优先级important > 内联样式 > id 选择器 > class 选择器 > 标签选择器 页面导入样式时，使用 link 和 @import 有什么区别 link 属于 XHTML 标签，除了加载 CSS 外 还能用于定义 rel 等属性； @import 是提供给 css 的，只能用于加载 css 页面被加载时 link 会同时被加载，而 import 引用的 css 会等到页面加载完后在加载 import 有兼容性问题，只有在 IE5以上才能被识别，link 是 XHTML 标签，没有兼容性问题 link 支持使用 js 控制 DOM 去改变样式，import 不支持 CSS 盒模型css 盒模型 分为 IE 盒模型(border-box) + W3C 盒模型(content-box)盒模型包括：content + padding + border + marginIE 盒模型 和 W3C 盒模型的区别是 IE 盒模型的 content 包含 padding + border CSS 选择器有哪些？ 哪些属性可以继承 id 选择器 ...

vue-router 的实现vue-router 的作用：通过改变 URL，在不重新请求页面的情况下 更新视图 vue-router 的两种模式 一、hash 模式 vue hash 模式路由，在 URL 上带有 # 号，hash 路由 通过 改变 # 号后面的路由来更新视图。# 号后面的URL 改变 不会触发浏览器重新发起请求。 hash 模式的原理是根据 onhashchange 来监听 URL 变化，通过 window.location.hash 来获取当前 url 值 二、history 模式 （基于 HTML5 history API） history 模式 url 上不会带有 # 号，通过 pushState 、replaceState 、popState实现跳转页面且不重新发送请求。 使用 pushState 跳转 url 不会向服务器发起新的文档请求，并且它只能实现当前域的跳转，并且会添加一条访问记录popState 可以监听当前url 是否改变，history.back, history.forward,history.go 都会触发 popState history ...