19. VSCode的设置分为哪几种?
VS Code提供了两种设置方式：
- 用户设置： 这种方式进行的设置，是全局设置，会应用于该用户打开的所有工程；
- 工作空间设置：工作空间是指使用VS Code打开的某个文件夹，在该文件夹下会创建一个名为.vscode的隐藏文件夹，工作空间的设置会覆盖用户的设置。
VS Code的设置文件为setting.json。用户设置的文件保存在如下目录：
- Window %APPDATA%\Code\User\settings.json
- Mac $HOME/Library/Application Support/Code/User/settings.json
- Linux $HOME/.config/Code/User/settings.json
18. Vue3 Plugins的执行顺序?
如下的程序片段， app.use(loadSDK).use(router).use(setVConsole); 这一句，并不是串行执行，而是
loadSDK，router和setVConsle并行执行。这一点可能跟你想得不一样，即便app.use(loadSDK)中的loadSDK是个Promise。
import { toLogin, appInit, setVConsole, loadSDK } from '@/plugins';
// 有登陆态,才执行后续初始化流程
toLogin().then(() => {
const app = createApp(App).use(appInit);
app.use(loadSDK).use(router).use(setVConsole);
app.mount('#app');
});
做如下改造之后, 执行顺序符合预期了。
// 有登陆态,才执行后续初始化流程
toLogin().then(async () => {
// router渲染逻辑必须等sdk加载完之后再执行
// app.use(loadSDK).use(router).use(setVConsole).use(cancelRequest);
await loadSDK();
const app = createApp(App).use(appInit);
app.use(router).use(setVConsole);
app.mount('#app');
});
17.如何用IntersectionObserver实现图片懒加载?
核心思路是判断，某个容器下的所有的图片，是否滚动到可视区域，判断条件是entry.intersectionRect.top <= document.documentElement.clientHeight, 某张图片未进入页面可视区域前，距离屏幕顶部的距离，是大于屏幕可用区域的高度的，未进入可视区域前，不加载图片，进入可视区域，才开始加载图片。对于已经加载过的图片，移除观察。 页面销毁时，移除对懒加载容器下所有图片的观察，观察其是否进入可视区域。
/**
* api监测图片在视图区域进行替换url，实现懒加载 父容器加id lazyLoadImgContent
* @return {[type]} [description]
*/
export const lazyLoadImg = () => {
// 监测高度
const height = document.documentElement.clientHeight;
const observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry: any) => {
if (entry.intersectionRect.top <= height) {
const img = new Image(); // 创建一个Image对象，实现图片的预下载
img.onload = function () {
img.onload = null;
// 延迟展示loading
setTimeout(() => {
/* 替换属性 */
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}, 100);
};
img.src = entry.target.src;
}
});
},
{ rootMargin: `${0}px 0px 0px 0px` }
);
Array.prototype.forEach.call(document.querySelectorAll('#lazyLoadImgContent img'), (ele) => {
observer.observe(ele);
});
};
/**
* 剔除监听
* @return {[type]} [description]
*/
export const removerObserve = () => {
const observer = new IntersectionObserver((entries, observer) => {});
Array.prototype.forEach.call(document.querySelectorAll('#lazyLoadImgContent img'), (ele) => {
observer.unobserve(ele);
});
};
16. 微信真机调试功能，时而可以用，时而不能用，是什么原因？
在微信中，点击下面的链接，开启调试功能之后，过了一段时间，你会发现调试功能用不了。原因是微信自动升级了，每次升级之后，需要重新激活一下调试功能。
http://debugxweb.qq.com/?inspector=true
15. 在企业微信中，打开一个h5自建应用页面，分享出去之后，出现一个四周有黑边框的企业微信图标，怎么消除这个黑边框？
经过排查，发现当设置的自定义分享参数imgUrl中的图片加载不出来时，企微微信会配置一个兜底图标，就是下图这个图标，因为这个图标是个圆角图片，所以四周出现黑边框。所以要想消除这个黑边框，就要保证自定义分享参数的imgUrl，配置的链接图片可以被正常加载到，就不会出现兜底图了。
14. 打开一个站点，报如下错误，This XML file does not appear to have any style information associated with it. The document tree is shown below. 是什么含义？
这是因为xml文档没有关联一个XIST文件，浏览器没有办法对xml文档进行渲染，我们需要在xml文档中加入一个处理指令：添加一个xml文档的样式。但我们需要处理的是为什么访问站点报这样的错，而不是这个错误的展示浏览器不能正确渲染。
<?xml-stylesheet type="text/css" href="book.css"?>
<Error>
<Code>AccessDenied</Code>
<BucketName>sit-mainsite-cos-1255000026</BucketName>
<RequestId>tx00000000000001a46c990-0064b09e31-5af206-default</RequestId>
<HostId>5af206-default-default</HostId>
</Error>
13. <script type="module" crossorigin src="xxx.js"></script>是什么含义？
这说明这个xx.js内部使用了es-module语法，所以在script标签上加上module声明。
// index.js
import test from './module.js';
console.log(test())
12. .cjs和.mjs文件的区别？
.cjs 代表使用 CommonJS 模块，.mjs 代表使用 ES 模块。CommonJS 模块的 require() 是同步加载的，而ES 模块的 import() 是异步加载的。require() 不能加载 ES 模块，import 可以加载 CommonJs 模块，但是不能解构。当你 .cjs 的时候，那么就代表使用 CommonJs 模块规范，不能使用 ES 模块的 import 命令，使用.mjs的话，不能使用require。如果两种模块都想用的话，最简单的就是使用 ES 模块，用 import() 导入 CommonJs 的代码。
11. 企微微信分享出去的文章，分享卡片中的图片显示不出来?
从企微中分享一篇文章到微信，分享出来的分享卡片，图片不展示。而将这篇文章在微信中分享出去之后，分享卡片中的图片展示正常。这是什么原因呢? 在网上查询了一下，看到有一种解释说得通，分享出去的文章，分享配置中的图片太大，或者分享的时候，网络不太好，图片还在加载中，就会造成分享出去的文章，分享卡片中的图片展示不出来。
10. 如何查看某个请求是哪个方法发出去的？
接手了一段写的不是特别清晰明了的代码功能，测试测出一个问题，在排查问题的过程中，发现有一个接口调用，不知道从哪里发出的，死活找不到地方。抱着试试看的态度，用chrome网络调试工具的启动器看了一下，效果立竿见影。
9. 如何提取文字中的数字？
提取的时候，要考虑小数点，否则遇到0.00元这种数字，提取出来会变成000
console.log("测试一下提取0.25文字中的数字".replace(/[^/\d+(\.\d+)?/]/gi, ''));
// 0.25
8. 如果想取消外部sdk中的fetch超时请求，该怎么做？
const oldFetch = window.fetch;
window.fetch = function (input: RequestInfo| URL, init: RequestInit | undefined = {} ){
const controller = new AbortController();
init.signal = controller.signal;
setTimeout(() => controller.abort(),10*1000);
return oldFetch.call(this, input, init);
}
7. css box-shadow的属性有哪些？
- offset-x 为负值，向左偏移，为正值，向右偏移
- offset-y 为负值，向上偏移，为正值，向下偏移
inset和outset的区别,见下图:
6. vue3+less,无法通过v-bind设置图像资源，如何解决？
如下的代码会报错：
<script setup lang="ts">
import ActivityBgImg from '@/views/InstantDiscount/images/activity-bg.png';
</script>
<style lang="less" scoped>
.instant-discount-page {
background-image:v-bind('`url(${ActivityBgImg})`');
}
</style>
查了一圈，目前只有下面的方法可用
<template>
<div v-bind:style="{ 'background-image': 'url(' + imageUrl + ')' }"></div>
</template>
<script>
export default {
data() {
return {
imageUrl: 'https://example.com/image.jpg'
}
}
}
</script>
5. css的margin塌陷如何解决？
父容器中有一个子元素，父元素设置了背景色，子元素设置了垂直方向的margin。此时会发生不同寻常的现象，子元素设置的margin, 表现在父元素上，而不是子元素上。父元素的背景色出现空白。margin发生了折叠。解决方法有如下三种:
1）给内层子元素添加浮动；
2）在外层父元素内加 padding-top；
3）在外层父元素加 overflow:hidden；
注意：只有垂直方向上才会出现此现象，水平方向不会出现该现象；
4. Chrome network面板，为什么完成用时比加载时间长?
如图所示，为什么完成用时比加载时间长? 要看看这两个请求的含义，
- finish：页面最后一个请求截止的时间，如果页面加载完成后，触发了ajax请求，那么该时间会变更。
- load：页面所有的资源（图片、音频、视频等）加载完成的时间。
3.Chrome打断点调试代码时，如何减少底层库的打扰？
找到对应的底层依赖脚本文件，在内容区域右键会出现一个「Blackbox Script」的功能，点击一下从此断点不会进入到这个底层依赖脚本了。如下图所示：
2. windows 如何同时复制间隔的几行内容?
按住alt键，然后用鼠标选择需要复制的间隔行。选完之后，按下Ctrl+C,然后Ctrl+V插入到别的文件中。
1. Provisional headers are shown？是什么意思，如何解决？
字面意思是“显示了临时报文头”，浏览器第一次发送请求，请求被阻塞，未收到响应。当要求浏览器再次发送同一个请求时，请求同样没有收到响应，浏览器就会报这个警告。
- 该数据直接采用了缓存，并没有发送请求，从缓存中获得的通信显示为“显示临时标题
- 服务器未及时响应（超时）
- 请求被浏览器插件拦截
- 跨域请求被浏览器拦截
