• 浏览器输入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
  • 相关阅读:
    装箱、拆箱操作发生在
    @Data的注解使用以及在IDEA上安装
    Mysql中 BLOB字段转String的方法
    不属于java语言鲁棒性特点的是
    java object默认的基本方法
    哪个类可用于处理 Unicode?
    类和接口的继承
    抽象类的叙述:
    Hashtable 和 HashMap 的区别是:
    编程之美初赛第一场--焦距
  • 原文地址:https://www.cnblogs.com/bonly-ge/p/12941850.html
Copyright © 2020-2023  润新知