小汇总

作者: 小小前端搬运工 | 来源:发表于2022-05-03 23:56 被阅读0次

    Cookie 和 session 的区别

    HTTP 是一个无状态协议,因此 Cookie 的最大的作用就是存储 sessionId 用来唯一标识用户

    一句话概括 RESTFUL

    就是用 URL 定位资源,用 HTTP 描述操作。

    对 HTML 语义化标签的理解

    HTML5 语义化标签是指正确的标签包含了正确的内容,结构良好,便于阅读,比如 nav 表示导航条,类似的还有 article、header、footer 等等标签。

    click 在 ios 上有 300ms 延迟,原因及如何解决?

    (1)粗暴型,禁用缩放

    <meta name="viewport" content="width=device-width, user-scalable=no"> 
    

    (2)利用 FastClick,其原理是:

    检测到 touchend 事件后,立刻出发模拟 click 事件,并且把浏览器 300 毫秒之后真正出发的事件给阻断掉

    addEventListener 参数

    addEventListener(event, function, useCapture)

    其中,event 指定事件名;function 指定要事件触发时执行的函数;useCapture 指定事件是否在捕获或冒泡阶段执行。

    讲讲 304

    304:如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个 304 状态码。

    HTTP 支持的方法

    GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, CONNECT

    说一下浏览器缓存

    缓存分为两种:强缓存和协商缓存,根据响应的 header 内容来决定。

    强缓存相关字段有 expires,cache-control。如果 cache-control 与 expires 同时存在的话,

    cache-control 的优先级高于 expires。

    协商缓存相关字段有 Last-Modified/If-Modified-Since,Etag/If-None-Match

    cache-control 的值有哪些

    cache-control 是一个通用消息头字段被用于 HTTP 请求和响应中,通过指定指令来实现缓存机制,这个缓存指令是单向的,常见的取值有 private、no-cache、max-age、 must-revalidate 等,默认为 private。

    浏览器在生成页面的时候,会生成那两颗树?

    构造两棵树,DOM 树和 CSSOM 规则树,

    当浏览器接收到服务器相应来的 HTML 文档后,会遍历文档节点,生成 DOM 树,

    CSSOM 规则树由浏览器解析 CSS 文件生成。

    输入 URL 到页面加载显示完成发生了什么?

    DNS 解析

    TCP 连接

    发送 HTTP 请求

    服务器处理请求并返回 HTTP 报文

    浏览器解析渲染页面

    连接结束

    知道 304 吗,什么时候用 304?

    304:如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个 304 状态码。

    cookie 有哪些编码方式?

    encodeURI()

    http 常见的请求方法

    <get、post,这两个用的是最多的,还有很多比如 patch、delete、put、options 等等

    web 性能优化

    降低请求量:合并资源,减少 HTTP 请求数,minify / gzip 压缩,webP,lazyLoad。

    加快请求速度:预解析 DNS,减少域名数,并行加载,CDN 分发。

    缓存:HTTP 协议缓存请求,离线缓存 manifest,离线数据缓存 localStorage。

    渲染:JS/CSS 优化,加载顺序,服务端渲染,pipeline。

    HTTP 支持的方法

    GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, CONNECT

    如何画一个三角形

    三角形原理:边框的均分原理

    div { 
    
    width:0px; 
    
    height:0px; 
    
    border-top:10px solid red; 
    
    border-right:10px solid transparent; 
    
    border-bottom:10px solid transparent; 
    
    border-left:10px solid transparent; 
    
    } 
    

    HTTP 请求的方式,HEAD 方式

    head:类似于 get 请求,只不过返回的响应中没有具体的内容,用户获取报头

    options:允许客户端查看服务器的性能,比如说服务器支持的请求方式等等。

    一个图片 url 访问后直接下载怎样实现?

    请求的返回头里面,用于浏览器解析的重要参数就是 OSS 的 API 文档里面的返回 http 头,决定用户下载行为的参数。

    下载的情况下:

    1. x-oss-object-type:

    Normal

    1. x-oss-request-id:

    598D5ED34F29D01FE2925F41

    1. x-oss-storage-class:

    Standard

    fetch 发送 2 次请求的原因

    fetch 发送 post 请求的时候,总是发送 2 次,第一次状态码是 204,第二次才成功?

    原因很简单,因为你用 fetch 的 post 请求的时候,导致 fetch 第一次发送了一个 Options 请求,询问服务器是否支持修改的请求头,如果服务器支持,则在第二次中发送真正的请求

    Doctype 作用?严格模式与混杂模式如何区分?它们有何意义?

    Doctype 声明于文档最前面,告诉浏览器以何种方式来渲染页面,这里有两种模式,严 格模式和混杂模式。

    严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

    混杂模式,向后兼容,模拟老式浏览器,防止浏览器无法兼容页面。

    相关文章

      网友评论

        本文标题:小汇总

        本文链接:https://www.haomeiwen.com/subject/rffwyrtx.html