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

Posted bonly-ge

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器输入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;
}

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

以上是关于浏览器输入url，缓存策略相关的主要内容，如果未能解决你的问题，请参考以下文章

HTTP面试-在浏览器输入url到页面展示

输入url会发什什么

浏览器缓存命中策略你了解多少？

第8题-浏览器缓存命中策略

你在浏览器输入一个URL都经历了什么过程

联合阅读浏览器缓存策略