20230613----重返学习-HTTP网络-毕设总结

day-091-ninety-one-20230613-HTTP网络-毕设总结

HTTP网络

个人网站步骤

1. 买服务器 公网IP:124.23.16.8
2. 基于FTP把写好的代码上传到服务器上。
3. 部署项目-指定端口号
   • 个人博客：80
   • 毕设项目：443
   • 计划管理：81
   1. 此时客户端-浏览器可以基于：http://124.23.16.8:80/index.html 访问到我们的代码。
      1. URL地址解析。
         • 确认该URL是否是一个合法的地址。
      2. 缓存检查。
         • 查看浏览器是否有该URL的资源的缓存。
      3. DNS解析。
         • 到DNS服务器上，找到外网IP。
      4. TCP的三次握手。
         • 浏览器与外网IP对应的服务器产生联系。
      5. 客户端和服务器之间的数据通信。服务器把资源给到浏览器。
      6. TCP四次挥手。
         • 把浏览器和服务器之间的连接通道断开。
      7. 客户端处理并渲染服务器返回的信息。
      • 可以看《图解HTT》这本电子书。
4. 就可以基于IP地址查看到页面了。

步骤

• 第一步：URL地址解析。

  • http://www.xxx.com:80/index.html?lx=1&from=weixin#video
  • URI/URL/URN
    • URI: 统一资源标识符。
      • URL与URN的统称。
        • 平时我们看到的URI，其实集散控制系统的就是URL。
    • URL：统一资源定位符。
      • 网址。
    • URN：统一资源名称。
      • 如图书编号。
  • 解析信息：
    • 传输协议：
      • 作用：负责客户端和服务器端之间信息的传输（可以理解为快递小哥）。
      • 分类：
        • http：即HyperText Transfer Protocol，超文本传输协议。
          • 除传输文本内容外，还可传输图片和音视频等。
        • https：即Hypertext Transfer Protocol Secure，HTTP+SSL，更安全的传输协议，经过加密处理。
        • ftp：即File Transfer Protocol，文件传输协议，主要用于往服务器上上传内容和下载内容。
    • 域名：
    • 端口号
      • 作用：区分相同服务器上部署的不同项目的，取值范围0~65535之间。
        • 浏览器有默认端口号机制：我们在地址栏中输入URL地址，如果没有写端口号，则浏览器会根据当前的传输协议，自动把端口号加上！
        • http -> 80
        • https -> 443
        • ftp -> 21
    • 请求资源的路径名称。
    • 问号传参信息
    • 哈希值
      • Hash值。

• 第二步：缓存检查

  • 通过一个url网址，首先得到的是一个html。渲染过程中，遇到link标签向服务器发送拿到css代码，遇到script标签向服务器发送拿到js代码，遇到img标签向服务器发送拿到图片文件。
    • 如果浏览器上有对应的路径文件的缓存，就直接拿，而不发送请求到服务器去拿。
  • 针对静态资源文件：强缓存和协商缓存。
    1. 例如：html、css、js、图片、音频、视频…
    • 缓存存储的位置：
      • 虚拟内存（Memory Cache）：存储全局变量、
        1. 如内存条、显卡内存、CPU内存。
      • 物理内存（Disk Cache）：
        1. 硬盘：固态硬盘与机械硬盘。
      • 一般情况下，物理内存与虚拟内存都存一份。
    • 浏览器读取缓存的思路：
      • 正常刷新页面：先从虚拟内存中获取，如果不存在，再去物理内存中查找。
      • 关闭页面重新打开：直接去物理内存中查找。
      • 强制刷新页面（ctrl+F5）：直接去服务器获取最新的。
    • 读取缓存的速度：
      • 虚拟内存中读取：速度一般在0ms。
      • 物理内存中读取：速度较快，一般在10ms以外。
      • 服务器中读取：速度最慢，在20ms-1000ms左右。
    • 不论是强缓存还是协商缓存，都是由服务器进行设置，浏览器自动配合完成相应的缓存机制！
      • 强缓存：
        1. 第一次访问网站，本地没有任何的缓存，需要向服务器发送请求；
           • 服务器在返回相应资源信息的时候，如果想开启强缓存机制。
             • 会在响应头中设置相关的字段：
               • Expires: 存储缓存过期的具体时间。
                 • 这个是http/1.0版本的协议。
               • Cache-Control: 存储过多久缓存将过期（单位：秒）或者其它信息。
                 • 这个是http/1.1版本的协议。
             • 后台一般这两个字段都返回。至少要设置一个，根据那个版本来做。如果两个都返回，浏览器两个都支持会以最新的Cache-Control来设置。
        2. 当浏览器获取到服务器返回的资源信息，除了正常的渲染以外，还会去看响应头中是否有强缓存标识，即Expires与Cache-Control字段。
           • 如果没有则啥都不处理。
           • 如果有，则把本次获取的资源信息和这两个响应头信息，缓存在客户端本地！
             • 在虚拟内存和物理内存中都存储一份。
        3. 第二次及以后访问这个网站，首先看本地是否有具备在效期的缓存信息。
           • 没有具备/缓存过期了：重新向服务器发送请求，来获取最新的资源。
           • 有：则直接渲染缓存中的信息，无需再向服务器发送请求了。
        • 强缓存的几个特点：
          1. 可以不和服务器通信，直接就能拿到资源文件了。
          2. 导致可能和服务器失联，用的都是第一次缓存的文件。
             • 想拿到服务器上最新的资源文件：需要html不做强缓存，及用webpack打包文件时，给文件名加上根据内容所生成的hash值。
          • 不论从服务器还是缓存中获取，只要可以拿到，HTTP状态码都是200。
          • html页面千万不要做强缓存，以此来保证，即便本地有生效的缓存，但是只要服务器资源更新了，也要从服务器实时获取最新的资源进行渲染！
            1. html文件不做缓存，但js及css及图片等要做。
            • 我们平时开发的时候，需要基于webpack/vite等前端工具，对代码进行编译打包，把编译后的内容部署到服务器上！
              • 在webpack编译的时候，我们可以设置一个规则：根据文件的内容，让生成的文件名带唯一hash值。
                1. 例如：main.sae3fd9jk.js。
                2. 在输入文件名称中加一个[name].[hash:8].js。
                • 这样只要代码修改了，每次打包都会创建不同的文件出来，而html页面中导入的也是最新的文件！
              • 这样只要html不做强缓存，就可以保证，服务器资源一旦更新，我们获取的是最新资源，而不是本地缓存！
      • 协商缓存：
        1. 该做通信还是要做的，只不过可能要返回的数据变少了。
        2. 不用做处理，都能保证浏览器渲染的资源是服务器上最新的。
        • 协商缓存是强缓存的一种补充。
          • 如果强缓存还在有效期，即便服务器设置了协商缓存，那么协商缓存的机制也不会触发。
          • 只有没有设置强缓存或者强缓存失效了，设置的协商缓存机制才会生效！
        • 步骤：
          1. 第一次访问网站，本地啥缓存都没有，需要从服务器获取。
             • 如果服务器想对当前的资源设置协商缓存，则在响应头中返回或设置相关的字段：
               • Last-Modified：存储该资源在服务器最后一次修改的时间，HTTP/1.0。
               • ETag：存储该资源在服务器中最后一次修改的标识（唯一的），HTTP/1.1。
          2. 浏览器获取资源信息的同时，观察响应头信息，如果具备这两个字段，则把资源和标识都缓存在本地！
          3. 第二次访问网站，不论本地缓存是否生效。
             • 前提是：强缓存肯定是没有或者失效了！
             1. 都需要重新向服务器发送请求。并且在请求头中携带两个字段：
                • If-Modified-Since：存储的值是Last-Modified的值。
                • If-None-Match：存储的值是ETag的值。
             2. 服务器接收传递的信息及标识，用If-Modified-Since/If-None-Match和当前服务器上最新的资源进行对比。
                • 对比后是一样的：说明服务器上的这个资源没有更改过，则服务器直接返回304-即Not-Modified，浏览器接收到这个状态码，则从本地缓存中获取资源信息进行渲染。
                • 对比后是不一样的：说明服务器上的这个资源更改过，此时服务器返回状态码200、最新的资源信息、最新的Last-Modified/ETag值！
                  • 浏览器获取最新的信息后，除了渲染，再把最新的信息和标识缓存在本地！
      • 建议：html不设置强缓存，只设置协商缓存。其它资源如js、css、图片等都设置强缓存及协商缓存。
  • 针对ajax数据：本地存储。
    • 基于ajax/fetch从服务器获取的数据，不能设置强缓存和协商缓存，如果需要对不经常更新的数据进行缓存，需要开发者基于本地存储进行处理！
      • 最好的数据缓存方案是：vuex/redux;
        • 既可以避免频繁向服务器发送请求，也可以保证在用户刷新后，可以及时从服务器获取到最新的信息。
      • 但是对于一些不经常更新的数据，基于localStorage来存储-即自己设定时效性，也是不错的选择！

        • 实现具备有效期的localStorage存储方案:

          /* 
          //实现具备有效期的localStorage存储方案;
          - localStorage.setItem()/localStorage.getItem()/localStorage.removeItem();
          - 设置的值，都只能是字符串格式的;
          */
          
          const storage = {
            // 存储信息的时候，记录一下存储的时间。
            /**
             * @param {string} key
            * @param {any} value
            */
            set(key, value) {
              let obj = {
                time: +new Date(), //存储时，当前日期的时间戳。
                value: value,
              };
              localStorage.setItem(key, JSON.stringify(obj));
            },
            // 获取存储信息的时候，判断一下时效性。
            /**
             * @param {string} key
            */
            get(key, expires = 30 * 24 * 60 * 60 * 1000) {
              let obj = localStorage.getItem(key);
              if (!obj) {
                return null; //传递的key压根不存在。
              }
              let { time, value } = JSON.parse(obj);
              if (+new Date() - time > expires) {
                // 存储的信息已经地了指定的时效:移除存储的信息、返回null。
                storage.remove(key);
                return null;
              }
              return value;
            },
            // 移除指定信息。
            /**
             * @param {string} key
            */
            remove(key) {
              localStorage.removeItem(key);
            },
          };
          

        • 无缓存方案：

          //无缓存方案：
          const query = async function query() {
            try {
              let result = await axios.get("/api/list", {
                params: {
                  lx: "my",
                },
              });
              console.log(`result-->`, result);
              
            } catch (error) {
              console.log(`error-->`, error);
            }
          };
          query()
          

        • 有缓存方案-本地存储：

          /* 
          //实现具备有效期的localStorage存储方案;
          - localStorage.setItem()/localStorage.getItem()/localStorage.removeItem();
          - 设置的值，都只能是字符串格式的;
          */
          
          const storage = {
            // 存储信息的时候，记录一下存储的时间。
            /**
             * @param {string} key
            * @param {any} value
            */
            set(key, value) {
              let obj = {
                time: +new Date(), //存储时，当前日期的时间戳。
                value: value,
              };
              localStorage.setItem(key, JSON.stringify(obj));
            },
            // 获取存储信息的时候，判断一下时效性。
            /**
             * @param {string} key
            */
            get(key, expires = 30 * 24 * 60 * 60 * 1000) {
              let obj = localStorage.getItem(key);
              if (!obj) {
                return null; //传递的key压根不存在。
              }
              let { time, value } = JSON.parse(obj);
              if (+new Date() - time > expires) {
                // 存储的信息已经地了指定的时效:移除存储的信息、返回null。
                storage.remove(key);
                return null;
              }
              return value;
            },
            // 移除指定信息。
            /**
             * @param {string} key
            */
            remove(key) {
              localStorage.removeItem(key);
            },
          };
          
          //有缓存方案-本地存储：
          const query = async function query() {
            let result = storage.get("CACHE", 7 * 24 * 60 * 60 * 1000);
            if (result) {
              //本地是具备有效缓存的，则停止向服务器发送请求。
              console.log(`result-->`, result);
              return;
            }
          
            // 数据没有缓存过：则向服务器发送请求。
            try {
              let result = await axios.get("/api/list", {
                params: {
                  lx: "my",
                },
              });
              console.log(`result-->`, result);
              // 请求成功就：把请求的结果存储到本地。
              storage.set("CACHE", result);
            } catch (error) {
              console.log(`error-->`, error);
            }
          };
          query();
          

• 第三步：DNS解析

  • 所谓DNS解析，就是去DNS服务器上，基于域名获取服务器的外网IP地址-即主机地址。
  • DNS解析也是有缓存机制的：
    • 比如谷歌浏览器记录DNS解析的缓存时间，大概是1分钟左右。
    • dns缓存刷新时间是多久?dns本地缓存时间介绍
  • DNS解析步骤：
    1. 基于递归查询在本地缓存中查找DNS解析记录。
       • 这个是找缓存的方式的。
       1. 浏览器的DNS解析缓存。
       2. 本地Host文件。
          • 关于修改host文件：
            1. 假设个人在本地host中加一条记录：www.qq.com 127.0.0.1
            2. 导致：以后只要在这台电脑上访问www.qq.com，都相当于在访问127.0.0.1。
            3. 我在本地启动一个项目 ，假设http://127.0.0.1:80/index.html为我开发的页面。
            4. 后期我基于http://www.qq.com访问的也是本地的这个项目。
            • 很久之前，也是基于这个方式来解决跨域问题的。
              • 开发环境上才用的，部署到同源环境下。
       3. 本地DNS解析器缓存。
       4. 本地DNS服务器。
    2. 基于迭代查询到DNS服务器上查找DNS解析记录。
       1. 根域名服务器。
       2. 顶级域名服务器。
       3. 权威域名服务器。
       • 每一次DNS解析的时间，大概在20~120毫秒左右。
  • 单纯这样看，减少DNS的解析次数，会提高页面的加载速度！
    • 想要减少DNS的解析次数，需要把所有的资源部署在相同服务器的相同服务下！
      • 比如html与js与css与图片等，都放在同一台服务器的同一个服务下。
      • 这样一台服务器可以访问一个页面，就要十多个请求进该服务器了。
        • 在线人数一多，该服务器的压力就比较大。服务器就可能有并发压力，比如一台服务器只能同时处理2000多个请求。
        • 所以在真实的项目中，我们往往要把不同的资源部署到不同的服务器上。
          • 例如：
            • 静态资源服务器。
            • 图片和音视频服务器。
            • 数据请求服务器。
            • …
          • 这样会导致网站中出现多个域名请求，也就是需要多个DNS解析！
          • 这样做的好处：
            • 资源的合理利用。
              • 比如：
                • 图片处理服务器：比较大，需要内存大的服务器。网络需要带宽大。
                • 数据处理服务器：要处理的压力比较大，CPU要好。
            • 降低单一服务器的压力，提高并发上限。
            • …
  • 在DNS解析次数增加的情况下，我们可以基于dns-prefetch即DNS预解析，来提高网站的加载速度！

    • 如：

      ```html
      
      ```
      
      ```html
      
      ```
      

      1. 浏览器解析时，看到link标签，会分配一个线程去解析该link标签。拿到DNS地址。
         • 当渲染到img及script标签遇到那些域名时，就会使用之前所解析好的DNS地址去到指定IP地址去拿具体资源。

    • …

    • DNS预解析的原理：

      • 就是利用浏览器的多线程机制，在GUI渲染的同时，开辟新的线程去解析域名。
        • 解析的结果会缓存在浏览器中。
      • 这样当GUI渲染到一定的阶段，遇到新的资源请求的时候，可能域名已经解析过它了，直接用缓存中存储的外网IP，去服务器发送请求即可，不用再去DNS服务器中找到IP地址去解析了！

本地存储方案

• 本地存储方案
  1. cookie
     • 本地存储：有期限的限制，可以自己设置过期期限。在期限内，不论页面刷新还是关闭，存储的信息都还会存在。
  2. localStorage
     • 本地持久化存储：页面刷新或者关闭，存储的信息一直存在，除非手动清除或者卸载浏览器，而且没有有效期的限制。
  3. sessionStorage
     • 本地会话存储，传话结束-即浏览器页面关闭，存储的信息会自动清除。
     • 但是刷新页面，会话不算结束，基于sessionStorage存储的信息还是会存在的。
       • 比如网页小游戏，游戏窗口没关，都先在本地存。窗口关闭，就把数据存到服务器上。新打开窗口，从服务器拿到数据，再存在会话中。
  4. IndexedDB/WebSQL
     • 本地数据库存储：利用浏览器自带的数据库，基本上都是非关联型数据库。
     • 相对于其它的本地存储方案，其可以存储更多的数据。
  5. 虚拟内存存储
     • 特点：页面刷新或者关闭，存储的信息都会清除掉。
     • 类型
       • 全局变量
       • vuex
       • redux
       • …
  6. …
  • 无论那一种本地存储方案，都受到浏览器和源的限制！
    • 源：就是域名。
    • 浏览器就是谷歌浏览器与IE浏览器这类的区别。
  • 不论那一种本地存储方案，都是以明文形式进行存储的！
    • 尽可能不存储需要安全限定的数据，即便要存储，一定要记得加密处理。
  • cookie与localStorage区别：
    • 时效性：cookie可以设置过期时间，而localStorage是持久化存储。
      • 用于灵活控制时效性。
      • 真实项目中，我们需要自己实现一套具备有效期的localStorage存储方案。
    • 存储大小：
      • 同源下，cookie最多只允许存储4kb内容。
      • 而localStorage允许最多存储5MB。
    • 稳定性：
      • cookie是不稳定的。
        • 超过大小，有些浏览器是存不进去新的。有些是清除一些旧的cookie的。
        • 基于清除历史记录、安全卫士清扫垃圾等操作，都可能会把存储的cookie给干掉。
          • 但这些操作对localStorage无效！
      • localStorage是比较稳定的。
      • 限制规则：某些浏览器具备隐私模式/无痕浏览模式，在这种模式下，cookie存储的信息不会被保留，但是localStorage在新版本浏览器中也会受到影响。
      • 和服务器端的关系：cookie和服务器之间是有猫腻的，而localStorage和服务器端没有直接的关系。
        • 基于cookie存储的信息：
          • 服务器返回给客户端信息的时候，如果有响应头中携带了Set-Cookie字段，则客户端浏览器，会自动在本地设置一个cookie，把Set-Cookie字段中的信息进行存储！
          • 客户端本地只要存储了cookie，不论服务器是否需要，每一次向服务器发请求的时候，浏览器都会自动在请求头中，基于Cookies字段，把本地存储的cookie信息，都传递给服务器！
          • 但是以上的处理，仅限同源访问！
            • 因为在浏览器的非同源策略中，默认是禁止Cookie的传输的！
              • 但是可以在axaj请求中设置一个请求头，让Cookie可以携带给非同源浏览器。
        • 基于localStorage存储的信息，除非手动发送给服务器，否则和服务器没有半毛钱关系！
          • 可以手动从本地存储中取出来，在ajax中附带发送给服务器。
          • 也可以在处理ajax请求函数中，把服务器发送的数据存储到本地存储中。
      • cookie可以兼容到IE5，但是localStorage是H5新增的，只能兼容到IE9及以上浏览器！

实现具备有效期的localStorage存储方案

• 实现具备有效期的localStorage存储方案:

  /* 
  //实现具备有效期的localStorage存储方案;
  - localStorage.setItem()/localStorage.getItem()/localStorage.removeItem();
  - 设置的值，都只能是字符串格式的;
  */
  
  const storage = {
    // 存储信息的时候，记录一下存储的时间。
    /**
     * @param {string} key
    * @param {any} value
    */
    set(key, value) {
      let obj = {
        time: +new Date(), //存储时，当前日期的时间戳。
        value: value,
      };
      localStorage.setItem(key, JSON.stringify(obj));
    },
    // 获取存储信息的时候，判断一下时效性。
    /**
     * @param {string} key
    */
    get(key, expires = 30 * 24 * 60 * 60 * 1000) {
      let obj = localStorage.getItem(key);
      if (!obj) {
        return null; //传递的key压根不存在。
      }
      let { time, value } = JSON.parse(obj);
      if (+new Date() - time > expires) {
        // 存储的信息已经地了指定的时效:移除存储的信息、返回null。
        storage.remove(key);
        return null;
      }
      return value;
    },
    // 移除指定信息。
    /**
     * @param {string} key
    */
    remove(key) {
      localStorage.removeItem(key);
    },
  };
  

前端性能优化方案

• 前端性能优化方案：

  1. 减少 HTTP 请求：合并和压缩文件、使用雪碧图或字体图标减少图片请求、使用 CSS 和 JavaScript 文件的最小化版本等。
  2. 使用缓存：使用浏览器缓存和服务器缓存来减少对服务器的请求，减少重复加载资源的次数。
  3. 延迟加载：对于大型的或不是首要显示的内容，延迟加载可以提高初始页面加载速度，例如图片懒加载、按需加载等。
  4. 压缩资源：压缩 HTML、CSS、JavaScript 和图片等资源，减小文件大小，提高加载速度。
  5. 使用 CDN 加速：使用内容分发网络（CDN）来加速静态资源的传输，将资源分发到离用户更近的服务器上。
  6. 预加载和预渲染：通过预加载相关资源或预渲染页面来提前获取所需内容，减少用户操作时的延迟。
  7. 使用响应式设计：通过响应式布局和媒体查询，使网页能够适应不同屏幕大小的设备，提供更好的用户体验。
  8. 优化图片：使用适当的图片格式、压缩图片大小、使用懒加载或按需加载等技术来优化图片加载。
  9. 优化 JavaScript 执行：避免长时间执行的 JavaScript 代码，使用节流和防抖等技术控制事件频率，减少不必要的计算和操作。
  10. 使用异步加载：使用异步加载 JavaScript 和 CSS 文件，避免阻塞页面渲染。
  11. 优化渲染性能：减少重排和重绘，使用 CSS 动画代替 JavaScript 动画，使用虚拟列表或分页加载等技术优化大量数据的展示。
  12. 优化字体加载：使用字体子集、使用适当的字体格式，避免在页面加载时阻塞渲染。
  13. 监控和优化网页性能：使用性能监控工具分析网页加载过程中的性能瓶颈，进行针对性的优化。

• 按步骤来做：

  1. URL地址解析。
     1. 要请求地址写好，最好先预编码好。
        • 方便浏览器减少地址的解析时间。（感觉没能提高多少速度）。
     2. 减少HTTP请求-使用雪碧图或字体图标减少图片请求。
        • 而不是一个文字编码或一个小图，都要请求一次。
     3. 减少HTTP请求-合并文件，比如把几个css文件合并成一个css文件。把多个js文件合并成一个。
        • 这个是借由weback及模块引入来完成的。
     4. 减少HTTP请求-优化字体加载：使用字体子集、使用适当的字体格式，避免在页面加载时阻塞渲染。
        • 字体文件一般都有点大，以M为单位，最好少使用一点。或者直接使用系统字体。
        • 字体子集化：只加载页面中使用到的字体字符，可以减小字体文件大小，提高页面加载速度。
          • 把页面使用到的字体组合打包到一块，类似于pdf一样。直接把字体单个扣下来，而不是只用到了几个字就直接引入一个有多个字的字体文件。
     5. 减少HTTP请求-按需加载资源：根据用户行为或页面需要，动态加载资源，可以减少页面加载时间和资源浪费。
  2. 缓存检查。
     1. 使用缓存-使用浏览器缓存和服务器缓存来减少对服务器的请求，减少重复加载资源的次数。
        • 如使用get类型加查询字符串或数据参数这类请求来请求如json这类静态文件。
        • 设置缓存策略：通过设置HTTP响应头中的Cache-Control和Expires字段，可以控制浏览器缓存的时间和方式。
          • 版本控制：通过在文件名中添加版本号或使用文件内容的哈希值作为版本号，可以避免浏览器缓存旧版本的文件。
     2. 使用公共的文件，如react.js这一类，那么如果上一个页面也使用同样的地址，浏览器根据地址的一样，直接命中缓存，就不必向后面请求了。
        • 缓存策略设置：根据页面特点和用户行为，设置合适的缓存策略，可以提高页面加载速度和用户体验。
        • 条件请求：使用条件请求技术，如ETag、Last-Modified等，可以减少HTTP请求次数，提高页面加载速度。
  3. DNS解析。
     1. 使用CDN加速：使用内容分发网络（CDN）来加速静态资源的传输，将资源分发到离用户更近的服务器上。
        • 将静态资源（如图片、CSS、JavaScript文件）托管到CDN上，可以加速资源的加载速度，减轻服务器负担。
     2. 使用DNS预解析：通过在页面中添加DNS预解析标签，可以提前解析页面中需要的域名，减少DNS查询时间，提高页面加载速度。
  4. TCP的三次握手。
     • 浏览器与外网IP对应的服务器产生联系。
  5. 客户端和服务器之间的数据通信。服务器把资源给到浏览器。
     1. 压缩代码文件：使用CSS和JavaScript文件的最小化版本等，即使用.min.js这类文件。
        • 这个也是由webpack等自动完成，去除console.log()等打印信息，以及把长变量名变短这类。
          • 如UglifyJS、CSSNano等，可以减小文件大小，提高页面加载速度。
        • 优化JavaScript代码：使用优化工具，如Closure Compiler、Terser等，可以减小文件大小，提高页面加载速度。
     2. 压缩资源：压缩 HTML、CSS、JavaScript 和图片等资源，减小文件大小，提高加载速度。
        • 如使用gzip来处理html文件的传输。
     3. 优化图片：使用适当的图片格式、压缩图片大小、使用懒加载或按需加载等技术来优化图片加载。
        • 使用图片压缩工具，如TinyPNG、ImageOptim等，可以减小图片文件大小，提高页面加载速度。
        • 可以选择jpg代替png。
        • 这个也应该是webpack来做处理。
     4. 使用本地存储：使用浏览器的本地存储，可以减少HTTP请求次数，提高页面加载速度和用户体验。
     5. 使用服务器端缓存技术，如Memcached、Redis等，可以减少数据库查询次数，提高页面加载速度。
     6. 用https代替http，因为https一次可以请求多个。
  6. TCP四次挥手。
     • 把浏览器和服务器之间的连接通道断开。
  7. 客户端处理并渲染服务器返回的信息。
     1. 使用异步加载：使用异步加载JavaScript和CSS文件，避免阻塞页面渲染。
        • 减少首屏空白时间。虽然都是一开始就要加载，但一般是先优先加载好DOM及css。
        • 使用异步加载技术，如script标签的defer、async属性等，可以减少页面加载时间。
     2. 预加载和预渲染：通过预加载相关资源或预渲染页面来提前获取所需内容，减少用户操作时的延迟。
        • 比如下载好了表格的第一页数据，就先下载第二页的数据。
     3. 优化JavaScript执行：避免长时间执行的JavaScript代码，使用节流和防抖等技术控制事件频率，减少不必要的计算和操作。
     4. 优化渲染性能：减少重排和重绘，使用CSS动画代替JavaScript动画，使用虚拟列表或分页加载等技术优化大量数据的展示。
        • 使用CSS3动画：使用CSS3动画代替JavaScript动画，可以减少页面重排和重绘，提高页面性能。
        • 避免频繁的DOM操作：减少DOM操作的次数和频率，可以减少页面重排和重绘，提高页面性能。
     5. 图片懒加载，图片在浏览器页面中显示时才开始请求。
     6. 延迟加载：对于大型的或不是首要显示的内容，延迟加载可以提高初始页面加载速度。
        • 如vue组件懒加载、react组件懒加载。
        • 如点击进某个页面后，才需要使用某些字体或某个第三方插件如pdf.js。
     7. 使用响应式设计：通过响应式布局和媒体查询，使网页能够适应不同屏幕大小的设备，提供更好的用户体验。
        • 不用移动端的请求一次，PC端的也请求一次。
     8. 减少DOM操作：减少DOM操作的次数和频率，可以减少页面重排和重绘，提高页面性能。
     9. 移动优化：针对移动设备的特点和用户行为，进行页面和资源的优化，提高页面加载速度和用户体验。
        • 如不使用jQuery，而是使用jquery-mobile。
     10. 预渲染：使用预渲染技术，将页面预先生成为静态HTML文件，可以提高页面加载速度和SEO效果。
     11. 服务端渲染：使用服务端渲染技术，将页面在服务器端生成为HTML文件，可以提高页面加载速度和SEO效果。
     12. 预加载关键资源：提前加载页面中必要的资源，可以提高页面加载速度和用户体验。
     13. 使用异步加载：使用异步加载技术，如AJAX、Web Workers等，可以减少页面加载时间。
         • 而不是使用同步加载，在请求过程中，页面卡死。
     14. 选择轻量级框架：选择适合项目需求和页面特点的轻量级框架，可以提高页面加载速度和用户体验。
  • 页面整体流程中：
    1. 监控和优化网页性能：使用性能监控工具分析网页加载过程中的性能瓶颈，进行针对性的优化。
       • 性能调试工具：使用性能调试工具，如Chrome DevTools、Firebug等，可以分析页面的性能瓶颈和优化方案。
         • 即在浏览器控制台的网络面板中，可以看到网页文件的具体传输时间。
         • 在浏览器控制台的性能面板中，可以看到一个过程中，那个组件用的时间多。
       • 借助vue-devtools及react-devtools辅助插件，也可以看到一些组件的性能及渲染时间。
    2. 性能监控：使用性能监控工具，如Google Analytics、WebPagetest等，可以监控页面的加载速度和性能指标。
    3. 用户行为分析：使用用户行为分析工具，如Google Analytics、Mixpanel等，可以分析用户行为和需求，优化页面和资源。

同步与异步

• 同步与异步

  • 同步：同时只能干一件事。
  • 异步：同时可以干多件事。

• 进程和线程：一个进程中可能包含多个线程。

  • 进程类似于一个程序。
  • 线程类似于这个程序中干活的。

• 浏览器中：

  • 打开一个页面，相当于开辟一个进程。
  • 在页面中干活的是线程。

• 浏览器是多线程的！所以可以同时做多件事情！

  • GUI渲染线程：自上而下解析HTML/CSS，绘制页面的。
  • HTTP网络线程：向服务器发送请求，获取资源/数据的。
  • js引擎线程：渲染和解析js代码的。
  • 定时器监听线程
  • 事件监听线程
  • …

毕设总结

• 毕设说明:

  1. 毕设是非常重要的，如果毕设都完不成，也不需要去面试了，直接重听就好了！
  2. 只有完成毕设，和写完简历，并且我审核过了，才能毕业「我给你看简历之前，先看毕设」

• 毕设要求：

  • 不限技术框架「Vue2、Vue3、React 皆可」，但是建议：你想用啥技术作为主栈去找工作，那么就先以啥技术框架去做毕设！！
  • 一个人 / 两个人：自愿结组「三个人结组的，需要我审核」
  • 毕设需要是一个完整的项目「包含前后端的各种通信问题」
    如果自己可以写后台，自己写也可以，如果不会后端，则找开源的后端！！

• 毕设参考案例：

  1. 知乎日报「只许一个人开发」
  2. 新蜂APP「ToC」「只许一个人开发」
     • http://47.99.134.126:5008/#/home
  3. 新蜂CMS系统「ToB」
     • http://vue3-admin.newbee.ltd/
     • 账号：admin 密码：123456
  4. 网易云「PC或者移动端」
  5. 物美系统「可以允许三个人」
     • https://iot.fastbee.cn/login

• 或者自己去 github 上找开源的项目！！

• 明天上课前，报备给我你的选择「各组长收集」，毕设需要在 7.23 之前完成！

进阶参考

1. dns缓存刷新时间是多久?dns本地缓存时间介绍
2. 系统Hosts文件原理和应用