每月进步一点点--202307持续记录每个月工作中遇到的各种疑难杂症以及学到的一些新技能，比如如何设置合适的编程字体，页

28. 前台服务和后台服务的差异？

可见不同

后台运行：后台运行时，软件在桌面任务栏上不可见，在资源管理器里运行。
前台运行：前台运行时，软件在桌面任务栏上可见，在窗口里运行。

操作不同

后台运行：后台运行不能和电脑使用者互动，但可以在后台获得到用户消息后及时通知用户。
前台运行：前台运行能和电脑使用者进行交互操作。

执行不同

后台运行：后台运行适合进行轻量的任务的执行，不可能实现在前台运行的应用程序的所有功能。
前台运行：前台运行展示软件的所有功能，但也会占用大量的系统资源。

27. 怎么知道dom操作比较耗时的？

打开Chrome浏览器DevTools的性能面板，找到主线程，查看有红色线条的地方，对这些地方的函数调用耗时进行排名，点击进入具体的文件，chrome调试工具会标示出比较耗时的语句，然后你会发现，基本上都是dom操作语句。

26. 如何将VSCode中的字体改成适合编程的字体?

在 VSCode 中推荐使用 JetBrains Mono 编程专用字体,JetBrains 公司最新出了一个字体 JetBrains Mono，据称是专为改善看代码体验而生
JetBrains Mono字体下载
Consolas字体下载

安装

设置

效果

JetBrains Mono字体效果

Consolas字体效果

25. 页面中报出一个undefined的图片请求，是什么原因引起的？

最后查明，是动态设置背景图片，接口值还没返回前，浏览器已经开始加载背景图，这就会造成加载图片地址出现undefined的情况。所以对于动态图片的加载，都要加上v-if判断条件。

   <div
        v-if="cardInfo.avatar"
        class="card2-head-avatar"
        :style="{ backgroundImage: 'url(' + cardInfo.avatar + ')' }"
        @click="handleClickAvatar"
      >

24. wework.qpic.cn，p.qlogo.cn， p.qpic.cn, shp.qpic.cn, wx.qlogo.cn图床地址用途？

wework.qpic.cn和p.qlogo.cn是企微现在的图床。企业微信截图_16897575274988.png

wx.qlogo.cn 企业微信原来头像的图床

企业微信截图_16897577028324.png

shp.qpic.cn企业微信头像

企业微信截图_1689757802628.png

p.qpic.cn是QQ图床

企业微信截图_1689758076589.png

23. chrome 如果给元素添加新的样式类?

步骤一:

步骤二:

22. dayjs常用api有哪些?

// 时间格式化
dayjs().format('YYYY-MM-DD')

// 设置到一个时间的开始
dayjs().startOf('year')

// 设置到一个时间的末尾
dayjs().endOf('month')

// 加减时间
dayjs('2019-01-25').add(1, 'day').subtract(1, 'year')

// 获取时间戳
dayjs('2019-01-25').valueOf() // 1548381600000
+dayjs(1548381600000) // 1548381600000
// 返回当前实例的 UNIX 时间戳，10位数字，秒。
dayjs('2019-01-25').unix() // 1548381600

// 范围比较
dayjs().isBefore('2011-01-01', 'year')
dayjs().isSame('2011-01-01', 'year')
dayjs().isAfter('2011-01-01', 'year')
dayjs('2010-10-20').isBetween('2010-10-19', dayjs('2010-10-25'))

21. WEB应用内容安全策略(Content Security Policy)常见值有哪些？

CSP被设计出来的目的就是为了有效防范内容注入攻击, 如XSS攻击等.只加载被允许的网站资源.对于不被允许的网站资源不予加载和执行。同时,还可以将不被允许的资源链接和详情报告给指定的网址。提高了网络的安全性。

常见策略类型

策略指令	策略说明
default-src	默认加载策略
script-src	外部脚本
style-src	样式表
img-src	图像
media-src	媒体文件（音频和视频）
font-src	字体文件
object-src	插件（比如 Flash）
child-src	框架
frame-ancestors	嵌入的外部资源（比如`<iframe>`、`<iframe>`、`<embed>`和`<applet>`）
connect-src	HTTP 连接（通过 XHR、WebSockets、EventSource等）
worker-src	worker脚本
manifest-src	manifest 文件

策略值类型

指令值	指令值说明
*	允许任何内容
‘none’	不允许任何内容
‘self’	允许来自相同来源的内容（相同的协议、域名和端口）
data:	允许 data: 协议（如 base64 编码的图片）
www.google.com	允许加载指定域名的资源
*.google.com	允许加载 \google.com 任何子域的资源
‘unsafe-inline’	允许使用内联资源,如内联的 `<script>` 元素、javascript: URL、内联的事件处理函数和内联的 `<style>` 元素.两侧单引号是必须的.
‘unsafe-eval’	允许使用`eval()`等通过字符串创建代码的方法。两侧单引号是必须的。

20. html 常见的meta标签有哪些?

<meta> 元素内容不会显示在页面上，但是对于机器是可读的，可用于页面描述、关键字用于搜索引擎优化，或其他 web 服务。

属性	值	描述
charset	character_set	规定 HTML 文档的字符编码。
content	text	定义与 http-equiv 或 name 属性相关的元信息。
http-equiv	content-security-policy content-type default-style refresh	把 content 属性关联到 HTTP 头部。
name	application-name author description generator keywords viewport	把 content 属性关联到一个名称。
scheme	format/URI	定义用于翻译 content 属性值的格式。，html5不支持此标签

举例说明:

<meta charset="UTF-8" />
<meta http-equiv="expires" content="31 Dec 2008">
<meta http-equiv="Content-Security-Policy" content="default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta http-equiv="refresh" content="5;url=https://www.google.com">
<meta http-equiv="Pragma" content="no-cache">
<meta name="author" content="tank">
<meta name="description" content="meta demo">
<meta name="keywords" content="HTML,JS,Less">
<meta name="revised" content="tank,18/7/23">
<meta name="color-scheme" content="dark light">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1">

其中<meta name="robots" content="index,follow">中content的取值可以是：

取值	说明
`index`	允许机器人索引此页面（默认）。
`follow`	允许机器人跟随此页面上的链接（默认）。
`noindex`	要求机器人不索引此页面。
`nofollow`	要求机器人不跟随此页面上的链接。
`all`	与 index, follow 相同。
`none`	与 noindex, nofollow 相同。
`noarchive`	要求搜索引擎不缓存页面内容。
`nocache`	noarchive 的替代名称。
`nosnippet`	防止在搜索引擎结果中显示页面的任何描述。
`noimageindex`	要求此页面不显示为图片索引的引用页面。

<meta name="viewport" content="width=device-width, initial-scale=1">中content的取值可以是：

取值	说明
width	视口的宽度，可以设置为特殊值 device-width，数字（1-10000），或 100vw, 100% 这样的有效值。负值：忽略。
height	视口的高度，可以设置为特殊值 device-height，数字（1-10000），或 100vh, 100% 这样的有效值。负值：忽略。
initial-scale	控制第一次加载页面时的缩放级别。最小值：0.1。最大值：10。默认值：1。负值：忽略。
minimum-scale	控制页面上允许的缩小程度。最小值：0.1。最大值：10。默认值：0.1。负值：忽略。
maximum-scale	控制页面上允许的放大程度。最小值：0.1。最大值：10。默认值：10。负值：忽略。
user-scalable	控制页面上是否允许放大和缩小操作。有效值：0、1、yes 或 no。默认值：1，与 yes 相同。将该值设置为 0（与否相同），将违反 Web 内容可访问性指南 (WCAG)。

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？是什么意思，如何解决？

字面意思是“显示了临时报文头”，浏览器第一次发送请求，请求被阻塞，未收到响应。当要求浏览器再次发送同一个请求时，请求同样没有收到响应，浏览器就会报这个警告。

该数据直接采用了缓存，并没有发送请求，从缓存中获得的通信显示为“显示临时标题
服务器未及时响应（超时）
请求被浏览器插件拦截
跨域请求被浏览器拦截

每月进步一点点--202307