前端广度面试题（从前端到全栈）

Q: 移动端 H5 点击有 300ms 延迟，该如何解决？

• 背景：double tap to zoom
• Fast Click（初期）
• width=device-width

Q: Retina 屏幕的 1px 像素，如何实现？

• 使用 css 伪类 + transform 来优化这一问题。即把默认的 1px 高度给压缩 0.5 倍
• 如果有 border-radius，可以使用 box-shadow 设置

Q: HTTP 请求中token和cookie有什么区别？

cookie

• HTTP 无状态，每次请求都要带 cookie，以帮助识别身份
• 服务端也可以向客户端 set-cookie，cookie 大小限制 4kb
• 默认有跨域限制：不可跨域共享、传递 cookie（前端设置 withCredentials，后端允许跨域设置具体url）
  设置cookie，只能在本域名下或者domain级别高于自身的域名下才会生效

现代浏览器开始禁止第三方 cookie

• 和跨域不同。这里是：禁止网页引入的第三方 JS 设置cookie
• 打击第三方广告，保护用户隐私
• 新增属性 SameSite：Strict、Lax、None；值可自己选择

cookie 和 session

• cookie 用户登录验证，存储用户标识（如 userId）
• session 在服务端，存储用户详细信息，和cookie信息一一对应
• cookie 和 session 是常见的登录验证解决方案

token vs cookie

• cookie 是 HTTP 规范，而 token 是自定义传递
• cookie 会默认被浏览器存储，而token需自己存储
• token 默认没有跨域限制

JWT （JSON Web Token）

• 前端发起登录，后端验证成功之后，返回一个加密的 token
• 前端自行存储这个 token （其中包含了加密的用户信息）
• 以后访问服务端接口，都带着这个token，作为用户信息

答案

• cookie：HTTP标准，跨域限制；配合 session 使用
• token：无标准，无跨域限制，用于JWT

Q: session 和 JWT 哪个更好？

session 优点

• 原理简单，易于学习
• 用户信息存储在服务端，可快速封禁某个用户

session 缺点

• 占用服务端内存，硬件成本高
• 多进程，多服务器时，不好同步——需使用第三方缓存，如 redis
• 默认有跨域限制

JWT 优点

• 不占用服务端内存
• 多进程、多服务器 不受影响
• 没有跨域限制

JWT 缺点

• 用户信息存储在客户端，无法快速封禁某个用户
• 万一服务端秘钥被泄露，则用户信息全部丢失
• token 体积一般大于 cookie，会增加请求的数据量

答案

• 如有严格管理用户信息的需求（保密，快速封禁）推荐session
• 如没有特殊要求，则使用 JWT （如初创网站）

Q: 如何实现 SSO 单点登录

基于 cookie

• cookie 默认不可跨域共享，但有些情况下可设置为共享
• 主域名相同，如 www.baidu.com、image.baidu.com
• 设置 cookie domain 为主域名，即可共享 cookie

SSO

• 主域名完全不同，则cookie无法共享
• 可使用 SSO 技术方案
  

Q: HTTP 协议和 UDP 协议有什么区别？

网络协议

• HTTP 协议在应用层
• TCP 和 UDP 协议在传输层
• 所以应该拿 TCP 和 UDP 进行比较

TCP 协议

• 有连接（三次握手）
• 有断开（四次挥手）
• 稳定传输

UDP 协议

• 无连接，无断开
• 不稳定传输，但效率高
• 如视频会议、语音通话

Q: HTTP 协议 1.0 1.1 2.0 有什么区别？

HTTP 1.0

• 最基础的 HTTP 协议
• 支持基本的 GET POST 方法

HTTP 1.1

• 缓存策略 cache-control E-tag 等
• 支持长连接 Connection: keep-alive，一次 TCP 连接多次请求
• 断点续传，状态码 206（大文件分片上传）
• 支持新的方法 PUT DELETE等，可用于 Restful API

HTTP 2.0

• 可压缩 header，减少体积
• 多路复用，一次 TCP连接中可以多个HTTP请求并行请求
• 服务端推送

Q: 什么是 HTTPS 中间人攻击？如何预防？

HTTPS 加密传输

• HTTP 明文传输
• HTTPS 加密传输 HTTP + TLS/SSL（非对称加密+对称加密）

中间人攻击 - 黑客伪造证书

预防：使用正规厂商的证书，慎用免费的

Q: script 标签的defer 和 async 有什么区别？

• 无：HTML 暂停解析，下载JS，执行JS，再继续解析 HTML
• defer：HTML 继续解析，并行下载JS，HTML 解析完在执行 JS
• async：HTML 继续解析，并行下载 JS，HTML 暂停解析，执行JS，再继续解析 HTML

Q: prefetch 和 dns-prefetch 分别是什么？

preload 和 prefetch 有关系

• preload 资源在当前页面使用，会优先加载
• prefetch 资源在未来页面使用，空闲时加载

dns-prefetch 和 preconnect 有关系

• dns-prefetch 即 DNS 预查询
• preconnect 即 DNS 预连接

答案

• prefetch 是资源预获取（和 preload 有关）
• dns-prefetch 是 DNS 预查询（和 preconnect 有关）

Q: 你知道哪些前端攻击？该如何预防？

XSS

• Cross Site Script 跨站脚本攻击
• 手段：黑客将 JS 代码插入到网页内容中，渲染时执行 JS 代码
• 预防：特殊字符替换（前端或后端）
• vue 的 v-html 和 react 的 dangerouslySetInnerHTML 是原生渲染的，会造成 xss 攻击

CSRF

• Cross Site Request Forgery 跨站请求伪造
• 手段：黑客诱导用户去访问另一个网站的接口，伪造请求
• 预防：严格的跨域限制（如判断 referrer 请求来源；为 cookie 设置 SameSite，禁止跨域传递cookie） + 验证码机制

点击劫持

• Click Jacking
• 手段：诱导界面上蒙一个透明的 iframe ，诱导用户点击
• 预防：让 iframe 不能跨域加载
  判断跳转域名是否一致
  设置X-Frame-Options: sameorigin（防止加载到第三方 iframe）
  

DDOS

• Distribute denial-of-service 分布式拒绝服务
• 手段：分布式的、大规模的流量访问，是服务器瘫痪
• 预防：软件层不好做，需要硬件预防（如阿里云 WAF）

SQL 注入

• 手段：黑客提交内容时写入 SQL 语句，破坏数据库
• 预防：处理输入的内容，替换特殊字符

Q: websocket 和 HTTP 协议有什么区别？

WebSocket

• 支持双端通讯
• 可以由 client 发起，也可以由 server 发起
• 用户：消息通知，直播间讨论区，聊天室，协同编辑

WebSocket 连接过程

• 发起一个 HTTP 请求
• 成功之后在升级到 WebSocket协议，再通讯

WebSocket 和 HTTP 区别

• WebSocket 协议名是 ws:// 或者 wss://，可双端发起请求
• WebSocket 没有跨域限制
• 通过 send 和 onmessage 通讯（HTTP 通过 req 和 res ）

Q: WebSocket 和 HTTP 长轮询的区别

• HTTP 长轮询：客户端发起请求，服务端阻塞，不会立即返回
  需要处理 timeout，即 timeout 之后重新发起请求
• WebSocket：客户端可发起请求，服务端也可发起请求

Q: 网页重绘 repaint 和 重排 reflow 有什么区别？

动态网页，随时都会重绘、重排

• 网页动画
• Modal Dialog 弹窗
• 增加/删除一个元素，显示/隐藏一个元素

重绘

• 元素外观改变，如颜色、背景色
• 但元素的尺寸、定位不变，不会影响其他元素的位置

重排

• 重新计算尺寸和布局，可能会影响其他元素的位置
• 如元素高度增加，可能会使相邻元素位置下移

区别

• 重排比重绘要影响更大，消耗也更大
• 所以，要尽量避免无意义的重排

减少重排的方法

• 集中修改样式，或直接切换 css class
• 修改之前先设置 display: none，脱离文档流
• 使用 BFC 特性，不影响其他元素位置
• 频繁触发（resize scroll）使用节流和防抖
• 使用 createDocumentFragment 批量操作 dom
• 优化动画，使用 CSS3 和 requestAnimationFrame

扩展 BFC

• Block Format Context 块级格式化上下文
• 内部的元素无论如何改动，都不会影响其他元素的位置

触发 BFC 的条件

• 根节点
• float: left/right;
• overflow: auto/scroll/hidden
• display: flex/grid; 的直接子元素
• position: absolute/fixed;

Q: 如何统一监听Vue组件报错？

• errorCaptured 监听下级组件错误，返回false阻止向上传播（监听一些重要、有风险组件的错误）
• errorHandler 监听全局Vue组件的错误（候补全局监听）
• window.onerror 监听其他JS错误，如异步（候补全局监听）

Q: 如何统一监听React组件报错？

• ErrorBoundary 监听组件渲染报错
  监听所有下级组件报错，可降级展示 UI
  只监听所有组件渲染时报错，不监听 DOM 渲染、异步报错
  只在 production 环境生效，dev 会直接报错
• 事件报错使用 try-catch 或 window.onerror
• 异步报错使用 window.onerror
• Promise 未处理的 catch 需要 onunhandledrejection 监听

Q: new 一个对象的过程是什么？

• 创建一个空对象，继承 constructor 的原型
• 将 obj 作为 this 执行 constructor ，并传入参数
• 返回 obj