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

2. 隐藏一个元素的方式

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

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

5. 作用域、作用域链

7. 小数相加、整数相加

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

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

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

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

不足之处就是：数组中有选项是 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的情况

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

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

1. vue2 和 vue3 响应式原理对比及具体实现思路
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 收到请求需要请求继续执行操作
1. 204 没有资源可返回
2. 206 返回部分资源，（请求范围资源）比如：音视频文件
2. 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 的体积 设置强缓存过期时间设置几个月
2. 禁止在 HTML 中縮放图片
3. 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 到本地