前端习题-知识广度

移动端 click 300ms 延迟，如何解决

• 原因：点击缩放（double tap to zoom）网页。
• 可使用 FastClick 解决。
• 现代浏览器可使用 width=device-width 规避。

script标签的 defer 和 async 属性有何区别

• <script src="xxx.js"> ：HTML暂停解析，下载JS，执行JS，再继续 html 解析。
• <script async src="xxx.js">： js 下载和 html 解析可并行。下载完之后暂停 html 解析，执行 js，然后再继续 html 解析。
• <script defer src="xxx.js"> js 下载和 html 解析可并行。等待 html 解析完之后再执行 js 。

连环问：preload prefetch 的区别

• preload 表示资源在当前页面使用，浏览器会优先加载
• prefetch 资源预获取，表示资源可能在未来的页面（如通过链接打开下一个页面）使用，浏览器将在空闲时加载

连环问：dns-prefetch 和 preconnect 有什么作用？
一个 http 请求，第一步就是将域名通过 DNS 解析得到 IP ，然后进行 TCP 连接。连接成功后再发送请求。
dns-prefetch 即 DNS 预获取，preconnect 即预连接。都是针对未来页面的。
当网页请求第三方资源时，可以提前进行 DNS 查询、TCP 连接，以减少请求时的时间。

cookie 和 token 区别

cookie VS token

• cookie：http 规范；有跨域限制；可存储在本地；可配合 session 实现登录
• token：自定义标准；无跨域限制；不在本地存储；可用于 JWT 登录

cookie 和 session

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

JWT( JSON Web Token)的过程

• 前端输入用户名密码，传给后端
• 后端验证成功，返回一段 token 字符串 - 将用户信息加密之后得到的
• 前端获取 token 之后，存储下来
• 以后访问接口，都在 header 中带上这段 token

连环问：session和JWT哪个更好？
Session 优点

• 原理简单，易于学习
• 用户信息存储在服务端，可以快速封禁某个登录的用户 —— 有这方强需求的人，一定选择 Session

Session 的缺点

• 占用服务端内存，有硬件成本
• 多进程、多服务器时，不好同步 —— 一般使用第三方 redis 存储 ，成本高
• 跨域传递 cookie ，需要特殊配置

JWT 的优点

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

JWT 的缺点

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

总结：如果没有“快速封禁登录用户、保密”的需求，建议使用 JWT 方式。

连环问：如何实现SSO单点登录

• 主域名相同，则可共享cookie
• 主域名不同，则需使用SSO
  SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。
  SSO一般都需要一个独立的认证中心（passport），子系统的登录均得通过passport，子系统本身将不参与登录操作，当一个系统成功登录以后，passport将会颁发一个令牌给各个子系统，子系统可以拿着令牌会获取各自的受保护资源，为了减少频繁认证，各个子系统在被passport授权以后，会建立一个局部会话，在一定时间内可以无需再次向passport发起认证。

HTTP、TCP、UDP 有何区别

• HTTP 在应用层，而 UDP 和 TCP 在传输层
• TCP 是有连接的、有断开、稳定传输
• UDP 是无连接的、无断开、不稳定传输、但效率高

连环问：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。
  增加新的 method PUT DELETE 等，可以设计 Restful API。
• http2.0
  header 压缩，以减少体积。
  多路复用，一个 TCP 连接中可以多个 http 并行请求。拼接资源（如雪碧图、多 js 拼接一个）将变的多余。
  服务器端推送。

什么是 https 中间人攻击，如何预防？

https 加密原理
http 是明文传输，传输的所有内容（如登录的用户名和密码），都会被中间的代理商（无论合法还是非法）获取到。

http + TLS/SSL = https ，即加密传输信息。只有客户端和服务端可以解密为明文，中间的过程无法解密。
中间人攻击
中间人攻击，就是黑客劫持网络请求，伪造 CA 证书。

前端攻击手段

• XSS
  Cross Site Scripting 跨站脚本攻击。
  手段：黑客将JS代码插入到网页内容中，渲染时执行JS代码。
  预防：特殊字符替换。
• CSRF
  Cross-site request forgery 跨站请求伪造。
  手段：黑客诱导用户去访问另一个网站的接口，伪造请求。
  预防：严格的跨域限制+验证码机制。
• 点击劫持
  手段：黑客在自己的网站，使用隐藏的 <iframe> 嵌入其他网页，诱导用户按顺序点击。
  预防：增加 http header X-Frame-Options:SAMEORIGIN ，让 <iframe> 只能加载同域名的网页。
• DDoS
  Distributed denial-of-service 分布式拒绝服务。
  手段：分布式的、大规模的流量访问，使服务器瘫痪。
  预防：软件层不好做，需硬件预防(如阿里云WAF)
• SQL 注入
  手段：黑客提交内容时写入SQL语句，破坏数据库。
  预防：处理输入的内容，替换特殊字符。

webSocket 和 http 区别

webSocket 支持端对端的通讯。
可以由服务端发起，也可以由客户端发起。
场景：消息通知，直播讨论区，聊天室，协同编辑。

webSocket 建立连接时会先发起一个 http 请求，根服务端建立连接。连接成功之后再升级为 webSocket 协议，然后再通讯。

webSocket 和 http 区别

• webSocket协议名称是 ws:// ， 可以发起双端请求
• webSocket 无跨域限制
• webSocket 通过 send 和 onmessage 进行通讯，http 通过 req 和 res 通讯

连环问：webSocket 和长轮询（长连接）的区别

• http 长轮询：客户端发起请求，服务端阻塞，不会立即返回。
• webSocket：客户端和服务端都可发起请求。非阻塞。

从输入 url 到显示页面的完整过程

1.网络请求

• DNS 解析(得到IP)
• 建立 TCP 连接 (三次握手)
• 发送 http 请求
• 接收请求响应，获得网页 html 代码

2.解析：字符串->结构化数据

• html 构建 DOM 树
• css 构建 CSSOM（即 style tree）
• 两者结合形成 Render tree （包括尺寸、定位等）

3.渲染页面

• 计算各个DOM的尺寸、定位，最后绘制到页面
• 遇到 js可能会执行
• 异步加载的CSS、图片等，可能重新渲染页面

连环问：重绘 repaint 和重排 reflow ，有何区别

• 重绘 repaint ：元素外观改变，但尺寸和定位不变。例如：元素的背景色改变。
• 重排 reflow ：重新计算尺寸和布局，重新排列元素。如一个元素高度变化，导致所有元素都下移。

重绘不一定重排，但重排一定会导致重绘。要尽量避免重排。

减少重排的方法：

• 集中修改样式，或直接使用 class
• DOM 操作前先使用 display: none 脱离文档流
• 使用 BFC ，不影响外部的元素
• 对于频繁触发的操作（resize scroll 等）使用节流和防抖
• 使用 createDocumentFragment 进行批量 DOM 操作
• 优化动画，如使用 requestAnimationFrame 或者 CSS3

连环问：触发 css BFC 的条件
BFC - Block Formatting Context 块格式化上下文

• 根节点 html
• 设置 float left right
• 设置 overflow auto scroll hidden
• 设置 display inline-block table table-cell flex grid
• 设置 position absolute fixed

网页多标签页之间的通讯

• webSocket 需要服务端参与，但不限制跨域
• localStorage 简单易用
• SharedWorker 本地调试不太方便，考虑浏览器兼容性

连环问：iframe 通讯
通过 window.postMessage 发送消息。第二个参数，可以限制域名。
可监听 message 来接收消息。可使用 event.origin 来判断信息来源是否合法。