m0_38066007的博客

11。

11。

2.减少HTTP请求：合并文件、CSS精灵、inline Image3.减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询4.避免重定向：多余的中间访问5.使Ajax可缓存6.非必须组件延迟加载7.未来所需组件预加载8.减少DOM元素数量9.将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量10.减少iframe数量11.不要404。

标签页间通过共享一个线程，然后通过这个共享的线程来实现数据的交换。（3）使用 localStorage 的方式，我们可以在一个标签页对 localStorage 的变化事件进行监听，然后当另一个标签页修改数据的时候，我们就可以通过这个监听事件来获取到数据。因为标签页之间没有办法直接通信，因此我们可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。（4）使用 postMessage 方法，如果我们能够获得对应标签页的引用，就可以使用postMessage 方法，进行通信。

XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。XSS 的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行。

状态码304不应该认为是一种错误，而是对客户端有缓存情况下服务端的一种响应。通过特定时间内对网站抓取返回的状态码来调节对该网站的抓取频次。若网站在一定时间内一直处于304的状态，那么蜘蛛可能会降低对网站的抓取次数。相反，若网站变化的频率非常之快，每次抓取都能获取新内容，那么日积月累，的回访率也会提高。服务器为了提高网站访问速度，对之前访问的部分页面指定缓存机制，当客户端在此对这些页面进行请求，服务器会根据缓存内容判断页面与之前是否相同，若相同便直接返回304，此时客户端调用缓存内容，不必进行二次下载。

HTTP/2 是一个二进制协议。在 HTTP/1.1 版中，报文的头信息必须是文本（ASCII 编码），数据体可以是文本，也可以是二进制。HTTP/2 则是一个彻底的二进制协议，头信息和数据体都是二进制，并且统称为"帧"，可以分为头信息帧和数据帧。帧的概念是它实现多路复用的基础。

在以上过程中，Webpack 会在特定的时间点⼴播出特定的事件，插件在监听到感兴趣的事件后会执⾏特定的逻辑，并且插件可以调⽤ Webpack 提供的 API 改变 Webpack 的运⾏结果。4.编译模块：从⼊⼝⽂件出发，调⽤所有配置的 Loader 对模块进⾏翻译，再找出该模块依赖的模块，再递归本步骤直到所有⼊⼝依赖的⽂件都经过了本步骤的处理；2.开始编译：⽤上⼀步得到的参数初始化 Compiler 对象，加载所有配置的插件，执⾏对象的 run ⽅法开始执⾏编译；

类组件可以维护自身的状态变量，即组件的 state ，类组件还有不同的生命周期方法，可以让开发者能够在组件的不同阶段（挂载、更新、卸载），对组件做更多的控制。类组件则既可以充当无状态组件，也可以充当有状态组件。当一个类组件不需要管理自身状态时，也可称为无状态组件。组件内部状态且与外部无关的组件，可以考虑用状态组件，这样状态树就不会过于复杂，易于理解和管理。当一个组件不需要管理自身状态时，也就是无状态组件，应该优先设计为函数组件。比如自定义的 、 等组件。

不过，pureComponent中的 shouldComponentUpdate() 进行的是浅比较，也就是说如果是引用数据类型的数据，只会比较是s不是同一个地址，而不会比较这个地址里面的数据是否一致。如果需要重新渲染那么就需要重新开辟空间引用数据。省去虚拟DOM的生成和对比过程，达到提升性能的目的。在React中，当prop或者state发生变化时，可以通过在shouldComponentUpdate生命周期函数中执行return false来阻止页面的更新，从而减少不必要的render执行。

渲染的过程可以被中断，可以将控制权交回浏览器，让位给高优先级的任务，浏览器空闲后再恢复渲染。可以将浏览器的渲染、布局、绘制、资源加载(例如 HTML 解析)、事件响应、脚本执行视作操作系统的“进程”，需要通过某些调度策略合理地分配 CPU 资源，从而提高浏览器的用户响应速率, 同时兼顾任务执行效率。这个过程期间， React 会占据浏览器资源，这会导致用户触发的事件得不到响应，并且会导致掉帧，导致用户感觉到卡顿。（1）分批延时对DOM进行操作，避免一次性操作大量 DOM 节点，可以得到更好的用户体验；

（2）同时由于 VirtualDOM 的引入，每一次状态发生变化后，状态变化的信号会发送给组件，组件内部使用 VirtualDOM 进行计算得出需要更新的具体的 DOM 节点，然后对 DOM 进行更新操作，每次更新状态后的渲染过程需要更多的计算，而这种无用功也将浪费更多的性能，所以异步渲染变得更加至关重要。因为在created()钩子函数中，页面的DOM还未渲染，这时候也没办法操作DOM，所以，此时如果想要操作DOM，必须将操作的代码放在nextTick()的回调函数中。

（1）computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。（2）watch 侦听器 : 更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

Vue.js 是采用数据劫持结合发布者 - 订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几个步骤：（1）需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。

undefined 在 JavaScript 中不是一个保留字，这意味着可以使用 undefined 来作为一个变量名，但是这样的做法是非常危险的，它会影响对 undefined 值的判断。当对这两种类型使用 typeof 进行判断时，Null 类型化会返回 “object”，这是一个历史遗留的问题。一般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化。undefined 代表的含义是未定义，null 代表的含义是空对象。

（3）将内的字符尺寸直接设为0，即font-size:0。不足：中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。（4）消除的字符间隔letter-spacing:-8px，不足：这也设置了内的字符间隔，因此需要将内的字符间隔设为默认letter-spacing:normal。为了美观，通常是一个放在一行，这导致换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。

改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。因此translate()更⾼效，可以缩短平滑动画的绘制时间。translate 是 transform 属性的⼀个值。⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。

而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。内容是建立网站的诱因，有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。（1）优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。

（2）html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码；（3）浏览器不能自动检测网页编码，造成网页乱码。（1）网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码，反之也会出现乱码；（2）如果网页设置编码是gbk，而数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显示数据前进程序转码；（3）如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。（1）使用软件编辑HTML网页内容；

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。（1）iframe 会阻塞主页面的 onload 事件。（3）可以实现跨子域通信。（1）用来加载速度较慢的内容（如广告）（3）会产生很多页面，不容易管理。（2）无法被一些搜索引擎索识别。（2）可以使脚本可以并行下载。

defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；多个带async属性的标签，不能保证加载的顺序；

（1）src，src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。（2）href，href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。

【代码】封装Element-Plus表单组件。

在 Vite 中配置压缩代码体积可以使用插件。以下是在。

在 Vite 中配置 Element Plus 按需加载可以通过 Vite 的插件来实现。以下是在。

---<!-- 子组件 ChildComponent.vue --><template> <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /></template><script setup>import { defineProps } from 'vue';const props = defineProps(['modelValu

【代码】把一个函数变成字符串，再将字符串解析回函数。

【代码】写出1000到9999的随机数。

【代码】数组转树型结构。

1。

html 加载时发生了什么在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree，但区别很大，因为render tree能识别样式，render tree中每个NODE都有自己的style，而且render tree不包含隐藏的

1、DNS解析，将域名地址解析为ip地址 -- 读取浏览器DNS缓存 -- 读取系统DNS缓存 -- 读取路由器DNS缓存 -- 读取网络运营商DNS缓存 -- 递归搜索：blog.baidu.com -- .com 域名下查找DNS解析 -- .baidu 域名下查找...

1. 首先，Map 和 WeakMap 都属于 ES6 中新增的数据类型，用于存储键值对。2. Map 是一个普通的键值对集合，可以使用任何类型的值作为键或值，包括基本类型和对象。而 WeakMap 的键必须是对象，值可以是任何类型。3. Map 中的键值对是强引用关系，即只要 Map 中的键或值存在，Map 对象就会一直保留这个键值对，不会被垃圾回收。而 WeakMap 中的键值对是弱引用关系，如果 WeakMap 的键不再被引用，那么这个键值对就会被自动删除。

这里有几点要注意：（1）和createElement一样，cloneNode创建的节点只是游离有HTML文档外的节点，要调用appendChild方法才能添加到文档树中（2）如果复制的元素有id，则其副本同样会包含该id，由于id具有唯一性，所以在复制节点后必须要修改其id（3）调用接收的deep参数最好传入，如果不传入该参数，不同浏览器对其默认值的处理可能不同。newChild是替换的节点，可以是新的节点，也可以是页面上的节点，如果是页面上的节点，则其将被转移到新的位置oldChild是被替换的节点。

1。

entry: ⼊⼝，webpack 构建第⼀步；output: 输出loader: 模块转换器，⽤于将模块的原内容按照需求转换成新内容；plugin: 扩展插件,在 webpack 构建过程的特定时机注⼊扩展逻辑，⽤来改变或优化构建结果；mode: 控制打包环境通过选择 development, production 或 none 之中的⼀个，来设置 mode 参数，你可以启⽤ webpack 内置在相应环境下的优化。其默认值为 production。

这个就是OSI参考模型，⽽实际我们现在的互联⽹世界是就是这个理论模型的落地叫做TCP/IP协议。

1。

es6

this面向对象