【前端面试】常见问题总结（广度）
渲染 10W 条数据
首先可以判断这是什么应用场景才需要用到这样的技术方案
**解决：**采用虚拟列表
基本原理
- 只渲染可视区域 DOM
- 其他隐藏区域不渲染，只用一个 <div> 撑开高度
- 监听容器滚动，随时创建和销毁 DOM
可以借助第三方库
- vue-virtual-scroll-list
- react-virtualized
文字超出省略，用哪个 CSS 样式？
单行文字
#box1 { border: 1px solid #ccc; width: 100px; white-space: nowrap; /* 不换行 */ overflow: hidden; text-overflow: ellipsis; /* 超出省略 */ }
多行文字
#box2 { border: 1px solid #ccc; width: 100px; overflow: hidden; display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */ -webkit-box-orient: vertical; /* 设置子元素排列方式 */ -webkit-line-clamp: 3; /* 显示几行，超出的省略 */ }
补充：
- -moz代表firefox浏览器私有属性；
- -ms代表IE浏览器私有属性；
- -webkit代表chrome、safari私有属性；
- -o代表Opera私有属性。
移动端 click 300ms 延迟
背景：智能手机开始流行的前期，浏览器可以点击缩放（double tap to zoom）网页。这样在手机上就可以浏览 PC 网页，很酷炫。
解决：
- 原因：点击缩放（double tap to zoom）网页
- 可使用 FastClick 解决
- 现代浏览器可使用 width=device-width 规避
Retina 屏 1px 像素问题，如何实现
**Retina 屏：**指的是一种显示标准。通过把更多的像素点组合放在一块更小的屏幕中来实现更高的清晰度而获得更加非凡的观感，同时它也被称为视网膜显示屏。retina显示屏又叫做视网膜屏
普通的 1px
如果仅仅使用 css 的 1px 来设置 border ，那可能会出现比较粗的情况。
因为，有些手机屏幕的 DPR = 2(DPR：屏幕像素比) ，即 1px 它会用两个物理像素来显示，就粗了。
解决：
使用 transform 缩小
我们可以使用 css 伪类 + transform (形变)来优化这一问题。即把默认的 1px 宽度给压缩 0.5 倍。
#box { padding: 10px 0; position: relative; } #box::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #d9d9d9; transform: scaleY(0.5); transform-origin: 0 0; }
连环问：如果有border-radius怎么办
解决：
可以使用 box-shadow 设置
- X 偏移量 0
- Y 偏移量 0
- 阴影模糊半径 0
- 阴影扩散半径 0.5px
- 阴影颜色
#box2 { margin-top: 20px; padding: 10px; border-radius: 5px; /* border: 1px solid #d9d9d9; */ box-shadow: 0 0 0 0.5px #d9d9d9; }
cookie 和 token 区别
http 请求是无状态的，即每次请求之后都会断开链接。所以，每次请求时，都可以携带一段信息发送到服务端，以表明客户端的用户身份。
cookie 跨越限制
在html5 出现之前，大家常把cookie作为本地存储，后来增加了 localStorage 和 sessionStorage。
http 请求传递 cookie 默认有跨域限制。如果想要开启，需要客户端和服务器同时设置允许
- ==客户端：==使用 fetch 和 XMLHttpRequest 或者 axios 需要配置 withCredentials
- ==服务端：==需要配置 header Access-Control-Allow-Credentials
注意：现代浏览器都开始禁用第三方 cookie （第三方 js 设置 cookie），打击第三方广告，保护用户个人隐私。
cookie 和 session
使用 cookie 做登录校验
- 前端输入用户名密码，传给后端
- 后端验证成功，返回信息时 set-cookie
- 接下来所有接口访问，都自动带上 cookie （浏览器的默认行为， http 协议的规定）
什么是 session ？
- cookie 只存储 userId ，不去暴露用户信息
- 用户信息存储在 session 中 —— session 就是服务端的一个 hash 表
token 与 cookie 的区别
token 和 cookie 一样，也是一段用于客户端身份验证的字符串，随着 http 请求发送
- cookie 是 http 协议规范的，而 token 是自定义的，可以用任何方式传输（如 header body query-string 等）
- token 默认不会在浏览器存储
- token 没有跨域限制
我们可以借助第三方库 JWT（JSONWebToken）
JWT 的过程
- 前端输入用户名密码，传给后端
- 后端验证成功，返回一段 token 字符串 - 将用户信息加密之后得到的
- 前端获取 token 之后，存储下来
- 以后访问接口，都在 header 中带上这段 token
总结：
- cookie：http 规范；有跨域限制；可存储在本地；可配合 session 实现登录
- token：自定义标准；不在本地存储；无跨域限制；可用于 JWT 登录
WebSocket 和 Http 的区别
webSocket 和 http 都是应用层，支持端对端的通讯。可以由服务端发起，也可以由客户端发起。
场景：消息通知，直播讨论区，聊天室，协同编辑
WebSocket 建立连接
会先发起一个 http 请求，跟服务端建立连接。连接成功之后再升级为 webSocket 协议，然后再通讯。
总结
- 协议名称不同 ws 和 http
- http 一般只能浏览器发起请求，webSocket 可以双端发起请求
- webSocket 无跨域限制
- webSocket 通过 send 和 onmessage 进行通讯，http 通过 req 和 res 通讯
PS：ws 可以升级为 wss 协议，像 http 升级到 https 一样，增加 SSL 安全协议。
import { createServer } from 'https' import { readFileSync } from 'fs' import { WebSocketServer } from 'ws' const server = createServer({ cert: readFileSync('/path/to/cert.pem'), key: readFileSync('/path/to/key.pem') }) const wss = new WebSocketServer({ server })
连环问：webSocket 和长轮询（长连接）的区别
- http 长轮询 - 客户端发起 http 请求，server 不立即返回，等待有结果再返回。这期间 TCP 连接不会关闭，阻塞式。（需要处理 timeout 的情况）
- webSocket - 客户端发起请求，服务端接收，连接关闭。服务端发起请求，客户端接收，连接关闭。非阻塞。
从输入 url 到页面展示过程
连环问：什么是重绘 repaint 和重排 reflow ，有何区别
- 重绘 repaint ：某些元素的外观被改变，但尺寸和定位不变，例如：元素的背景色改变。
- 重排 reflow ：重新生成布局，重新排列元素如一个元素高度变化，导致所有元素都下移。
