实用知识混合整理

1：css3有哪些新属性？ border-radius:圆角边框

box-shadow:盒子阴影

background-size:背景图片大小

transition:过渡

transform:转换(位移 旋转 缩放)

animation:动画

linear-gradient:线性渐变

box-sizing:css3 盒子模型

2：git <1>核心概念？ 工作区(workspace)通过git add 提交到暂存区(index)通过git commit -m提交到本地仓库(repository)然后通过git push 提交到远程仓库(remote)

<2>分支操作相关命令？ git branch 查看本地所有分支 git branch -r 查看远程所有分支 git branch -a 查看本地和远程所有分支 git merge <分支名> 合并分支 git merge --abort 合并分支出现冲突时，取消合并，一切回到合并前的状态 git branch <新分支名> 基于当前分支，新建一个分支 git checkout --orphan <新分支名> 新建一个空分支（会保留之前分支的所有文件） git branch -D <分支名> 删除本地某个分支 git push <远程库名> :<分支名> 删除远程某个分支 git branch <新分支名称> <提交 ID> 从提交历史恢复某个删掉的某个分支 git branch -m <原分支名> <新分支名> 分支更名 git checkout <分支名> 切换到本地某个分支 git checkout <远程库名>/<分支名> 切换到线上某个分支 git checkout -b <新分支名> 把基于当前分支新建分支，并切换为这个分支

3：标准盒模型与怪异盒模型有什么区别？ 标准盒模型：

盒子总宽度 = width + padding + border + margin;

盒子总高度 = height + padding + border + margin

也就是，width/height 只是内容高度，不包含 padding 和 border值

怪异盒模型：

盒子总宽度 = width + margin;

盒子总高度 = height + margin;

也就是，width/height 包含了 padding和 border值

4：event loop 事件循环如何理解？ 同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行

异步任务：异步执行的任务，比如ajax网络请求，setTimeout定时函数等

（遇到同步任务先执行同步任务，然后在执行异步任务，异步任务又分为宏任务和微任务，微任务先执行然后在执行宏任务）

微任务 一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前

常见的微任务有：

Promise.then

MutaionObserver

Object.observe（已废弃；Proxy 对象替代）

process.nextTick（Node.js）

#宏任务 宏任务的时间粒度比较大，执行的时间间隔是不能精确控制的，对一些高实时性的需求就不太符合

常见的宏任务有：

script (可以理解为外层同步代码) setTimeout/setInterval UI rendering/UI事件 postMessage、MessageChannel setImmediate、I/O（Node.js）

5：数组的方法(写出一部分es5的方法)及字符串的方法？ 数组： 遍历方法 map : 映射数组，得到一个映射之后的新数组 filter:筛选数组 返回符合要求的数据并放到一个新数组里面 forEach：遍历数组 返回值undefind some:判断数组是否有元素满足条件（相当于逻辑或：一真则真，全假为假）返回值是布尔值 every:判断数组是否所有满足都满足条件（相当于逻辑与：一假则假，全真为真）返回值为布尔值 findIndex:查找元素下标，一般用于元素是引用类型 reduce:给数组每一个元素执行一次回调，一般用于数组元素求和（也可以求最大值、最小值） find：找到符合要求的第一项数据并返回

增删改查方法 push() : 末尾新增元素，返回值是新数组长度 unshift():开头新增元素，返回值是新数组长度 pop() ：末尾删除元素，返回值是删除的那个末尾元素 shift()： 开头删除元素，返回值是开头的那个末尾元素 splice() : 删除指定下标元素，第三个参数是一个剩余参数，可以在删除的元素后面插入元素

其他方法 reverse:翻转数组，会修改数组自身 sort: 数组排序，会修改数组自身 json: 拼接数组元素，返回值是拼接之后的字符串 slice: 根据下标范围查询数组元素，返回值是查询后的新数组 indexOf: 查询元素下标，一般用于元素是值类型

字符串： indexOf: 查询某个字符下标，一般用于判断字符串中是否包含某些字符 split: 切割字符串，返回值是切割后的新数组 substring: 截取字符串，返回值是截取后的字符串 replace: 替换字符串，返回值是替换后的新字符串 split：把字符串按照指定的分割符，拆分成数组中的每一项 startWith()、includes() ：从字符串中搜索传入的字符串，并返回一个表示是否包含的布尔值 toLowerCase ： 转小写 toUpperCase ： 转大写 concat：用于将一个或多个字符串拼接成一个新字符串 删：常见的有：slice() ，substr() substring() （这里的删的意思并不是说删除原字符串的内容，而是创建字符串的一个副本，再进行操作） trim()、trimLeft()、trimRight() 删除前、后或前后所有空格符，再返回新的字符串 padEnd() 复制字符串，如果小于指定长度，则在相应一边填充字符，直至满足长度条件 例： let stringValue = 'foo' console.log(stringValue.padStart(6)) // " foo" console.log(stringValue.padStart(9, '.')) // "......foo"

6：扩展运算符与rest剩余参数什么意思，应用场景？ 扩展运算符 ： 把数组或对象外壳脱掉，变成散落的数据

rest 剩余参数 ： 把一些散落的数据聚集起来，包上一层外壳

7：es6新增的数据结构set和map代表什么意思？利用其中 一种实现数组去重1：Set是es6新增的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值，我们一般称为集合Set本身是一个构造函数，用来生成 Set 数据结构

Set的实例关于增删改查的方法： add()：添加某个值，返回 Set 结构本身当添加实例中已经存在的元素，set不会进行处理添加 delete()：删除某个值，返回一个布尔值，表示删除是否成功 has()：返回一个布尔值，判断该值是否为Set的成员 clear()：清除所有成员，没有返回值

关于遍历的方法，有如下： keys()：返回键名的遍历器 values()：返回键值的遍历器 entries()：返回键值对的遍历器 forEach()：使用回调函数遍历每个成员

WeakSet： 在API中WeakSet与Set有两个区别： 没有遍历操作的API 没有size属性 WeackSet只能成员只能是引用类型，而不能是其他类型的值

2：Map类型是键值对的有序列表，而键和值都可以是任意类型，Map本身是一个构造函数，用来生成 Map 数据结构 增删改查 Map 结构的实例针对增删改查有以下属性和操作方法：

size 属性：size属性返回 Map 结构的成员总数。 set()：添加，设置键名key对应的键值为value，然后返回整个 Map 结构，如果key已经有值，则键值会被更新，否则就新生成该键同时返回的是当前Map对象，可采用链式写法 get()：get方法读取key对应的键值，如果找不到key，返回undefined has()：has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中 delete()：delete方法删除某个键，返回true。如果删除失败，返回false clear()：clear方法清除所有成员，没有返回值

遍历 Map结构原生提供三个遍历器生成函数和一个遍历方法： keys()：返回键名的遍历器 values()：返回键值的遍历器 entries()：返回所有成员的遍历器 forEach()：遍历 Map 的所有成员

WeakMap： WeakMap结构与Map结构类似，也是用于生成键值对的集合 在API中WeakMap与Map有两个区别： 没有遍历操作的API 没有clear清空方法

8：如何理解Promise？ promise 是 es6 提供的一种异步解决方案，在我的理解中 promise 就是把异步操作换了一种写法 从之前的嵌套回调函数 变成了链式的写法 promise 本身其实就是一个容器 里面放异步的代码 这样就可以让这个异步的代码执行.then .catch 的操作

1.1 说⼀下你对 promise 的理解?(必问) promise 是 es6 提供的一种异步解决方案，在我的理解中 promise 就是把异步操作换了一种写法 从之前的嵌套回调函数 变成了链式的写法

1.2 什么是 promise?通过 promise 能够解决什么问题?

promise 是 es6 提供的一种异步解决方案， promise 可以解决回调地狱的问题 回调地狱就是拿到 a 接口的数据后才能根据 a 返回的数据请求 b 接口 这样回调函数嵌套回调函数的写法就叫回调地狱 这种写法会让代码臃肿 并且后期难以维护 除了 promise 之外 async 是解决回调地狱的最终方案

1.3 说⼀下 promise 的特点?也就是三种状态? promise ⼀共有三个状态,分别是进⾏中,成功或者失败 如何成功的话可以通过 resolve ⽅法将正确结 果返回出去,通过.then 的⽅式进⾏接受,失败的话可以通过 reject 的⽅式将失败的结果返回出去,通 过.catch 的⽅式进⾏接受,pending 状态是进⾏中,⼀旦进⾏之后,他的状态是不可逆的

1.4 说⼀下 promise 怎么⽤? 如果要使⽤ promise,我们需要对 promise 进⾏实例化,在实例化的构造函数⾥⾯有⼀个回调函数,这个 回调函数⾥⾯有两个参数,分别是 resolve 和 reject,我们可以通过 promise 的实例化对象调⽤.then 或 者.catch ⽅式接受结果

1.5 我们之前遇到的哪些东西本身就是一个 promise 对象？ jq 的 ajax 请求本身就是一个 promise 对象 所以可以直接用.then axios 也是一个 promise 对象

原生的 ajax 以及 小程序的 wx.request 请求都不是 promise 对象 不能用。then 的写法，如果想用链式写法 就要自己封装一个 promise

1.6. promise 的 all 和 race 方法

promise 还给我们提供了.all 和 race, 其中 all ⽅法的作⽤是将多个请求合并成⼀个请求, ⽐如当⾸⻚ 要请求 10 个接⼝,我们可以 promise.all 进⾏合并,.race 的作⽤也可以将多个请求合并成⼀个请求,不过 是谁先请求成功就先返回谁.

9：说一下es6的导入导出如何使用？         默认导出的语法: export default {默认导出的成员}         默认导入的语法: import 变量名称 from '模块路径'

10：css实现元素水平垂直居中？

<1>

• display: flex;写在父元素上这就是定义了一个伸缩容器
• justify-content 主轴对齐方式，默认是横轴
• align-items 纵轴对齐方式，默认是纵轴

<2>flex-给子项设置

 
 
<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: flex;
}
.child {
  background: red;
  margin: auto; // 水平垂直居中
}  
</style>
 
<div class="box">
  <div class="child">水平垂直居中</div>
</div>

<3>定位:子绝父相

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: red;
}  
</style>
 
<div class="box">
  <div class="child">水平垂直居中</div>
</div>

<4>tabel-cell实现垂直居中

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: table-cell;
  vertical-align: middle;  // 设置元素在垂直方向上的对齐方式
  text-align: center;
}
.child {
  background: red;
  display: inline-block;
}  
</style>
 
<div class="box">
  <div class="child">水平垂直居中</div>
</div>

<5>给容器加个伪元素

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  text-align: center;
}
.box::after {
  content: "";
  line-height: 200px;
}
.child {
  display: inline-block;
  background: red;
}
  
</style>
 
<div class="box">
  <div class="child">水平垂直居中</div>
</div>

11css3动画属性有哪些？

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。

12什么是css hack? ie6,7,8的hack分别是多少？ CSS hack 是指在 CSS 中使用特殊的语法和规则，以便在不同的浏览器和版本之间产生不同的效果。这种技术通常被称为浏览器兼容性问题解决方案。

在过去，由于不同浏览器对CSS标准的支持程度不同，开发者需要使用CSS hack来解决一些问题，尤其是在早期的IE版本中，因为它们并没有完全遵守标准。

下面是一些针对 IE6 和 IE7 的常见 CSS hack：

对于 IE6：

1. _ 前缀：在某些 CSS 属性前添加 _ 前缀可以使它们只在 IE6 中生效。

例如：

*background-color: red; /* Applies only to IE6 and below */

2. * 前缀：在某些 CSS 属性前添加 * 前缀可以使它们只在 IE6 中生效。

例如：

*padding-left: 10px; /* Applies only to IE6 and below */

对于 IE7：

1. *+html 选择器：可以用 *+html 选择器来针对 IE7 进行特殊样式处理。

例如：

*+html .my-class { background-color: red; } /* Applies only to IE7 */

13 有哪些方法可以优化图片的加载

1. 压缩图片：使用图片压缩工具将图片文件压缩到更小的尺寸。这可以通过减少图片质量、压缩算法等方式来实现。
2. 使用适当的图片格式：对于不同类型的图片，应该使用不同的格式来进行优化。比如说，JPEG 格式适合用于图片、PNG 格式适合用于图标或者简单的图形。
3. 图片懒加载：将页面中的图片延迟加载，即当用户滚动到某个位置时，再加载该位置的图片，以减少页面首次加载时间。
4. 基于浏览器的缓存：使用浏览器缓存来提高页面加载速度。浏览器会将页面中的图片、脚本等文件缓存起来，下次访问时不需要重新下载，从而加快页面加载速度。
5. 使用 CDN 加速：将图片等静态资源上传至 CDN（内容分发网络）上，使用户可以从最近的节点获取这些资源，从而减少延迟时间，提高页面加载速度。
6. 使用 WebP 图片格式：WebP 是一种现代的图片格式，与 JPEG 和 PNG 相比可以提供更小的文件尺寸和更好的质量，同时也支持透明度和动画等特性。
7. 去除图片元数据：图片文件中可能包含一些元数据，比如拍摄日期、摄影师、地点等信息，这些信息对于网页显示来说是无用的，可以通过工具去除它们，从而减小图片文件尺寸。
8. 使用 CSS Sprites：CSS Sprites 是一种将多个图片合并成一张图片，并通过 CSS 属性来控制显示的技术。这可以减少 HTTP 请求次数，从而提高页面加载速度。
9. 缩小图片尺寸：将大图片缩小到实际需要的尺寸，以减少文件尺寸和加载时间。
10. 使用响应式图片：使用 HTML5 中的 picture 标签和 source 标签来根据不同设备屏幕大小加载不同大小的图片，从而提高页面加载速度。

14 如何实现图片的懒加载？

懒加载（Lazy Loading）是一种优化网站性能的技术，它可以使网站的加载速度更快。懒加载指的是延迟加载图片或其他资源，只有当用户滚动到页面中需要显示它们的位置时，才开始加载它们。

以下是一个基本的图片懒加载实现的示例代码：

HTML：

<img class="lazy" data-src="image.jpg" alt="Image" width="600" height="400">

CSS：

.lazy {
  opacity: 0; /* 初始时图片不可见 */
  transition: opacity 0.3s ease-in-out;
}

.lazy.loaded {
  opacity: 1; /* 图片加载后可见 */
}

JavaScript：

const lazyImages = document.querySelectorAll('.lazy');

const lazyLoad = target => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.getAttribute('data-src');

        img.setAttribute('src', src);
        img.classList.add('loaded');
        observer.disconnect();
      }
    });
  });

  io.observe(target);
};

lazyImages.forEach(lazyLoad);

解释：

1. 首先，我们使用 querySelectorAll 方法获取到所有的懒加载图片。
2. 然后，我们定义了一个 lazyLoad 函数，它接收一个目标元素作为参数，并创建了一个 IntersectionObserver 对象。IntersectionObserver 可以监听元素的可见性，当目标元素进入视口时，就会触发回调函数。
3. 在回调函数中，我们检查目标元素是否可见，如果可见，就获取 data-src 属性中的图片地址，并将它设置为 src 属性的值，然后给图片添加一个 loaded 类，最后调用 disconnect 方法断开观察器的连接。
4. 最后，我们对每个懒加载图片都调用 lazyLoad 函数进行处理。

注意：以上代码仅为示例，实际情况可能需要进行适当的修改。

IntersectionObserver 对象是什么？

IntersectionObserver 是一种现代浏览器提供的 JavaScript API，用于监测一个目标元素与其祖先元素或视口之间的交叉状态。它可以实现很多有用的功能，比如实现图片懒加载、实现滚动时元素动画效果、实现响应式布局等等。

IntersectionObserver 对象可以通过 new 关键字创建，它接受一个回调函数作为参数。每当目标元素进入或离开视口，或者与祖先元素的交叉状态发生变化时，回调函数都会被调用。回调函数会接收一个 IntersectionObserverEntry 对象的数组作为参数，每个 IntersectionObserverEntry 对象都代表一个目标元素与视口或祖先元素的交叉状态。

IntersectionObserver 对象还可以配置一些选项，比如 threshold（交叉比例阈值）、root（根元素）、rootMargin（根元素的边距），这些选项可以用来调整观察器的行为。

相对于传统的事件监听方式，IntersectionObserver 更加高效和灵活。它可以减少回调函数的调用次数，避免了大量的重复计算，从而提高了网站的性能。同时，它也可以处理动态生成的元素，以及在任何时候都可以监听元素的可见性，无需重新计算位置。

Regenerate response

css实现一行文字超出边界，显示省略号

您可以使用CSS中的 text-overflow 属性来实现这个效果。

具体步骤如下：

1. 首先，将需要省略的文本放入一个容器元素中。例如，您可以使用一个 div 元素。
2. 接下来，设置该元素的宽度，以限制文本在容器中的宽度。
3. 然后，将 white-space 属性设置为 nowrap，这将强制文本不换行。
4. 最后，设置 text-overflow 属性为 ellipsis，它将在文本溢出容器时显示省略号。

以下是一个示例代码：

.container {
  width: 200px; /* 容器宽度 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出容器宽度的内容隐藏 */
  text-overflow: ellipsis; /* 超出容器宽度的内容用省略号表示 */
}

如何将 JS、CSS、图片等缓存到本地浏览器？

将静态资源缓存在本地浏览器可以提高网站的性能和加载速度，因为在后续的访问中可以避免重新下载这些资源。以下是几种将静态资源缓存到本地浏览器的方法：

1. HTTP缓存：可以通过在响应头中设置Cache-Control和Expires字段来控制浏览器缓存静态资源的时间和方式。例如，设置Cache-Control: max-age=3600表示浏览器可以在3600秒内缓存该资源。
2. Service Worker：Service Worker是一种在浏览器后台运行的脚本，可以拦截网络请求并返回缓存的响应。使用Service Worker可以更加灵活地控制缓存策略，并可以离线缓存网页内容。
3. localStorage：可以使用浏览器提供的localStorage来存储一些较小的静态资源，例如图标和小图片。localStorage是浏览器提供的一种简单的键值对存储方式，可以在浏览器关闭后依然保持。
4. IndexedDB：IndexedDB是一种浏览器提供的高级客户端存储技术，可以用来存储较大的静态资源，例如音频、视频等。IndexedDB提供了一种类似于关系型数据库的API，可以进行查询和事务控制。

以上方法可以根据具体的场景和需求进行选择和组合使用。需要注意的是，缓存静态资源可能会导致用户在访问过期的资源时看到旧的内容，因此需要谨慎处理缓存策略。

如何何设置Cache-Control和Expires字段

在Node.js中设置HTTP响应头中的Cache-Control和Expires字段，可以使用Node.js内置的HTTP模块。

下面是一个示例代码，演示如何在Node.js中设置Cache-Control和Expires字段：

const http = require('http');
const server = http.createServer((req, res) => {
  const html = '<html><body><h1>Hello World!</h1></body></html>';
  
  // 设置Cache-Control和Expires响应头
  res.setHeader('Cache-Control', 'max-age=3600');
  res.setHeader('Expires', new Date(Date.now() + 3600 * 1000).toUTCString());

  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end(html);
});

server.listen(3000, () => {
  console.log('Server listening on http://localhost:3000');
});