前端习题-知识广度

最新推荐文章于 2024-11-01 10:18:14 发布

YangZ_L

最新推荐文章于 2024-11-01 10:18:14 发布

阅读量273

点赞数

分类专栏：前端习题文章标签：前端 web安全 javascript

本文链接：https://blog.csdn.net/yangz_l/article/details/124718301

版权

前端习题专栏收录该内容

4 篇文章 1 订阅

订阅专栏

题目目录

移动端 click 300ms 延迟，如何解决
script标签的 defer 和 async 属性有何区别
cookie 和 token 区别
HTTP、TCP、UDP 有何区别
什么是 https 中间人攻击，如何预防？
前端攻击手段
webSocket 和 http 区别
从输入 url 到显示页面的完整过程
网页多标签页之间的通讯

移动端 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语句，破坏数据库。
预防：处理输入的内容，替换特殊字符。