Loading...
墨滴

1573467857

2021/08/25  阅读:37  主题:橙心

前端知识笔记

浏览器

HTTP

计算机网络模型

互联网协议入门

  • TCP/IP

    TCP/IP是一个协议簇。里面包括很多协议的,UDP只是其中的一个, 之所以命名为TCP/IP协议,因为TCP、IP协议是两个很重要的协议,就用他两命名了

  • TCP/IP划分了四层网络模型

    • 应用层:负责各种不同应用之间的协议,如浏览器的HTTP协议、电子邮件的STMP协议等。

    • 传输层:负责可靠传输的TCP协议、高效传输的UDP协议

    • 网络层:负责寻址(准确找到对方设备)的IP协议

    • 数据链路层:负责将数字信号在物理通道(网线)中准确传输

  • 四层网络协议的作用

    • 发送端是由上至下,把上层来的数据在头部加上各层协议的数据(部首)再下发给下层。

    • 接受端则由下而上,把从下层接受到的数据进行解密和去掉头部的部首后再发送给上层。

    • 层层加密和解密后,应用层最终拿到了需要的数据。

TCP和UDP的区别

  • UDP协议

    比较简单,容易实现,但是可靠性较差,一旦数据包发出,无法知道对方是否收到。

  • TCP协议

    在收发数据前,必须和对方建立可靠的连接。TCP建立连接要进行3次握手,而断开连接要进行4次。但过程复杂、实现困难、消耗较多的资源。

http请求方式

  1. OPTIONS:返回服务器针对特定资源所支持的HTTP请求方法,也可以利用向web服务器发送‘*’的请求来测试服务器的功能性
  2. HEAD:向服务器索与GET请求相一致的响应,只不过响应体将不会被返回。这一方法可以再不必传输整个响应内容的情况下,就可以获取包含在响应小消息头中的元信息。
  3. GET:向特定的资源发出请求。注意:GET方法不应当被用于产生“副作用”的操作中,例如在Web Application中,其中一个原因是GET可能会被网络蜘蛛等随意访问。Loadrunner中对应get请求函数:web_link和web_url
  4. POST:向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。 Loadrunner中对应POST请求函数:web_submit_data,web_submit_form
  5. PUT:向指定资源位置上传其最新内容
  6. DELETE:请求服务器删除Request-URL所标识的资源
  7. TRACE:回显服务器收到的请求,主要用于测试或诊断
  8. CONNECT:HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器

http状态码

  • 1XX- 信息型,服务器收到请求,需要请求者继续操作。
  • 2XX- 成功型,请求成功收到,理解并处理。
  • 3XX - 重定向,需要进一步的操作以完成请求。
  • 4XX - 客户端错误,请求包含语法错误或无法完成请求。
  • 5XX - 服务器错误,服务器在处理请求的过程中发生了错误。

常见状态码

  • 304 Not Modified 未修改,使用缓存
  • 401 Authorization Required 权限认证失败
  • 403 Forbidden 未授权
  • 404 Not Found 不存在
  • 405 Not Allowed 请求方式错误
  • 500 表示内部服务器错误
  • 504 Gateway Time-out 请求超时

http无状态

  • 什么是http无状态

    每个http请求都是相互独立的,每个请求都包含了处理请求所需的完整数据。每次发送一次HTTP协议格式的报文都不需要依赖上一次报文的发送,即每次传输报文都是相互独立的,不受上次影响。

  • http无状态缺点

    每个请求所需要的信息都要包含在请求中一次发送给服务端,导致单个消息的结构比较复杂,必须能够支持大量元数据,因此http消息的解析比其他许多协议都要复杂。

    同时导致相同数据在多个请求上需要反复传输,比如cookies,host,authentication等往往是完全重复的元数据,一定程度上降低了传输效率。

HTTP特点

  • http协议支持客户端/服务端模式,也是一种请求/响应模式的协议。
  • 简单快速:客户向服务器请求服务时,只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。
  • 灵活:HTTP允许传输任意类型的数据对象。传输的类型由Content-Type加以标记。
  • 无连接:限制每次连接只处理一个请求。服务器处理完请求,并收到客户的应答后,即断开连接,但是却不利于客户端与服务器保持会话连接,为了弥补这种不足,产生了两项记录http状态的技术,一个叫做Cookie,一个叫做Session。
  • 无状态:无状态是指协议对于事务处理没有记忆,后续处理需要前面的信息,则必须重传。

HTTP存在问题

  • 请求信息明文传输,容易被窃听截取。
  • 数据的完整性未校验,容易被篡改
  • 没有验证对方身份,存在冒充危险

HTTPS通信流程

HTTPS 协议(HyperText Transfer Protocol over Secure Socket Layer):一般理解为HTTP+SSL/TLS,通过 SSL证书来验证服务器的身份,并为浏览器和服务器之间的通信进行加密

HTTPS原理和通信流程

1.客户端请求 HTTPS 网址,然后连接到 server 的 443 端口 (HTTPS 默认端口,类似于 HTTP 的80端口)。

2.采用 HTTPS 协议的服务器必须要有一套数字 CA (Certification Authority)证书,证书是需要申请的,并由专门的数字证书认证机构(CA)通过非常严格的审核之后颁发的电子证书 (当然了是要钱的,安全级别越高价格越贵)。颁发证书的同时会产生一个私钥和公钥。私钥由服务端自己保存,不可泄漏。公钥则是附带在证书的信息中,可以公开的。证书本身也附带一个证书电子签名,这个签名用来验证证书的完整性和真实性,可以防止证书被篡改。

3.服务器响应客户端请求,将证书传递给客户端,证书包含公钥和大量其他信息,比如证书颁发机构信息,公司信息和证书有效期等。Chrome 浏览器点击地址栏的锁标志再点击证书就可以看到证书详细信息。

4.客户端解析证书并对其进行验证。如果证书不是可信机构颁布,或者证书中的域名与实际域名不一致,或者证书已经过期,就会向访问者显示一个警告,由其选择是否还要继续通信。如果证书没有问题,客户端就会从服务器证书中取出服务器的公钥A。然后客户端还会生成一个随机码 KEY,并使用公钥A将其加密。

5.客户端把加密后的随机码 KEY 发送给服务器,作为后面对称加密的密钥。

6.服务器在收到随机码 KEY 之后会使用私钥B将其解密。经过以上这些步骤,客户端和服务器终于建立了安全连接,完美解决了对称加密的密钥泄露问题,接下来就可以用对称加密愉快地进行通信了。

7.服务器使用密钥 (随机码 KEY)对数据进行对称加密并发送给客户端,客户端使用相同的密钥 (随机码 KEY)解密数据。

8.双方使用对称加密愉快地传输所有数据。

HTTPS和HTTP的区别

  • 安全性,HTTP 明文传输,不对数据进行加密安全性较差。HTTPS (HTTP + SSL / TLS)的数据传输过程是加密的,安全性较好。
  • 使用 HTTPS 协议需要申请 CA 证书,一般免费证书较少,因而需要一定费用。证书颁发机构如:Symantec、Comodo、DigiCert 和 GlobalSign 等。
  • HTTP 页面响应速度比 HTTPS 快,这个很好理解,由于加了一层安全层,建立连接的过程更复杂,也要交换更多的数据,难免影响速度。
  • 由于 HTTPS 是建构在 SSL / TLS 之上的 HTTP 协议,所以,要比 HTTP 更耗费服务器资源。
  • HTTPS 和 HTTP 使用的是完全不同的连接方式,用的端口也不一样,前者是 443,后者是 80。

HTTPS缺点

  • 在相同网络环境中,HTTPS 相比 HTTP 无论是响应时间还是耗电量都有大幅度上升。
  • HTTPS 的安全是有范围的,在黑客攻击、服务器劫持等情况下几乎起不到作用。
  • 在现有的证书机制下,中间人攻击依然有可能发生。
  • HTTPS 需要更多的服务器资源,也会导致成本的升高

fetch和ajax的区别

  • fetch

    • window的一个方法

    • fetch是基于promise实现的,也可以结合async/await

    • fetch请求默认是不带cookie的,需要设置fetch(URL,{credentials:’include’})。

    • 所有版本的 IE 均不支持原生 Fetch

    • fetch()返回的promise将不会拒绝http的错误状态, 服务器端返回状态码 400 500的时候 不会reject

  • ajax

    • 是XMLHTTPRequest的一个实例;

    • 只有当状态为200或者304时才会请求成功

缓存

  • 加快页面打开速度
  • 减少网络带宽消耗
  • 降低服务器压力

缓存控制

  • Pragma(http1.0)

    Pragma: no-cache 与 Cache-Control: no-cache 效果一致。强制要求缓存服务器在返回缓存的版本之前将请求提交到源头服务器进行验证(协商缓存验证)。

  • Cache-Control(http1.1)

    请求头使用 Cache-Control:

    响应头使用 Cache-Control:

**Pragma -> Cache-Control -> Expires

浏览器缓存策略

当我们第一次请求服务器的时候,服务器便会返回资源并决定是否缓存以及缓存规则。下次在请求的时候,则会直接先去询问浏览器时候有可用缓存。若没有,则去请求服务器,并再将请求结果和缓存标识放入到浏览器缓存中

  • 强制缓存

    判断是否缓存的依据来自于是否超出某个时间或者某个时间段

    • cache-control(http1.1)

      响应头:Cache-Control:max-age=seconds

    • Expires(http1.0)

      响应头:expires: Thu, 03 Jan 2019 11:43:04 GMT

      Expires 的一个缺点就是,返回的到期时间是服务器端的时间,这样存在一个问题,如果客户端的时间与服务器的时间相差很大(比如时钟不同步,或者跨时区),那么误差就很大

    ** Cache-Control 与 Expires 可以在服务端配置同时启用,同时启用的时候 Cache-Control 优先级高

  • 协商缓存

    • last-modified 和 if-modified-since(http1.0)

      浏览器在发送请求的时候服务器会检查请求头request header里面的If-modified-Since,如果最后修改时间相同则返回304,否则给返回头(response header)添加last-Modified并且返回数据(response body)

      响应头: last-modified:Wed, 22 May 2019 03:53:42 GMT

      请求头: if-modified-since:Wed, 22 May 2019 03:53:42 GMT

    • ETag 和 If-None-Match(http1.1)

      浏览器在发送请求的时候服务器会检查请求头(request header)里面的if-none-match的值与当前文件的内容通过hash算法(例如 nodejs: cryto.createHash('sha1'))生成的内容摘要字符对比,相同则直接返回304,否则给返回头(response header)添加etag属性为当前的内容摘要字符,并且返回内容。

      响应头: Etag: w/哈希值(唯一标识)

      请求头: If-None-Match: w/哈希值(唯一标识)

      ETag对比Last-Modified的优势:

      • 某些服务器不能精确得到文件的最后修改时间, 这样就无法通过最后修改时间来判断文件是否更新了。

      • 某些文件的修改非常频繁,在秒以下的时间内进行修改. Last-Modified只能精确到秒。

      • 一些文件的最后修改时间改变了,但是内容并未改变。 我们不希望客户端认为这个文件修改了

      **Etag 要优于 Last-Modified

浏览器缓存位置

  • Service Worker

  • Memory Cache

  • Disk Cache

  • Push Cache

    浏览器的缓存机制

  • 浏览器会把哪些文件丢进内存中?哪些丢进硬盘中?

    • 对于大文件来说,大概率是不存储在内存中的,反之优先
    • 当前系统内存使用率高的话,文件优先存储进硬盘

200 from cache vs 304 Not Modified

200 from cache: 强制缓存

304 Not Modified: 协商缓存

浏览器缓存刷新

F5与CTR+F5区别

  • F5/ctr + R正常加载

    读取缓存数据

  • ctr + F5 / ctr + shift + R

    客户端不接受本地缓存的资源,需要到源服务器进行资源请求

  • 清空缓存并硬性重新加载

    清除缓存,重新加载

  • 控制台里面选中了disable cahce则无论如何都会请求最新内容(304协商缓存、强缓存都无效),不会去判断是否有缓存。

CDN 缓存

  • CDN 是什么

    Content Delivery Network,即内容分发网络, 各地部署多套静态存储服务,本质上是空间换时间,自动选择最近的节点内容,不存在再请求原始服务器。

  • CDN 工作原理:

    • 传统访问:用户在浏览器输入域名发送请求-解析域名获取服务器 IP 地址-根据 IP 地址找到对应的服务器-服务器响应并返回数据
    • 使用 CDN 访问:用户发送请求-智能 DNS 的解析(根据 IP 判断地理位置、接入网类型、选择路由最短和负载最轻的服务器)-取得缓存服务器 IP-把内容返回给用户(如果缓存中有)-向源站发起请求-将结果返回给用户-将结果存入缓存服务器
  • CDN 缓存是什么

    当客户端向 CDN 节点请求数据时,CDN 节点会判断缓存数据是否过期,若缓存数据并没有过期,则直接将缓存数据返回给客户端;否则,CDN 节点就会向源站发出回源请求,从源站拉取最新数据,更新本地缓存,并将最新数据返回给客户端。

  • CDN 缓存策略

    • CDN 边缘节点缓存策略因服务商不同而不同,但一般都会遵循 http 标准协议,通过 http 响应头中的 Cache-control: max-age 的字段来设置 CDN 边缘节点数据缓存时间。
    • CDN 服务商一般会提供基于文件后缀、目录多个维度来指定 CDN 缓存时间,为用户提供更精细化的缓存管理
    • CDN 缓存时间会对“回源率”产生直接的影响。若 CDN 缓存时间较短,CDN 边缘节点上的数据会经常失效,导致频繁回源,增加了源站的负载,同时也增大的访问延时;若 CDN 缓存时间太长,会带来数据更新时间慢的问题。开发者需要增对特定的业务,来做特定的数据缓存时间管理
  • CDN 的优势

    • CDN 节点解决了跨运营商和跨地域访问的问题,访问延时大大降低
    • 大部分请求在 CDN 边缘节点完成,CDN 起到了分流作用,减轻了源站的负载
  • CDN 缓存的缺点

    当网站更新时,如果 CDN 节点上数据没有及时更新,即便用户再浏览器使用 Ctrl +F5 的方式使浏览器端的缓存失效,也会因为 CDN 边缘节点没有同步最新数据而导致用户访问异常

  • 适用场景

    • 站点或者应用中大量静态资源的加速分发,例如:CSS,JS,图片和 HTML
    • 大文件下载
    • 直播网站等
  • CDN 的实现

    • BAT、阿里云、腾讯云等都有提供 CDN 服务
    • 可用 LVS 做 4 层负载均衡
    • 可用 Nginx,Varnish,Squid,Apache TrafficServer 做 7 层负载均衡和 cache
    • 适用 squid 反向代理,或者 Nginx 等的反向代理

    ** http 缓存是浏览器端缓存,cdn 是服务器端缓存

css

CSS 盒子模型

CSS盒模型本质上是一个盒子,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个

  • W3C盒子模型(标准盒模型)

    盒子总宽度/高度 = width/height + padding + border + margin

  • IE盒子模型

    盒子总宽度/高度= width/height + margin = 内容区宽度/高度 + padding + border + margin

CSS 预处理器

  • 什么是 CSS 预处理器

    用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

    通俗的说,CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,再通过编译器转化为正常的 CSS 文件,以供项目使用。

  • 为什么要使用 CSS 预处理器

    • css 缺点 语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护
    • CSS 预处理器,提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。大大提高了我们的开发效率。
  • Less 和 Sass 在语法上有些共性,比如下面这些:

      1、混入(Mixins)——class中的class;
      2、参数混入——可以传递参数的class,就像函数一样;
      3、嵌套规则——Class中嵌套class,从而减少重复的代码;
      4、运算——CSS中用上数学;
      5、颜色功能——可以编辑颜色;
      6、名字空间(namespace)——分组样式,从而可以被调用;
      7、作用域——局部修改样式;
      8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值
    

Webpack

webpack的打包流程

  • 读取webpack的配置参数;
  • 启动webpack,创建Compiler对象并开始解析项目;
  • 从入口文件(entry)开始解析,并且找到其导入的依赖模块,递归遍历分析,形成依赖关系树;
  • 对不同文件类型的依赖模块文件使用对应的Loader进行编译,最终转为Javascript文件;
  • 整个过程中webpack会通过发布订阅模式,向外抛出一些hooks,而webpack的插件即可通过监听这些关键的事件节点,执行插件任务进而达到干预输出结果的目的

hash、chunkhash、contenthash 区别

  • hash

    因为这是工程级别的,每次修改任何一个文件,所有文件名的 hash 至都将改变。所以一旦修改了任何一个文件,整个项目的文件缓存都将失效

  • chunkhash

    据不同的入口文件(Entry)进行依赖文件解析、构建对应的 chunk,生成对应的哈希值。在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用 chunkhash 的方式生成哈希值,那么只要我们不改动公共库的代码,就可以保证其哈希值不会受影响。

    但是这样又有一个问题,因为我们是将样式作为模块 import 到 JavaScript 文件中的,所以它们的 chunkhash 是一致的,只要对应 css 或则 js 改变,与其关联的文件 hash 值也会改变,但其内容并没有改变呢,所以没有达到缓存意义

  • contenthash

    针对文件内容级别的,只有你自己模块的内容变了,那么 hash 值才改变

常用的 Loader

  • style-loader css-loader less-loader: css 样式编译 less 转 css 转行内
  • file-loader:将文件在进行一些处理后(主要是处理文件名和路径、解析文件 url),并将文件移动到输出的目录中
  • url-loader:一般与 file-loader 搭配使用,如果文件小于限制的大小。则会返回 base64 编码,否则使用 file-loader 将文件移动到输出的目录中
  • babel-loader:将 ES6/7/8 语法转换为 ES5 语法,但是对新 api 并不会转换(promise、Generator、Set、Maps、Proxy 等),需要借助 babel-polyfill 来帮助我们转换
  • vue-loader:用于解析.vue 文件
  • vue-template-compiler:用于编译模板
  • vue-style-loader:解析 vue 文件的样式

常用的 plugins

  • CleanWebpackPlugin: 打包输出前清空文件夹
  • html-webpack-plugin: webpack 打包出来的 js 文件我们需要引入到 html
  • mini-css-extract-plugin: 将所有的 css 样式合并为一个 css 文件
  • extract-text-webpack-plugin: 将一个 css 文件拆分为一一对应的多个 css 文件
  • Webpack.HotModuleReplacementPlugin:webpack 的热更新

webpack 优化

  • 优化打包速度

    构建速度指的是我们每次修改代码后热更新的速度以及发布前打包文件的速度

    1. 合理的配置mode参数与devtool参数

      mode 的设置,production 模式下会进行 tree shaking(去除无用代码)和 uglifyjs(代码压缩混淆) devtool的设置:合理使用source-map

    2. 缩小文件的搜索范围

      alias:设置别名,减少搜索范围

      include/exclude 可以减少 webpack loader 的搜索转换时间

      noParse: 不必解析的库

      extensions: webpack 会根据 extensions 定义的后缀查找文件

    1. 使用 HappyPack 开启多进程 Loader 转换

    2. 抽离第三方模块

      使用dll将很少会变更的第三方库,只进行一次打包,不升级第三方包的时候,那么webpack就不会对这些库去打包

      webpack内置的DllPlugin DllReferencePlugin

    3. 配置缓存(开启babel缓存)

      babel-loader 设置cacheDirectory 来开启缓存,开启后,将 loader 的编译结果写入硬盘缓存。再次构建会先比较一下,如果文件较之前的没有发生变化则会直接使用缓存

  • 优化打包文件体积

    1. externals:

      将一些不需要打包的静态资源从构建逻辑中剔除出去,而使用 CDN 的方式

    2. Tree-shaking

      设置mode为production的时候已经自动开启了tree-shaking。但是要想使其生效,生成的代码必须是ES6模块。

  • 开发环境

    • 构建速度

      HRM热更新

    • 代码优化调试性能

      source-map

  • 生产环境

    • 构建速度

      dll: 使用webpack内置的DllPlugin DllReferencePlugin处理, dll将很少会变更的第三方库,只进行一次打包,不升级第三方包的时候,那么webpack就不会对这些库去打包

      babel缓存 babel-loader 设置cacheDirectory 来开启缓存,将 loader 的编译结果写入硬盘缓存。再次构建会先比较一下,如果文件较之前的没有发生变化则会直接使用缓存

    • 运行性能

      代码分割code spilt: 一个包过大,加载需要太长时间,为了防止弄出来一个大包,代码分割可以帮助实现懒加载,而不必全部加载。这样动态加载能提高应用性能表现

       optimization配置:
       splitChunks:将node_module的文件单独打包成一个文件vendor
       runtimeChunk:将当前模块记录其他模块的hash单独打包一个文件运行(import('./a.js')会单独打包)
      

Vue

vue

v-model 语法糖

vue-router

history 模式和 hash 模式区别

  • hash 模式

    • url 中带#号,hash 虽然出现在 URL 中,修改 hash 不会向服务器发送 http 请求,因此改变 hash 不会重新加载页面。
    • hash 的值为 location.hash,window 是可以监听到哈希值的变化的(onhashchage 事件),当 url 中的哈希值发生了变化,无需发起 http 请求,window 也可以监听到这种变化,并按需加载前端的代码块。

    • hash 模式下,仅 hash 符号之前的内容会被包含在请求中,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误

    • 兼容性好,所有浏览器都支持

  • history 模式

    • url 中不带#号,传统的路由分发模式。用户手动输入 URL 后回车,或者刷新(重启)浏览器的时候,是由服务器在接受用户的这个输入请求,并由服务器解析 url 的路径然后做相应逻辑处理。如果后台没有正确的配置,当用户在浏览器直接访问路由地址,就会返回 404。所以要将不存在的路径请求重定向到入口文件(index.html 页面)。

    • 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法用来完成 URL 跳转而无须重新加载页面。(需要特定浏览器支持)这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会向后端发送请求。

    • 兼容指定浏览器(HTML5)

1573467857

2021/08/25  阅读:37  主题:橙心

作者介绍

1573467857