面试题-前端options预检和web优化方案

为什么post请求会发送两次请求？

• 1.第一次请求为options预检请求，状态码为：204
  • 作用：主要有两个
    • 作用1：询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求
    • 作用2：检测服务器是否为同源请求，是否支持跨域
    • 相关资料：www.ruanyifeng.com/blog/2016/0…
• 2.第二次为真正的post请求

说说几个前端web优化方案

• 为什么面试官喜欢问这个？
  • 因为当一个网页的web请求太多的时候，会影响这个网页的加载速度。从而影响用户体验。对于公司产品而言，优化web是非常有必要的
• 1.减少HTTP请求数
  • 这是必须要放在第一个回答的，因为这是优化web最优方案
  • 具体示例：精灵图
• 2.资源压缩
  • 就是一般我们第三方包有一个min版本，就是通过压缩文件体积来优化web
• 3. 合理利用浏览器缓存
  • 某些接口的数据是固定的，服务器就没有必要每一次都响应数据。可以让浏览器进行缓存。
  • 具体示例：例如省市县数据，这种数据一般不会变化

//缓存接口
app.get('/province', (req, res) => {
    console.log(req.url)
    //(1)设置响应状态码
    res.statusCode = 200
    //(2)设置响应头
    //这个响应头就会让浏览器去缓存这个接口的数据  max-age=缓存时间(单位秒)
    res.setHeader("Cache-Control", 'max-age=10')
    res.send(['湖北省','湖南省','安徽省'])
})