interviewhtml、css html 语义化标签优点: 结构清晰易于阅读，利于开发维护方便其他设备解析(盲人阅

html、css

html

语义化标签优点:
- 结构清晰易于阅读，利于开发维护
- 方便其他设备解析(盲人阅读器、屏幕阅读器)
- 有利于搜索引擎优化（SEO），通过关键词获取更多流量

重绘、重排

详细介绍

重绘：不影响页面布局，重新把元素外观绘制出来的过程
- 改变元素的 color、background、box-shadow
重排（回流）：影响页面布局和几何信息（位置、尺寸）发生变化
- 添加或者删除可见的 DOM 元素
- 元素尺寸改变——边距、填充、边框、宽度和高度
优化
- 使用 position:absolute / fixed 脱离文档流，不影响其他元素
- 动画开启 GPU 加速（transform、translate），减少触发重绘重排
- 避免逐一修改 dom 样式, 可以直接统一更改classname
- 分离读写操作

css

1. 盒模型

由 content + padding + border + margin 构成，允许我们在其它元素和周围元素边框之间的空间放置元素

2. BFC

作用:
- 避免外边距 margin重叠
- 清除浮动, 计算 BFC 的高度会计算上浮动元素的高度
- BFC 区域不会与浮动的容器发生重叠
常见触发条件:
- overflow 值不为 visible 的块元素
- 绝对定位元素（position 为 absolute/ fixed ）
- 浮动元素(float 不为 null)
- display 为 inline-block/flex

3. 居中布局

flex 布局
transform + absolute

.child {
	position: absolute; /* 子绝父相 */
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

flex + margin:auto

4. 清除浮动

触发父级 BFC
给父类添加固定高度
使用 after伪元素

.farther::after {
	content: '';
	display: block;
	height: 0;
	clear: both;
}

5. box-sizing

content-box: 实际宽高不包含 padding 和 border(盒子占据空间 = width+padding+border)
border-box: 实际宽高包含 padding 和 border(盒子占据空间 = width)

js

1. 闭包

使得能从外部读取函数内部的变量
变量的值始终保持在内存中, 避免全局变量的污染
不要随便修改闭包内私有变量的值

2. 原型&原型链

...

3. this 指向

...

4. 数据类型

基本类型: string number boolean null undefined object(function array) symbol

null 表示空对象, undefined 表示已在作用域中声明但未赋值的变量

类型判断

typeOf
- 能判断所有值类型,返回值有: string、boolean、number、function、object、undefined、symbol
- 不能对 null、对象、数组进行精确判断，都会返回 object
instanceof
- 只能用来判断变量的原型链上是否有构造函数的 prototype 属性
- 判断值为对象实例或引用类型
Array.isArray(arr) : 判断是否为数组
Object.prototype.toString.call()
- 可以判断所有数据类型
- 返回值为"[object Array]"

5. 宏任务&微任务

...

6. 事件冒泡/委托

冒泡
- 触发子元素事件, 会沿着 dom 树结构一层一层的往上, 查找父级元素是否注册了相同事件并执行
- 阻止冒泡: event.stopPropagation()
委托
- 利用冒泡机制, 将子元素事件统一托管给父元素执行

7. 继承

vue

1. 生命周期

create 阶段：vue 实例被创建
- beforeCreate: 创建前，此时 data 和 methods 中的数据都还没有初始化
- created：创建完毕，data 中有但未挂载(数据观测、属性和方法的运算、watch/event 时间回调、$el 尚未生成)
mount 阶段： vue 实例被挂载到真实 DOM 节点
- beforeMount：可以发起服务端请求，去数据
- mounted: 此时可以操作 Dom
update 阶段：当 vue 实例里面的 data 数据变化时，触发组件的重新渲染
- beforeUpdate 数据更新时，被调用，发生在虚拟 Dom 重新渲染和打补丁之前
- updated 由于数据更改导致的虚拟 Dom 重新渲染和打补丁，在这之后调用
destroy 阶段：vue 实例被销毁
- beforeDestroy：实例被销毁前，此时可以手动销毁一些方法
- destroyed
keep-alive（activated & deactivated）

2. computed & watch

computed 属性的结果会被缓存, 当一个属性受多个属性影响的时候使用
watch 监听数据的变化, 当一条数据影响多条数据的时候使用

http 相关

1. http 状态码

状态码分类

状态码	英文信息	含义
1xx	Informational（信息状态码）	接受请求正在处理
2xx	Success（成功状态码）	请求正常处理完毕
3xx	Redirection（重定向状态码）	需要附加操作已完成请求
4xx	Client Error（客户端错误状态码）	服务器无法处理请求
5xx	Server Error（服务器错误状态码）	服务器处理请求出错

常见状态码

状态码	含义
200	响应成功
301	永久重定向
302	临时重定向
304	资源缓存
403	服务器禁止访问
404	服务器资源未找到
500	502 服务器内部错误
504	服务器繁忙

2. GET 和 POST 区别

GET 在浏览器回退不会再次请求，POST 会再次提交请求
GET 请求会被浏览器主动缓存，POST 不会，要手动设置
GET 请求参数会被完整保留在浏览器历史记录里，POST 中的参数不会
GET 请求在 URL 中传送的参数是有长度限制的，而 POST 没有限制
GET 参数暴露在地址栏不安全，POST 放在报文内部更安全
GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包

3. Http 和 Https 区别

HTTP 标准端口是 80 ，而 HTTPS 的标准端口是 443
HTTP 无法加密,HTTPS 对传输的数据进行 SSL 加密
在 OSI 网络模型中，HTTP 工作于应用层，而 HTTPS 的安全传输机制工作在传输层

4. http 缓存

将静态资源缓存本地, 减少下次加载请求时间, 节省带宽

强制缓存

在资源文件没有过期前不会发送请求到服务器，直接使用本地缓存

Cache-Control:

max-age: 缓存失效时间, 超过时间缓存失效
no-cache: 会缓存,但每次都要先和服务器确认
no-store: 禁止使用缓存（包括协商缓存），每次都向服务器请求最新的资源

协商缓存

缓存到期或强制缓存失效时

Last-Modified / If-Modified-Since
- 浏览器第一次请求一个资源的时候，服务器返回的 header 中会加上 Last-Modified，标识该资源的最后修改时间
- 当浏览器再次请求该资源时，request 的请求头中会包含 If-Modified-Since，该值为浏览器缓存的之前返回的 Last-Modified
- 服务器接收比对最后修改时间, 如果命中缓存,则返回 304 并且不返回资源和 Last-Modified
- 单位精度为秒, 无法识别毫秒级别的修改
- 只要修改文件(如文件名), 就算文件内容没变化,缓存都会失效
ETag / If-None-Match
- Etag 是服务器为不同资源进行哈希运算所生成的一个字符串
- 只要文件内容编码存在差异，对应的 ETag 就会不同, 因此更精确
- 计算 ETag 值需要性能损耗

5. http2/http3 特点

http2

多路复用, 采用二进制流形式
header 压缩
服务端推送静态资源

http3

http2 一个 TCP 连接中出现丢包, 整个 TCP 需要重传, 阻塞后面数据传输

基于 QUIC 协议, 整合了 TCP+TLS

6. 浏览器存储

cookie
- 存储大小限制为 4KB
- 数据始终在同源的 http 请求中携带，在浏览器和服务器间来回传递
localStorage / sessionStorage
- 存储容量 5Mb
- 不会自动把数据发送给服务器，仅在本地保存
- sessionStorage 数据只存在于当前会话，浏览器关闭则清空
- localStorage 数据会永久存储，窗口或浏览器关闭也一直保存，除非代码删除或手动删除

7. url 请求过程(握手/挥手)

握手请求

客户端发送 SYN(同步) 报文到服务端发起握手，发送完之后客户端处于 SYN_Send 状态
服务端收到 SYN 报文之后回复 SYN 和 ACK(确认) 报文给客户端
客户端收到 SYN 和 ACK，向服务端发送一个 ACK 报文, 客户端转为 established 状态, 此时服务端收到 ACK 报文后也处于 established 状态，双方已建立了连接

挥手

可能存在未发送完的数据, 所以需要 4 次

客户端 -- FIN(结束) --> 服务端， FIN—WAIT
服务端 -- ACK --> 客户端， CLOSE-WAIT
服务端 -- ACK,FIN --> 客户端， LAST-ACK
客户端 -- ACK --> 服务端，CLOSED

8. 跨域解决

Nginx 反向代理
node 中间件 proxy 代理
jsonp(只支持 GET 请求)

9. 从浏览器地址栏输入 url 到请求返回

DNS 域名解析
建立 TCP 连接（三次握手）
发送 HTTP 请求报文
服务器处理请求并返回 HTTP 报文
浏览器解析渲染页面
断开连接：TCP 四次挥手

10. 网络安全

CSRF(跨站请求伪造)

导致原因:

用户访问了受信任站点 A,并且在本地生成 Cookie;
在没有登出的情况下访问了危险站点 B
危险站点 B 中带有恶意请求代码(转账/购买)进行恶意请求

解决方法:

验证 Token: 第三方恶意站点无法获取 token值会被服务器拒绝
设置http 头中的 refer, 控制访问白名单，拒绝第三方网站请求

XSS(跨站脚本攻击)

分类:

反射型通过恶意链接访问信任网站, 其 url 里携带恶意执行代码
存储型黑客将恶意代码通过评论的形式提交到服务器中, 当用户访问评论页面时会执行该恶意代码
DOM 型 url 中 # 后的内容不会发送给服务器, 服务器不会过滤并正常返回网页源码, 攻击脚本会注入到页面中, 篡改页面结构

解决办法:

url 中的参数进行转义
由于很多 XSS 攻击都是来盗用 Cookie ,可以把cookie 设置 httpOnly, 禁止脚本访问 cookie
设置访问白名单

手写代码

promise
深拷贝

算法

冒泡排序

function bubbleSort(arr) {
	// 外层循环
	for (let i = 0; i < arr.length - 1; i++) {
		// 内部循环比较数据
		for (let k = 0; k < arr.length - i - 1; k++) {
			if (arr[k] > arr[k + 1]) {
				let tmp = arr[k]
				arr[k] = arr[k + 1]
				arr[k + 1] = tmp
			}
		}
	}
	return arr
}

二分法查询

在有序数组中查找目标, 返回目标索引位置

let arr = [2, 8, 19, 22, 34, 56, 76, 88, 94]

function searching(arr, target) {
	let start = 0,
		end = arr.length - 1,
		middle,
		element

	while (start <= end) {
		middle = Math.floor((start + end) / 2)
		element = arr[middle]
		if (target > element) {
			start = middle + 1
		} else if (target < element) {
			end = middle - 1
		} else if (target === element) {
			return middle
		}
	}
	return -1
}

interview