前端知识体库

# 浏览器

# 请写出你知道的http状态码以及含义

200, 状态请求成功

301，永久重定向

302, 临时重定向

304，缓存，服务器告诉客户端内容没有改变，直接拿缓存内容

400，参数错误

401，需要用户验证

403，禁止访问

404，没找到该资源

500，服务器错误

# http有什么特点

  1. 无状态
  2. 简单
  3. 快速
  4. 没有格式的限制

# http和https区别

由于http是简单无状态的，不适合传输敏感信息，比如银行卡，密码，为了安全考虑，所以出现了https

而https协议是通过CA证书，由ssl/tls + http协议构建，进行加密传输，和身份认证的网络协议

客户使用https的URL访问Web服务器，要求与Web服务器建立SSL连接

https 认证身份的时候是非对称加密 传输的时候是对称加密

HTTP与HTTPS的区别 (opens new window)

# http1.1和http2.0区别

HTTP2支持多路复用

支持服务器推送

支持压缩

# 说一下浏览器的缓存机制

# 强缓存

第一次直接服务器请求，第二次直接拿缓存

强缓存方案

Exprires: 该资源什么时候会过期， 缺点就是需要客户端时间和服务器时间要同步

Cache-control：max-age：表示该资源多少时间后过期（毫秒）

1.jpg

# 协商缓存

第一次请求缓存且保存缓存标识与时间，重复请求向服务器发送缓存标识和最后缓存时间，服务端进行校验，如果失效则使用缓存

If-None-Match/ETag：缓存标识

Last-modified/If-Modified-Since: 表明请求的资源上次的修改时间

# web安全信息

# xss(跨站攻击脚本)

  • 反射型（非存储）

攻击者通过url的形式，添加一些恶意脚本，引诱被用户访问，用户点击之后，窃取用户数据，或者冒充用户请求数据

比如点击链接之后，执行脚本导致数据被攻击者知道

  • 持久型（存储）

攻击者将恶意脚本提交到目标网站的数据库中，用户打开目标网站时会执行该恶意脚本

比如发表文章，加入恶意脚本，导致其他用户观看该文章，暴露自己的数据

  • Dom型

反射型和持久型，都是将恶意脚本解析执行该脚本

JavaScript 代码不够严谨 .innerHTML、.outerHTML、.appendChild、document.write()

预防xss

  1. 转义，链接需要通过encodeURIComponent转义，前端显示转义，后端插入数据时也转义
  2. 用cookies httpOnly防止被截取cookies
  3. Content-Security-Policy
  4. 输入内容长度控制

# CSRF（Cross-site request forgery）跨站请求伪造

攻击者冒充用户，请求数据

# CSRF的特点

  1. 攻击通常在第三方网站发起

  2. 攻击者是利用被攻击网站的登录凭证，冒充受害者提交操作

  3. 跨站请求（图片，超链接， cors）

# 预防

  1. 添加验证码(体验不好)

  2. 判断请求的来源：检测Referer(并不安全，Referer可以被更改)

  3. 使用Token(主流)

# 点击劫持

点击劫持是指在一个Web页面中隐藏了一个透明的iframe，用外层假页面诱导用户点击，实际上是在隐藏的frame上触发了点击事件进行一些用户不知情的操作

【面试篇】寒冬求职之你必须要懂的Web安全 (opens new window)

# 事件循环是什么

由于js是单线程，当我们调用函数的时候，js引擎会将函数放入到主线程执行，遇到异步函数的时候，如setimeOut, setInterval, http请求等，js引擎会将该回调函数放入到一个异步队列中，等到主线程执行完成之后，再去自动执行异步队列中的回调函数

前端小智 事件循环 (opens new window)

# 小程序 与 h5，app区别

小程序的优势

  1. 无需下载
  2. 打开速度快
  3. 开发成本低于app

劣势

  1. 限制比较多， 页面大小不超过1M, 不能打开超过 5 个层级的页面
  2. 样式单一
  3. 只能在对应的应用中运行

初中级前端面试题 (opens new window)

# 假如移动端设备的尺寸是640px， 要实现1rem = 16px，需要怎么实现

其实很简单，1rem是指html的font-size为16px 也就是设备宽度/640， 等于设备的html的font-size/16（640的根元素的值）

function refreshRem () {
const width = window.outerWidth
    const px = width * 16 / 640;
    console.log(px)
    document.getElementsByTagName('html')[0].style.fontSize = px + 'px'
}
refreshRem()

# 接口如何防刷

  1. 通过ip限制请求次数

  2. http请求头校验（host, user-Agent, Referer）

  3. 人机验证，无痕验证，验证码

  4. 网关控制流量，对一个时间段出现流量异常，可以拒绝请求

# 为什么for循环嵌套顺序会影响性能

var t1 = new Date().getTime()
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 1000; j++) {
    for (let k = 0; k < 10000; k++) {
    }
  }
}
var t2 = new Date().getTime()
console.log('first time', t2 - t1)

for (let i = 0; i < 10000; i++) {
  for (let j = 0; j < 1000; j++) {
    for (let k = 0; k < 100; k++) {

    }
  }
}
var t3 = new Date().getTime()
console.log('two time', t3 - t2)

# 统计 1 ~ n 整数中出现 1 的次数

function findOne(n){
	let count = 0;
	for(let i=0;i<=n;i++){
		count+=String(i).split('').filter(item=>item==='1').length
	}
	return count;
}

# HTTPS是对称加密还是非对称加密

HTTPS 在内容传输的加密上使用的是对称加密，非对称加密只作用在证书验证阶段

← 原理面试题 →