qq_34738754的博客

【代码】vue3使用jsx渲染以及注意点。

[2020.01.02更新] link和@import的是什么？有什么区别？[2021-01-14 更新] CSS方式实现一个不知道宽高的 div 居中都有哪几种方法？[2021-01-16 更新] CSS 伪类与伪元素的区别？[2021-02-06 更新] 说一下盒模型的区别?介绍一下标准的css盒模型? border-box和content -box有什么区别?[2021-02-23 更新] BFC是什么?触发BFC的条件是什么?有哪些应用场景?[2021-02-24 更新] 说一下什么是重绘重排，哪些

HTTP/1.1定义的请求方法有8种: GET、POST、 PUT、 DELETE、PATCH、 HEAD、OPTIONS、TRACE。最常的两种GET和POST，如果是RESTful接口的话- -般会 用到GET、POST、 DELETE、 PUT。

​ 浏览器每次发起请求时，现在本地缓存中查找结果以及缓存标识，根据缓存标识来判断是否使用本地缓存。如果缓存有效，则使用本地缓存；否则，则向服务器发起请求并携带缓存标识。​ 根据是否需要向服务器发起HTTP请求，将缓存过程划分为两个部分：强制缓存和协商缓存，强制缓存优先于协商缓存。

资源模块；moduleIds & chunkIds 的优化；移除Node.js的polyfill；更强大的tree-shaking；持久化缓存提高性能；Module Federation 模块联邦；Module Federation是为了解决独立应用之间代码共享问题。可以在项目内动态加载其他项目的代码，同步可以共享依赖。通过细化功能模块、组件复用、共享第三方库、runtime dependencies线上加载npm包等，可以更好的服务于多页应用、微前端等开发模式。

如果声明的计算属性计算量非常大的时候，而且访问量次数非常多，改变的时机却很小，那就需要用到computed;缓存会让我们减少很多计算量。

​ 从本质上讲，Virtual Dom是一个Javascript对象，通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式，配合不同的渲染工具，将使跨平台渲染成为可能。通过事物处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能​ Virtual Dom是对DOM的抽象，这个对象是更加轻量级的对DOM的描述。

【代码】大厂面试--使用Typescript 的优势有哪些？

​ 从本质上讲，Virtual Dom是一个Javascript对象，通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式，配合不同的渲染工具，将使跨平台渲染成为可能。通过事物处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能​ Virtual Dom是对DOM的抽象，这个对象是更加轻量级的对DOM的描述。

​ Node是一个让Javascript运行在服务端的开发平台，它让Javascript成为了与PHP、Python、Perl、Ruby等服务器语言平起平坐的脚本语言。目前Nodejs已发展成一个成熟的开发平台，吸引了许多开发者。有许多大型高流量网站都采用Nodejs进行开发，此外，开发人员还可以使用它来开发一些快速移动Web框架。

​ 不进入主线程，进入任务队列的任务。只有当主线程上的同步任务执行完成后，主线程会读取任务队列中的任务，开始异步执行。任务队列中的事件包括IO设备的事件、用户产生的事件。​ 任务队列是一个事件的队列，I0设备完成-项任务后，就在队列中添加一个事件，表示相关的异步任务可以进入执行栈了。​ 回调函数是作为参数传给另一个函数的函数，这个函数会在另-个函数执行完成后执行。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。​ 主线程上排队执行的任务，前一个任务执行完成后才能执行下一个任务。

怎么利用call、apply来求一个数组中最大或者最小值如何利用call、apply来做继承apply、call、bind的区别和主要应用场景。

使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为0 ),如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。当触发 事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。**原理：**规定在一个单位时间内，只能触发一次函数。**原理：**在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

ES5中主要通过构造函数方式和原型方式来定义一个类（Function）；* ES6中通过class类来定义类，类声明创建一个基于原型继承的具有给定名称的新类；

ES5中主要通过构造函数方式和原型方式来定义一个类（Function）；* ES6中通过class类来定义类，类声明创建一个基于原型继承的具有给定名称的新类；

​commonjs是同步加载的。主要是在nodejs也就是服务端 应用的模块化机制，通过导出声明， 通过加载。每个文件都是一个模块。他有自己的作用域，文件内的变量，属性函数等不能被外界访问。node会将模块缓存，第二次加载会直接在缓存中获取。​AMD是异步加载的。主要应用在浏览器环境下。requireJS 是遵循AMD规范的模块化工具。他是通过define()定 义声明，通过加载。​ES6的模块化加载时通过导出,用import导入可通过{}对导出的内容进行解构。

【代码】介绍下 promise的特性、优缺点？

​ 函数执行后返回结果是一个内部函数，并被外部变量所引用，如果内部函数持有被执行函数作用域的变量，即形成了闭包。​ 可以在内部函数访问到外部函数的作用域。​ 使用闭包，一可以读取函数中的变量，二可以将函数中的变量存储在内存中，保护变量不被污染。而正因为闭包会把函数中的变量值存储在内存中，会对内存有消耗，所以不能滥用闭包，否则会影响网页性能，造成内存泄露。当不需要使用闭包时，要及时释放内存，可将内存函数对象的变量赋值为null。

不自动换行能够识别width 和 height，line-height ，padding，marign。内联块状元素综合了前两种的特性却又各有取舍。内联元素: 用于不指定宽高，宽高由内容指定;内联块状元素: 用于指定元素宽高，不占满一行。块状元素: 用于指定宽高，标签占满一行;默认排列方式为从左到右。

但与defer不同的是，标记async的脚本并不保证按照他们的先后顺序执行。​ HTML5规范要求脚本按照他们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。​ defer，这个布尔属性被设定用来通知浏览器该脚本将在文档完成后解析，触发DOMContentLoaded事件前执行，如果缺少src属性，就不会本使用，因此这种情况下它不起作用。

1.重排、重绘1.1 什么是重绘重排：​ 当我们改变了一个元素的尺寸位置属性时，会重新进行样式 计算(computed style)布局(layout) 绘制(paint) 以及后面的所有流程，这种行为成为。​ 当改变了某个元素的颜色属性时不会重新触发布局，但还是会触发样式计算和绘制这就是。​ 我们可以发现重排和重绘都会占用主线程，还有JS也会运行在主线程，所以就会出现抢占执行时间的问题，如果你写了一个不断导致重排重绘的动画，浏览器则需要在每一帧都运行样式计算布局和绘制的操作。

​ 避免margin重叠,两个块相邻就会导致外边距被折叠，给中 间的设置BFC就会避免，方法就是套个父级设置overflow: .hidden。Box是csS布局的对象和基本单位，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。​ 防止浮动导致父元素高度塌陷父级设置overflow:hidden,元素float:right;1、清除内部的浮动，触发父元素的BFC属性，会包含float元素;3、阻止元素被浮动元素覆盖，各自是独立的渲染区域;​ 块级格式化上下文布局规则。

### 一、伪类(pseudo- classes)其核心就是用来选择DOM树之外的信息，不能够被普通选择器选择的文档之外的元素，用来添加一些选择器的特殊效果。比如:hover :active :visited :link :visited :frst- -child :focus :lang等由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式;当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

【代码】CSS方式实现一个不知道宽高的 div 居中都有哪几种方法？

​ 链接方式指的是使用HTML头部的标签引入外部的CSS文件。导入方式指的是使用CSS规则引入外部CSS文件。

在学习了上面的 11 种垂直居中布局方法后，我们简单概括一下如果你的项目在 PC 端有兼容性要求并且宽高固定，推荐使用absolute + 负 margin方法实现；如果你的项目在 PC 端有兼容性要求并且宽高不固定，推荐使用css-table方式实现；如果你的项目在 PC 端无兼容性要求，推荐使用flex实现居中，当然不考虑 IE 的话，grid也是个不错的选择；如果你的项目在移动端使用，那么推荐你使用flexgrid也可作为备选。