1. IE 盒模型或怪异盒模型

2. 隐藏一个元素的方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

1. let 可以直接修改值（或者引用）
2. const 只可以改变属性值

5. 作用域、作用域链

7. 小数相加、整数相加

1. 删除：返回所删除的元素组成的数组

1. 替换：返回所有替换后的元素组成的数组

13. 深拷贝（只考虑数组和对象）

以上两种方式的弊端是只能克隆属性为对象自身的、可枚举、且不为Symbol类型的属性。

• 会忽略值为undefined、函数类型的属性
• 忽略值为Symbol类型的属性
• 日期对象的值会通过toJSON()转成字符串

不足之处就是：数组中有选项是 0 ，就会丢失0，最终结果就是错的。因为Boolean(0) --> false

22. 实现多次重复尝试，比如多次请求一个接口，最多请求 3 次

pipe 执行顺序从左向右

执行顺序从右向左 第一个执行函数可以接收多个参数，后面的执行函数参数都是单个的。所有函数的执行都是同步的。

1. 存储容量大 大约 5M
1. 同域下往返于客户端和服务端
2. 存储容量小 大概 4k

1. isNaN 在调用时会将传入的参数转换为数字类型，所以非数字传入也有可能返回 true
2. Number.isNaN 首先会判断传入的参数是否为数字，如果为非数字，直接返回 false

31. 实现图片懒加载

//图片什么时候出现在可视区域内
 //这里我们只考虑向下滚动
 // 这里加50为了让其提前加载

• x：元素左上角相对于视口的横坐标
• y：元素左上角相对于视口的纵坐标
• left：元素左上角相对于视口的横坐标，与 x 属性相等
• right：元素右边界相对于视口的横坐标（等于 x + width）
• top：元素顶部相对于视口的纵坐标，与 y 属性相等
• bottom：元素底部相对于视口的纵坐标（等于 y + height）

将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。 如果 array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。

34. （链式调用）要求设计 LazyMan 类，实现以下功能

如果两个值相等，就要进一步排除0的情况；如果不相等就需要排除NaN的情况。

36. a 在什么情况下会打印 1？

 
// 传入回调和返回Promise实例只能二选一
 // 如果传入了回调，则执行回调。反之执行Promise的resolve方法
 // 如果没有传入回调，并且支持Promise的话，返回一个Promise的实例

1. key的作用主要是为了更高效的更新虚拟DOM。
2. vue在patch过程中判断两个节点是否是相同节点的一个必要条件就是key。在渲染一组列表时，key往往是唯一标识，所以如果不定义key的话，vue只能认为比较的两个节点是同一个，哪怕它们实际上不是，这导致了频繁更新元素，使得整个patch过程比较低效，影响性能。
3. 实际使用中在渲染一组列表时key必须设置，而且必须是唯一标识，应该避免使用数组索引作为key，这可能导致一些隐蔽的bug；
4. vue中在使用相同标签元素过渡切换时，也会使用key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

从源码中可以知道，vue判断两个节点是否相同时主要判断两者的key和元素类型等，因此如果不设置key，它的值就是undefined，则可能永远认为这是两个相同节点，只能去做更新操作，这造成了大量的dom更新操作，明显是不可取的。

1. 优化性能 。DOM 操作是比较耗时的，对于大量、频繁的 DOM 操作，如果先在 JavaScript 中模拟进行，然后再通过计算比对，找到真正需要更新的节点，这样就有可能减少不必要的 DOM 操作，从而提升渲染性能。
2. 跨平台 。由于虚拟 DOM 以 JavaScript 对象为基础，所以可根据不同的运行环境进行代码转换（比如浏览器、服务端、原生应用等），这使得它具有了跨平台的能力。

一定比真实DOM的性能高吗？
并不是所有的 DOM 操作都能通过虚拟 DOM 提升性能，比如单次删除某个节点，直接操作 DOM 肯定比虚拟 DOM 计算比对之后再删除要快。总体而言， 虚拟 DOM 提升了 DOM 操作的性能下限，降低了 DOM 操作的性能上限。 所以会看到一些对渲染性能要求比较高的场景，比如在线文档、表格编辑，还是会使用原生 DOM 操作。

1. 跨组件之间 provide/inject 常见于组件库的封装，实际项目很少会用到

1. 频繁切换显隐式的使用v-show
2. 无状态组件使用函数式组件

3. vuex 如何实现数据的响应式

1、vue2 和 vue3 响应式原理对比，及具体实现思路

1. 初始化时需要遍历对象所有key，如果对象层级较深，性能不好
2. 不能监听数组的变化，需要重写数组的变异方法
3. 通知更新过程需要维护大量dep实例和watcher实例，额外占用内存较多
4. 动态新增、删除对象属性无法拦截，只能用特定set/delete api代替
5. 不支持新的Map、Set等数据结构
1. 动态属性增、删都可以拦截，新增数据结构均支持
2. 对象嵌套属性运行时递归，也就是说只有用到时才代理，也不需要维护特别多的依赖关系，极大的降低性能
   缺点就是兼容性问题，因为proxy是js引擎提供的API，所以无法完全polyfill。

2、vue3 做了哪些优化

1. 为什么在编写组件时没有用到 React 还要引入 React？
1. redux 中间件实现原理

1. 输入 URL 到页面展示做了什么

1. 用户输入关键词，地址栏判断是搜索内容还是 url 地址。
   如果是搜索内容，会使用浏览器默认搜索引擎加上搜索内容合成 url；
   如果是域名会加上协议（如 https）合成完整的 url。

2. 然后按下回车。浏览器进程通过 IPC（进程间通信）把 url 传给网络进程（网络进程接收到 url 才发起真正的网络请求）。

3. 网络进程接收到 url 后，先查找有没有缓存。
   有缓存并且缓存还在生存期内，直接返回缓存的资源。
   缓存过期或没有缓存。（进入真正的网络请求）。如果缓存过期了，浏览器则会继续发起网络请求，并且在 HTTP 请求头中带上If-None-Match: "XXX"

首先获取域名的 IP，系统会首先自动从 hosts 文件（DNS 缓存）中寻找域名对应的 IP 地址，一旦找到，和服务器建立 TCP 连接；如果没有找到，则系统会将网址提交 DNS 域名解析服务器进行 IP 地址的解析。

1. 利用 IP 地址和服务器建立 TCP 连接（3 次握手）。

2. 建立连接后，浏览器网络进程构建数据包（包含请求行，请求头，请求正文，并把该域名相关 Cookie 等数据附加到请求头），然后向服务器发送请求消息。

3. 服务器接收到消息后根据请求信息构建响应数据（包括响应行，响应头，响应正文），然后发送回网络进程。

4. 网络进程接收到响应数据后进行解析。

如果发现响应行的返回的状态码为 301，302，说明服务器需要浏览器重定向到其他 URL，这时网络进程会找响应头中的 Location 字段的 URL，重新发起 HTTP 或者 HTTPS 请求。
如果返回的状态码为 200，说明服务器返回了数据。
如果状态码是 304，则说明缓存内容在服务端没有更新，服务器不会再返回内容，让浏览器从缓存中读取。

1. 网络进程将响应头和响应行传给浏览器进程，浏览器进程根据响应头中的 Content-Type 告诉浏览器服务器返回的数据类型。如果返回的类型是 text/html，则告诉浏览器返回的是 HTML，如果是 application/octet-stream 则为下载类型，那么请求会交给浏览器的下载管理器，同时 URL 的导航到此结束，如果是 HTML，那么浏览器会继续进行导航流程。（导航：用户发出 URL 请求到页面开始解析的这个过程，就叫做导航）

2. 浏览器进程接收到网络进程的响应头数据后，向渲染进程发出“提交导航”（CommitNavigation）的消息（带着响应头等消息）。

3. 渲染进程接收到提交导航的消息后，准备渲染进程。创建新的渲染进程还是复用，规则如下：
   如果是新打开的页面，会单独使用一个渲染进程；
   如果是A页面打开“同一站点”的B页面，则会复用A页面的渲染进程；
   如果不是“同一站点”，则单独创建新的渲染进程；

4. 渲染进程准备好后便和网络进程建立数据传输的“管道”。

5. 等文档数据传输完成后，渲染进程会返回“确认提交”的消息给浏览器进程。意思是告诉浏览器进程我已经准备好接收网络进程的数据和解析页面数据了。

6. 浏览器进程接收到“确认提交”消息后移除旧的文档，然后更新浏览器界面，包括 web 页面（空白页）、导航按钮、URL 地址栏、网络安全状态。浏览器的加载按钮还是加载中状态。至此，导航流程就完成了。接下来就是解析渲染阶段了。

1. 计算 DOM 树中每个节点的具体样式 （继承、层叠）
1. 创建布局树（只包含可见元素）
• 分层 特定节点生成专用图层，并生成图层树

1. 拥有层叠上下文属性的元素

1. 在主线程上生成图层的绘制列表，将绘制列表提交给合成线程

2. 1. 主线程将绘制列表提交给合成线程，合成线程将图层分块，生成图块（图块是栅格化的最小单位）
   2. 光栅化线程池和GPU生成位图
   3. 图块被光栅化完成后，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程。
3. 合成的图层会被提交给浏览器进程，浏览器进程里会执行显示合成(Display Compositor)，也就是将所有的图层合成为可以显示的页面图片。 最终显示器显示的就是浏览器进程中合成的页面图片。

• 渲染进程开始页面解析和加载子资源（边下载边解析），一旦资源加载、渲染完毕，渲染进程会发送一个消息给浏览器进程，浏览器接收到这个消息后会停止标签图标的加载动画。

至此，一个完整的页面形成了。

为什么 DOM 操作耗费性能和时间？

1. 渲染引擎和 js 引擎切换，（俗称上下文切换）耗费性能。
2. 重绘/重排（元素及样式变化引起的再次渲染），而且重排耗时明显高于重绘
3. 重排一定引起重绘，而重绘不一定引起重排
1. DOM 几何属性变化，如：宽高、位置、边框、padding、margin
2. DOM 树结构发生改变
3. 页面一开始渲染（不可避免的）
4. 获取某些布局属性时。当获取一些属性值时，浏览器为了保证获取到正确的值也会引起重排。如：
1. 复杂动画，使用绝对定位让其脱离文档流
• 使用硬件加速可以让 transform、opacity、filters 不会引起重绘和回流，但是对于 bgc 这些属性还是会引起重绘
• 硬件加速不可滥用，因为会占用内存较大，会影响性能
1. CSS 加载会阻塞 DOM 树的渲染。主要是浏览器出于性能考虑，避免渲染完成后又有样式变动，造成回流和重绘
2. CSS 加载会阻塞后面 js 的执行

缩短白屏时间，尽可能加快 CSS 加载速度

1. HTML 解析和 CSS 解析是并行的过程，所以 CSS 加载不会阻塞 DOM 树生成
2. 因为 js 可能会操作 DOM 节点和 CSS 样式，因此样式表会在加载完毕后执行后面的 js

浏览器同源策略的限制。

1. 1xx 收到请求，需要请求继续执行操作
2. 204 没有资源可返回
3. 206 返回部分资源，（请求范围资源）比如：音视频文件
• 3xx 重定向、浏览器需要执行某些特殊处理以完成正常请求
  1. 301 永久重定向 表示旧地址资源被永久地移除了（这个资源不可访问了），搜索引擎在抓取新内容的同时也将旧的网址交换为重定向之后的网址
  2. 302 临时重定向 表示旧地址 A 的资源还在（仍然可以访问），这个重定向只是临时地从旧地址 A 跳转到地址 B，搜索引擎会抓取新的内容而保存旧的网址
1. 400 请求报文中存在语法错误
2. 401 表示发送的请求需要有通过 HTTP 认证的认证信息
3. 416 所请求的范围无法满足（读取文件时设置的 Range 有误造成的）
1. 500 表示服务器在执行请求时发生了错误
2. 503 表示服务器暂时处于超负载或正在进行停机维护状态，现在无法处理请求
1. 状态行 状态码、原因短语、服务器HTTP版本

http缓存分为强缓存和协商缓存。详细内容查看

域名解析系统。域名和 IP 的映射，域名查 IP，IP 反查域名。

面向连接的、可靠的、字节流服务。

1. 具有重发机制，不会丢包
2. 数据包上标记序号，到达接收方可以重组
1. 字节流服务 --> 大数据包切割成报文段的小数据包

传输速度慢，不如 UDP

1. 场景：直播、视频会议等

操作系统、显卡等物理器件

1. 明文传输，不加密，内容容易被窃听

1. 内容（报文）加密，仍不可靠，容易被篡改
2. SSL 通信加密 建立安全的通信线路，http 在该线路上传输

2. 无法验证身份，容易被伪装（通信双方无法确认对方身份）

3. 无法保证内容的完整性，容易被篡改（明文传输，无法验证身份，导致内容容易被篡改）

SSL/TLS 不仅提供了通信加密，还提供了证书认证，及内容完整性保护。

1. 通信慢： SSL/TLS 通信部分消耗网络资源
2. 通信双方进行加解密处理，消耗大量的 CPU 和内存等资源

HTTP/1.1 为网络效率做了大量的优化，最核心的有如下三种方式：

1. 浏览器为每个域名最多同时维护 6 个 TCP 持久连接
2. 使用 CDN 的实现域名分片机制
1. 同时开启了多条 TCP 连接，那么这些连接会竞争固定的带宽
2. HTTP/1.1 队头阻塞的问题（一个TCP同时可以进行一个HTTP传输）

慢启动和 TCP 连接之间相互竞争带宽是由于 TCP 本身的机制导致的，而队头阻塞是由于 HTTP/1.1 的机制导致的。

• 一个域名建立一个 TCP 连接
• 一个TCP可以同时进行多个HTTP的请求和响应
1. 可以设置请求的优先级：在发送请求时，可以标上该请求的优先级
2. 服务器推送：提前将静态资源推送到客户端

双层遍历，第二层遍历，当前值和下一个值比较，根据大小交换位置 修改的是原数组


选取数组第一项作为基准值，从数组第二项开始比较，小的放在左边数组，大的放在右边数组。
最终结束时机是当数组长度为 1 时。最终就是 arr.length 个长度为 1 的数组的合并。


前提条件：一定是有序数组。

查找有序数组中的某一项，以下实现方式假设数组是递增的。

写一个函数，输入 n ，求斐波那契（Fibonacci）数列的第 n 项。斐波那契数列的定义如下：

答案需要取模 1e9+7（），如计算初始结果为：，请返回 1。

斐波那契数是由前两数相加而得，需对初始值 0 和 1 做单独判断。
之后只需做一次 for 循环遍历，需要注意得是，为避免时间复杂度的消耗，需要缓存前两数的结果，最后按题要求，所得的数需要经过取模运算。

一只青蛙一次可以跳上 1 级台阶，也可以跳上 2 级台阶。求该青蛙跳上一个 n 级的台阶总共有多少种跳法。

答案需要取模 1e9+7（），如计算初始结果为：，请返回 1。

和斐波那契一样的思路，区别是斐波那契的 0 项为 0，而爬楼梯的 0 项是 1

6. 有序数组合并 排序

7. 删除数组中的重复项

给定一个排序数组，需要在 原地 删除重复出现的元素，使得每个元素只出现一次，返回移除后数组的新长度。
不要使用额外的数组空间，你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成。

方法一：双指针法（慢快指针）

数组完成排序后，我们可以放置两个指针 i 和 j，其中 i 是慢指针，而 j 是快指针。慢指针初始值为 0，快指针初始值为 1.
如果 arr[i] === arr[j]，跳过，快指针加 1。反之，慢指针加 1，快指针的值赋值给慢指针。

方法二： 计数排序思想

因为题目是要求返回去重后数组的长度，并不关心去重后的数组，所以找出重复出现的个数即可。

由于数组是有序排列的，定义一个变量 count = 0; 从位置 1 开始遍历，判断当前元素是否和上一个元素相等，如果相等 count+1，反之跳过。

最后 count 就是所有重复元素出现的个数。那么不重复元素组成的数组就是 数组长度 - count

8. 组中的第 K 个最大元素

找出数组中 两个元素加起来等于 target 的元素的索引

适用情况：对数组的排序无要求，最后返回元素的索引

适用情况： 数组必须是有序的。

10. 二维数组的查找

在一个 n * m 的二维数组中，每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。

11. 第一个只出现一次的字符

在字符串 s 中找出第一个只出现一次的字符。如果没有，返回一个单空格。 s 只包含小写字母。

输入数字 n，按顺序打印出从 1 到最大的 n 位十进制数。比如输入 3，则打印出 1、2、3 一直到最大的 3 位数 999。

13. 数组中重复的数字

找出数组中重复的数字。

在一个长度为 n 的数组 nums 里的所有数字都在 0 ～ n-1 的范围内。数组中某些数字是重复的，但不知道有几个数字重复了，也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。

14. 查找出数组中出现次数最多的元素

15. 输出以奇数结尾的字符串拼接

题：[任意字符][一位数字]_，拼接的字符串，输出以奇数结尾的字符串拼接。


16. 二维数组的排列组合

// 单例模式。实例只创建一次

首先造成 webpack 构建速度慢的因素就是重复的编译、代码压缩

1. 大部分 loader 提供了缓存选项
1. Scope hoisting 构建后的代码会存在大量闭包，造成体积增大，运行代码时创建的函数作用域变多，内存开销变大。Scope hoisting 将所有模块的代码按照引用顺序放在一个函数作用域里，然后适当的重命名一些变量以防止变量名冲突
1. 减小 favicon.ico 的体积 设置强缓存，过期时间设置几个月
• 禁止在 HTML 中缩放图片
• WebP 格式 注意降级处理
1. css 通过文件的方式引入，不要写在 html 文档，以减小文档的大小，此外 css 文件可以被缓存

注意：使用 3D 硬件加速提升动画性能时，最好给元素增加一个 z-index 属性，人为干扰复合层的排序，可以有效减少 chrome 创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。
硬件加速最好只用在 animation 或者 transform 上。不要滥用硬件加速，因为这样会增加性能的消耗（内存的使用），如果滥用反而会使动画变得更加卡，就得不偿失了。

1. js 和 css 通过文件的方式引入，不要写在 html 中，原因：
   1. 减小了 HTML 文档的大小
1. 缓存频繁访问的 DOM
2. 动画能用 CSS 实现的不用 js 实现
1. 注意设置 cookie 到合适的域名级别，则其它子域名不会被影响
2. 静态资源请求没有 cookie，比如将静态资源放在全新的域下
// 获得首字节耗费时间，也叫TTFB

XSS（跨站脚本攻击）

CSRF（跨站伪造攻击）

2. 资源加载错误（图片）

跨域访问的 js 内部报错，浏览器处于安全考虑，不会报告具体的错误堆栈和行号，只抛出 script error 错误

1. image 的 src（(new Image()).src = '错误上报的请求地址'） 使用图片发送 get 请求，上报信息，由于浏览器对图片有缓存，同样的请求，图片只会发送一次，避免重复上报
1. fetch：相当于是从远程获取最新版本到本地，不会自动 merge
2. git pull：相当于是从远程获取最新版本并 merge 到本地

4. 几十万条数据渲染