浏览器输入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都经历了什么过程

联合阅读浏览器缓存策略