浏览器输入url，缓存策略相关

1. 输入url到页面加载全过程（必考）

• DNS解析域名找到对应IP
• 通过IP找到对应服务器进行三次握手
• 服务器接收到信息返回对应文件
• 浏览器判断状态码开始处理
• 判断是否是压缩文件
• 解析html构建DOM树、CSSOM树、执行js文件
• 生成 Render 树，GPU 绘制，合成图层，将内容显示在屏幕上

2. HTTP报文的请求和返回会有几个部分（请求行、请求头、请求体）；每部分具体都有什么（常见的请求头）

• 请求行
  • 由请求方法 url 协议版本组成 (GET/images/logo.gif HTTP/1.1)
• 首部

  • 通用首部

    • Catch-Control-控制缓存的行为
    • Connection 浏览器想要优先使用的链接类型，比如keep-alive
    • Date 创建报文的时间
    • Via - 代理服务器的时间

  • 请求首部

    • User-Agent 客户端信息
    • Accept 能正确接受的媒体类型
    • Accept-Charset 能正确接受的字符集
    • Accept-Encoding 能正确接受的编码格式列表
    • Accept-Language 能正确接受的语言列表
    • Host 服务器域名
    • If-Match 两端资源标记比较
    • if-Modified-Since 本地资源未修改返回304（比较时间）
    • if-None-Match 本地资源未修改返回304（比较标记）
    • Referer 表示浏览器所访问的前一个页面

  • 响应首部

    • Server 服务器名字
    • ETag 资源表示
    • Location 客户端重定向到某个URL
    • Proxy-Authenticate 向代理服务器发送验证信息
    • WWW-Authenticate 获取资源需要的验证信息
    • Age 资源在代理缓存中存在的时间

  • 实体首部

    • Allow 资源的正确请求方式
    • Content-Encoding 内容的编码方式
    • Content-Type 内容的媒体类型
    • Expires 内容过期时间
    • Las_modified 内容的最后修改时间
• 实体

3. 常用的HTTP方法有哪些？

• GET： 用于请求访问已经被URI（统一资源标识符）识别的资源，可以通过URL传参给服务器
• POST：用于传输信息给服务器，主要功能与GET方法类似，但一般推荐使用POST方式。
• PUT： 传输文件，报文主体中包含文件内容，保存到对应URI位置。
• HEAD： 获得报文首部，与GET方法类似，只是不返回报文主体，一般用于验证URI是否有效。
• DELETE：删除文件，与PUT方法相反，删除对应URI位置的文件。
• OPTIONS：查询相应URI支持的HTTP方法。

状态码

• 2xx 成功
  • 200
  • 204 请求成功，但响应报文不含实体的主体部分
  • 205 请求成功，但是响应报文不含实体的主体部分，与204的区别是要求请求方重置内容
  • 206 进行范围请求
• 3xx 重定向
  • 301 永久重定向
  • 302 临时重定向
  • 303 表示资源存在着另一个URL，应使用GET方法获取资源
  • 304 表示服务器允许访问资源，但因发生请求未满足条件的情况
  • 307 临时重定向 但是期望客户端保持请求方法不变向新的地址发出请求
• 4xx 客户端错误
  • 400 请求报文存在语法错误
  • 401 表示发送的请求需要有通过HTTP认证的认证信息
  • 403 表示对请求资源的访问被服务器拒绝
  • 404 表示在服务器上没有找到请求资源
• 5xx 服务端错误
  • 500 表示服务器在执行请求是发生了错误
  • 501 表示服务器不支持当前请求所需要的某个功能
  • 503 表明服务器暂时处于超负载或正在停机维护，无法处理请求

4. GET和POST的区别

• get通过地址栏传递参数，post通过body来传输
• post相对来说更安全
• URL有长度限制，会影响 Get 请求，浏览器会保存个请求记录
• GET多用于搜索，post多用于注册

5. URI和URL的区别

Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是一个来URI来定位的
URI一般由三部组成：
①访问资源的命名机制
②存放资源的主机名
③资源自身的名称，由路径表示，着重强调于资源。

URL是uniform resource locator统一资源定位器，它是一种具体的URI，即URL可以用来标识一个资源，而且还指明了如何locate这个资源。
URL是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上，特别是著名的Mosaic。
采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。URL一般由三部组成：
①协议(或称为服务方式)
②存有该资源的主机IP地址(有时也包括端口号)
③主机资源的具体地址。如目录和文件名等

6. 强缓存和协商缓存的区别？控制协商缓存的字段（必考）

强缓存的状态码是200，判断缓存的字段有Expires（通过对比时间 优先级最低）、Cache-Control和Pragma

• Expries的值是一个HTTP日期，浏览器通过对比系统时间来判断缓存是否失效
• Cache-Control常用属性值
  • max-age：单位是秒，缓存时间计算的方式是距离发起时间的秒数，超过间隔缓存失效
  • no-cache：不使用强缓存，需要与服务器验证缓存是否新鲜
  • no-store：不使用缓存，每次都向服务器请求资源
  • privite：专用于个人的缓存，中间代理、CDN等不能缓存词响应
  • public：响应可以被中间代理、CDN等缓存
  • must-revalidate:在缓存过期前可以使用，过期后必须向服务器验证

  需要注意no-cache不是不缓存数据，只是浏览器在使用缓存数据时，需要先确认一下数据是否还跟服务器保持一致，也就是协商缓存。而no-store才表示不会被缓存，及不使用强制缓存，也不使用协商缓存

• Pragma
  • Pragma只有一个属性值，就是no-cache，效果和Cache-Ctrol中的no-cache一致，不使用强缓存，优先级最高

强缓存如何设置

强缓存需要服务端设置expires和cache-control

location ~ .*.(ico|svg|ttf|eot|woff)(.*) {
  proxy_cache               pnc;
  proxy_cache_valid         200 304 1y;
  proxy_cache_valid         any 1m;
  proxy_cache_lock          on;
  proxy_cache_lock_timeout  5s;
  proxy_cache_use_stale     updating error timeout invalid_header http_500 http_502;
  expires                   1y;
}

• 图解 HTTP 缓存

7. 对跨域的了解，跨域怎么解决（必考）

• webpack dev
• jsonp
• Nginx
• 利用node请求
• 服务端设置请求头

8. 什么时候会触发cors（跨域资源共享）预请求？cors的请求头和响应头有哪些？（必考）

满足下面的所有条件就不会产生预检请求：

• 请求方式是GET/POST/HEAD其中的任意一个
• 必须是下面定义对CORS安全的首部字段集合，不能是集合之外的其他首部字段
• Content-Type的值必须是text/plain、multipart/form-data、application/x-www-form-urlencode中任意一个值

请求头

1. Orign：当前请求源，和响应头里的Access-Control-Allow-Orign对标，是否允许当前源访问
2. Access-Control-Request-Headers:本次真实请求的额外请求头和响应头里的Access-Control-Allow-Headers对标，是否允许真实请求的请求头
3. Access-Control-Request-Method:本次真实请求的额外方法，和响应头里的Access-Control-Allow-Methods对标，是否允许真是请求使用的请求方法

响应头

1. Access-Control-Allow-Credentials:凭证-这里的包括证书、cookie
2. Access-Control-Allow-Headers
3. Access-Control-Allow-Methods
4. Access-Control-Allow-Origin
5. Access-Control-Expose-Headers

   在CORS中，默认的，只允许客户端读取下面六个响应头

   • Cache-Control
   • Content-Language
   • Content-Type
   • Expires
   • Last-Modified
   • Pragma
6. Access-Control-Max-Age:设置预检请求的有效时长，就是服务器允许的请求方法和请求头做个缓存

9. 前端网络与安全了解多少？如何预防脚本攻击xss csrf

• xss攻击如何防御
  • 通过把尖角号进行转义
  • 如果是富文本的方式就可以通过建立白名单的方式
• csrf-跨站请求伪造
  • GET请求不对数据进行修改
  • 不让第三方网站访问到用户Cookie
  • 组织第三方网站请求接口
  • 请求时附带验证信息，比如验证码或者Token
• 点击劫持-利用iframe嵌套的方式嵌入自己的页面中，并把iframe设置成透明
  • 设置HTTP响应头X-FRAME-OPTIONS为DENY。表示页面不允许通过iframe的方式展示

10. 前端性能优化（必考）

• 图片压缩处理
• 懒加载
• 骨架屏
• cdn应用
• 动态加载组件
• 服务端渲染
• 预渲染
• 按需加载
• 开启gzip