前端日常问题记录

1.移动端H5 click有300ms延迟，如何解决？

背景double tap to zoom：

初期解决方案FastClick

fastclick原理：

• 监听touchend事件（touchstart touchend 会先于click 触发）
• 使用自定义DOM事件模拟一个click事件
• 把默认的click事件（300ms之后触发）禁止掉

现在浏览器的改进

该属性表示已经是响应式处理，不需要缩放，就不会需要双击延迟

2.网络请求中，token和cookie有什么区别？

cookie

• HTTP无状态，每次请求都要带cookie，以帮助识别身份
• 服务端也可以向客户端set-cookie，cookie大小限制4kb
• 默认有跨域限制：不可跨域共享、传递cookie（虽然是默认，但是也可以通过手段完成）
  传递：withCredentials
  
  服务起端也要设置

cookie本地存储

• HTML5之前cookie常被用于本地存储
• HTML5之后推荐适用localStorage和sessionStorage

现代浏览器禁止第三方cookie

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

cookie和session

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

token vs cookie

• cookie是HTTP规范的一种，token是自定义传递

• cookie会默认被浏览器存储，而token需自己存储

• token默认没有跨域限制

• cookie：HTTP标准；跨域限制;配合session使用

• token：无标准；无跨域限制；用于JWT

JWT (JSON Web Token)

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

session和JWT哪个更好

没有那哪个更好，只是适合什么场景

session：
优点

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

缺点：

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

JWT:
优点

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

缺点

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

如有有严格管理用户信息的要求，推荐session
如果没有特殊要求，则使用JWT(如创业初期的网站)

3.如何实现SSO单点登录

基于cookie

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

SSO

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

4.HTTP协议和UDP协议有什么区别？

网络协议

• HTTP是在应用层
• TCP和UDP是在传输层
• 严格来说是要拿TCP和UDP来对比
  

TCP协议

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

UDP协议

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

5、HTTP协议1.0 1.1 2.0有什么区别？

HTTP1.0

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

HTTP1.1（比较常用）

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

HTTP2.0

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

6、什么是HTTPS中间人攻击？如何预防？

HTTPS加密传输

• HTTP明文传输
• HTTPS加密传输 HTTP+TLS/SSL

7、script defer和async有什么区别？

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

8、prefetch 和 dns-prefetch 有什么区别？

preload和prefetch

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

dns-prefetch和preconnet

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

prefetch 是资源预获取(和 preload 相关)
dns-prefetch 是 DNS 预查询(和 preconnect 相关)

9、前端攻击有哪些？该如何预防？

XSS

• Cross Site Script 跨站脚本攻击
• 手段：黑客将js代码插入到网页内容中，渲染时执行JS代码
• 预防：特殊字符替换（前端或者后端）
  

CSRF

• Cross Site Request Forgery 跨站请求伪造
• 手段：黑客诱导用户去访问另一个网站的接口，伪造请求
• 手段：严格控制跨域+验证码机制

CSRF详细过程：
用户登录了 A 网站，有了 cookie
黑客诱导用户到 B 网站，并发起 A 网站的请求
A 网站的 API发现有 cookie，认为是用户自己操作的

解决：
严格的跨域请求限制，如判断 referrer (请求来源 )
为 cookie 设置 SameSite,禁止跨域传递 cookie
关键接口使用短信验证码

点击劫持（Click Jacking）

• 手段：诱导界面上蒙一个透明的iframe，诱导用户点击
• 预防:让iframe不能跨域加载
  

DDos(Distribute denial-of-service 分布式拒绝服务)

• 手段:分布式的、大规模的流量访问，使服务器瘫痪
• 预防:软件层不好做，需硬件预防(如阿里云 WAF)

SQL注入

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

10、WebSocket和HTTP有什么区别？

WebSocket

• 支持端对端通讯（可以从client发起，也可以由server发起）
• 用于：消息通知，直播间讨论区，聊天室，协调编辑
  简单demo
  
  本地起服务：
  
  
  
  

WebSocket连接过程

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

区别：

• WebSocket协议名是ws://,可双端发起请求
• WebSocket没有跨域限制
• 通过 send 和 onmessage 通讯(HTTP 通过 req和 res )
  

Websocket和HTTP长轮询的区别？

• HTTP 长轮询:客户端发起请求，服务端阻塞，不会立即返回
• WebSocket:客户端可发起请求，服务端也可发起请求

11、描述从输入url到页面展示的完整过程

• 网络请求
• 解析
• 渲染

网络请求

• DNS查询（得到IP）,建立TCP连接（三次握手）
• 浏览器发起HTTP请求
• 收到请求响应，得到HTML源代码

继续请求静态资源

• 解析HTML过程中，遇到静态资源还会继续发起网络请求
• js css 视频等
• 注意：静态资源有可能强缓存，此时不必请求

解析：字符串——>结构化数据

• HTML构建DOM树
• CSS构建CSSOM树（style tree）
• 两者结合，形成render tree

优化解析：
css放在 < head >中，不要异步加载CSS
JS放在body最下面（或者合理使用defer async）
img提前定义好width、height

渲染：Render Tree绘制到页面

• 计算各个DOM的尺寸、定位，最后绘制到页面
• 遇到js可能执行（参考defer async）
• 异步css、图片加载，可能会触发重新渲染

12、重绘repaint和重排 reflow有什么区别？

重绘repaint

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

重排reflow

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

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

减少重排方式：

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

15、如何实现网页多标签通讯？

WebSocket

• 无跨域限制
• 需要服务端支持，成本高

通过localStorage通讯

• 同域的A和B两个页面
  A 页面设置 localStorage
  B 页面可监听到localStorage 值的修改
  A页面：
  
  B页面：
  

通过SharedWorker通讯

• SharedWorker是WebWorker 的一种
• WebWorker 可开启子进程执行JS，但不能操作 DOM
• SharedWorker可单独开启一个进程，用于同域页面通讯

答案

• WebSocket 需要服务端，成本较高
• localStorage简单易用，推荐
• SharedWorker 调试不方便，不兼容 IE11

16、网页和iframe如何通讯？

• 使用postMessage通讯
• 注意跨域的限制和判断

17、如果一个H5很慢，你该如何排查性能问题？

首先问是哪里很慢，是首页加载慢？还是哪里操作慢？细化问题，还有咱们这个有啥标准吗？

前端性能指标

• First Paint（FP）第一次渲染
• First Contentful Paint（FCP）第一次有内容的渲染
• First Meaningful Paint(FMP)–以弃用，改用 LCP 第一次有意义的渲染
• DomContentLoaded (DCL) 页面DOM加载完成
• Largest Contentfull Paint (LCP) 页面最大的内容渲染完
• Load（L）全部加载完成

Chrome devTools

• Performance可查看上述性指标，并有网页快照
• Network 可以查看各个资源的加载时间

Lighthouse

• 非常流行的第三方评测性能工具
  
• 如果是网页加载慢
  优化服务端硬件配置，使用CDN
  路由懒加载，大组件异步加载 - 减少主包的体积
  优化HTTP缓存策略
• 如果是网页渲染慢
  优化服务端接口(如 Ajax 获取数据慢)
  继续分析，优化前端组件内部的逻辑(参考 Vue React 优化)
  服务端渲染 SSR