温故知新（二）

missmz
81 阅读4分钟

vue2和vue3的入口文件的差别

//vue2 初始化实例new Vue({render:h=>h(app)}).$mount('#mount')
//vue3 函数式风格import {createApp} from 'vue'createApp.mount('#app')

vue3中使用

vue3中加上 setup之后 vant UI 组件库可以直接引入后使用 无需注册component

react中分别有

  • class声明的类
  • class声明的类组件
  • 函数
  • 函数组件

盒模型

CSS3中的盒模型有2种，标准盒模/IE(替代)盒模型

两种盒模型都是由 content+padding+margin+border 组成的，盒模型的大小是 content+padding+border 决定的。

HTML语义化的意义

  • 能清晰查看代码结构，方便协作沟通
  • 方便机器爬虫的检索，利于网站的结果收录有利seo.
  • 就算没有css的渲染也能清晰看到页面的内容结构/代码结构。

script标签在页面中会有什么影响，script标签中添加async和defer有什么区别

  • script会阻碍html的解析，只有scipt被下载并执行完脚本之后才会继续解析html
  • Script/async解析html的过程中会异步下载，下载完立即执行，可能会阻断html的解析
  • Script/defer完全不会阻碍html的解析，解析完之后再顺序执行脚

从浏览器输入一个url后到请求返回发生了什么

输入url后解析出协议/主机/端口/路径等信息，并构造一个http请求

  • 强缓存

强缓存是指在第一次访问服务器获得数据之后，在未过期的时候不会再次去服务器请求数据，会直接从浏览器缓存的数据里直接返回对应的结果。Http1.0和http1.1协议中关于强制缓存的过期时间通过不同的响应头字段实现。

  • Http1.0协议

Http1.0协议中强制缓存通过Expires来实现，expires来表示未来会过期的时间。发起请求的时间如果超过了expires设置的时间则会去重新请求服务器的数据，如果没有超过expires设置的时间则会从浏览器的本地缓存数据库（from memory或者from disk）2种方式，通过浏览器的策略随机获取。

  • Http1.1协议

Http1.1协议中，强制缓存通过Cache-Control来控制实现。Cache-Contro有以下几个设置参数：

  • Private:客户端可以缓存
  • Public:客户端和代理服务器都可以缓存
  • Max-age=xxx:缓存的资源会在xxx秒之后过期
  • no-cache:需要使用协商缓存来验证是否过期
  • No-store:不可缓存

一般强缓存使用较多的是max-age=xxx来实现，2种协议都会被兼容使用，但是http1.1协议的优先级比较高。

  • 协商缓存

协商缓存和强缓存的不同在于，协商缓存每次都会与服务器进行通信，第一次请求服务器数据之后会获得一个缓存标识，并存入缓存数据中，第二次请求服务器数据时会将上一次的缓存标识发送给服务器，服务器进行比对后判断标识是否匹配，如果不匹配则会更新服务请求数据，并将新数据和新的缓存标识一起返回，如果匹配则会返回304的http状态码，并直接从浏览器缓存中获取数据。同样的，协商缓存http1.0协议和http1.1协议的实现也有不同。

  • Http1.0协议

请求服务器资源之后服务器会把最后修改资源的时间填入 Last-Modifield,再次请求时浏览器会将if-mofifield-since中的资源修改时间和服务器的资源修改时间相匹配，相同则返回304，并使用本地浏览器资源，不同则返回重新请求的服务器数据资源并将新的修改时间值返回填入last-modifield。

弊端，因为是比对修改时间如果修改完文件之后又恢复了，资源并没有更改但是修改时间变了，还是会再次请求。

  • Http1.1协议

通过请求返回的Etag来设置缓存标识，Etag的值通过服务器设置。第一次请求会将Etag值和资源都交给浏览器缓存，第二次会把Etag值通过if-none-match传给服务器去比对。相同则返回304状态码，访问浏览器的缓存，不同则返回新的资源并更新Etag值。

  • DNS域名解析

浏览器要向这个url的主机名对应的服务器发送请求，得知服务器的IP，对于浏览器来说，DNS的作用就是将主机名转换成IP

  • TCP三次握手连接

TCP需要三次握手的原因是因为TCP的自身特点可靠传输决定的。客户端和服务端建立可靠传输的前提是确认双方的接收和发送能力。第一次握手确认客户端的发送能力，第二次握手确认了服务端的接收和发送能力，第三次确认客户端的接收能力。三次握手保证了不容易丢包。

  • http请求

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

  • 浏览器渲染页面

  • 断开TCP连接（4次挥手 ）

avatar
文章
阅读
粉丝