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

最新推荐文章于 2024-10-06 09:00:00 发布
最新推荐文章于 2024-10-06 09:00:00 发布
阅读量285 收藏
点赞数
分类专栏： 重返学习 原生js学习 文章标签： 网络 学习 http
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seetoyou/article/details/131198384
版权

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解析记录。
        • 这个是找缓存的方式的。
        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
<link rel="dns-prefetch" href="//dss0.bdstatic.com">
```

```html
<link rel="dns-prefetch" href="//static.360buyimg.com">
```
        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文件原理和应用
方朝端
关注
专栏目录
Atum2：Atum 2：重返沙滩-向Minecraft添加了全新的埃及主题尺寸
02-03
[Atum 2] 在下载 如何通过Maven获得Atum 2 添加到您的build.gradle中： repositories { maven { // url of the maven that hosts Atum 2 files ... } } dependencies { // compile against Atum 2 ...
NBA 2021-2022 赛季 阵容（2021.09.22）G--78页.pdf
09-22
总结来说，篮网、雄鹿和湖人这三支球队在新的赛季都有各自的战术布局和阵容调整。篮网以三巨头为核心，保持竞争力；雄鹿通过保留夺冠班底，力求卫冕；湖人则构建了一支年龄结构合理、经验丰富的球队，试图重返巅峰。...
Springboot家政服务管理系统 毕业设计-附源码34242
Vxin_CXSJ881的博客
09-10 107
本设计主要实现集人性化、高效率、便捷等优点于一身的家政服务管理系统，完成首页、服务项目、服务分类、订单信息、订单评价等功能模块。系统通过浏览器与服务器进行通信，实现数据的交互与变更。本系统通过科学的管理方式、便捷的服务提高了工作效率，减少了数据存储上的错误和遗漏。家政服务管理系统使用Java语言，采用基于 MVVM模式的spring boot技术进行开发，使用 Eclipse 2017 CI 10 编译器编写，数据方面主要采用的是微软的MySQL数据库来作为数据存储媒介，
springboot小区物业服务平台 毕业设计-附源码35514
Vxin_CXSJ881的博客
09-11 236
本设计主要实现集人性化、高效率、便捷等优点于一身的小区物业服务平台 ，完成首页、系统用户、物业公告、业主信息、登记报修、缴费管理、房产信息等功能模块。系统通过浏览器与服务器进行通信，实现数据的交互与变更。本系统通过科学的管理方式、便捷的服务提高了工作效率，减少了数据存储上的错误和遗漏。小区物业服务平台开发是采用基于 MVVM模式的springboot框架进行开发，使用 MyEclipse编译器编写，数据方面主要采用的是微软的MySQL关系型数据库来作为数据存储媒介，配合前台HTML+CSS 技术完成系统
django停车场管理系统-计算机毕设 附源码19517
DZbishe的博客
09-08 149
停车场管理系统主要采用Django框架，基于B/S结构，Mysql数据库，对于应用程序的开发要求具备完整功能，使用简单的特点，并建立一个数据完整安全稳定的数据库。停车场管理系统的开发技术具有很高可行性，且开发人员掌握了一定的开发技术，所以系统的开发具有可行性。 3.1.2操作可行性 停车场管理系统的登录界面简单易于操作，采用常见的界面窗口来登录界面，通过电脑进行访问操作，会员只要平时使用过电脑都能进行访问操作。此系统的开发采用Python语言开发，基于B/S结构，这些开发环境使系统更加完善。本系统具有易操作
20230612----重返学习-函数式编程-数据类型检测-网络层优化
seetoyou的博客
06-12 380
函数式编程 && 命令式编程函数式编程:把具体的操作过程“封装”到一个函数中,我们无需关注内部是如何处理的(How),只需要关注处理的结果(What)即可;命令式编程:具体如何去处理,是由自己实现及掌控的,关注How的过程！操作灵活,可以自主把控处理的每一个步骤。对于一些复杂的处理逻辑，还是要使用命令式编程，自己去管控操作的步骤。处理性能一般比函数式编程式要好。总结：处理的数据量“较多”的情况下，使用命令式编程来提高性能！操作逻辑较为复杂，需要自己灵活把控处理步骤的情况下，也使用命令式编程！
（附源码）springboot少儿程序设计学习平台-计算机毕设 24550
最新发布
Q_3461074420的博客
10-06 1454
少儿程序设计学习平台是基于Spring Boot框架开发的一款在线学习平台，旨在为少儿提供一个系统化、互动性强的学习环境。该平台面向管理员、教师用户和注册用户，提供了课程中心、资源中心、学习中心、我的学习和学习目录等多个功能模块。 该平台基于Spring Boot框架，具有良好的模块化和可扩展性，能够快速响应用户的需求并提供稳定的学习体验。同时，注重用户体验，平台界面简洁友好，操作流程简单直观，为少儿提供了一个便捷、安全的学习平台。 总之，Spring Boot少儿程序设计学习平台致力于为少儿提供一站式的程
SSM 汽车车辆管理系统-计算机毕设 附源码68424
DZbishe的博客
07-23 148
汽车车辆管理系统主要是为了更加地完善车库车辆的管理情况，对系统用户、汽车信息、车辆调度、车辆维修、费用报销、通知公告、意见反馈等提供了方便的机制。本系统有多类使用者，分别是管理员和司机用户。以下是从这两种用户的角度分别介绍本系统所要实现的功能。 司机用户模块： 账号登录认证。 管理个人资料信息，修改可修改的信息项。 汽车信息查询。 费用报销查询，同时查看历史已有费用报销记录。 管理员： 系统用户管理：对用户进行管理，用户的注册，包括用户昵称、用户名、用户信息（用户姓名、用户性别、年龄等）用户的账号信息：
django动物领养救助系统-计算机毕设 附源码63583
DZbishe的博客
07-13 196
1.登录模块： 本动物领养救助系统的用户登录涉及到三类信息的判断：第一类是用户名和密码是否为空；第二类是验证码是否录入和正确；第三类就是用户登录信息、验证码和权限是否匹配通过。在该用户登录流程对会对用户名和密码是否为空进行判断，以及验证码是否正确进行判断，只有以上的几类信息中的一种存在问题的情况下都是无法登录成功的。 2.公告管理模块： 本动物领养救助系统中的公告管理，管理方式都是对信息的三种基本操作：一种是完成公告信息的添加，在这里会对公告信息的录入情况来判断；一种是对公告信息的修改，另一种就是对公告信息
Springboot手工艺品交易平台-计算机毕设定制-附源码 11541
VX_bysj703的博客
06-25 1924
手工艺品交易平台主要功能模块包括用户管理、资源管理、商城管理、订单发货，采取面对对象的开发模式进行软件的开发和硬体的架设，能很好的满足实际使用的需求，完善了对应的软体架设以及程序编码的工作，采取MySQL作为后台数据的主要存储单元，采用springboot框架、Java技术、Ajax技术进行业务系统的编码及其开发，实现了本系统的全部功能。
校园二手书销售平台设计与实现 毕业设计-附源码00895
Vxin_CXSJ881的博客
08-09 139
校园二手书销售平台主要功能模块包括网站管理（轮播图、网站公告）人员管理（管理员、注册用户）内容管理（图书资讯、资讯分类）购物管理（二手商城、分类列表、订单列表）个人管理（个人信息、密码修改），采取面对对象的开发模式进行软件的开发和硬体的架设，能很好的满足实际使用的需求，完善了对应的软体架设以及程序编码的工作，采取MySQL作为后台数据的主要存储单元，采用springboot框架、Java技术、Ajax技术进行业务系统的编码及其开发，实现了本系统的全部功能。本次报告，首先分析了研究的背景、作用、意义.....
20210302-申万宏源-万科A-000002-龙头重返荣耀，多元价值蕴藏.pdf
04-08
万科A（股票代码：000002）作为中国房地产行业的龙头企业，其业务范围广泛，包含住宅开发、物业管理、商业地产、物流地产及租赁住宅等多个领域。此次申万宏源的研究报告指出，万科在管理红利时代持续展现其行业领跑...
行业文档-设计装置-撞击试验平台.zip
08-21
航天机构则利用它来验证航天器在重返大气层时的耐受能力。 6. 安全与控制： 撞击试验涉及到极高能量的释放，因此安全措施至关重要。这包括设置安全防护装置、采用远程控制、进行风险评估和应急计划。同时，精准的...
行业文档-设计装置-基于航天器振动试验声谱的结构故障模式诊断方法.zip
09-06
振动试验是模拟航天器在发射、在轨运行或重返大气层时可能遇到的机械振动环境，以检测其结构的耐受性。在这个过程中，会收集到大量的振动数据，包括加速度、速度和位移等参数。声谱分析是一种将这些时间序列数据转化...
20230620----重返学习-移动端事件处理-响应式
seetoyou的博客
06-20 2689
day-095-ninety-five-20230620-移动端事件处理-响应式 移动端事件处理 移动端的事件处理 移动端事件处理 PC端主要以：鼠标事件、键盘事件、资源加载事件、动画事件等事件为主。 其中click在PC端是点击事件！ 移动端主要以：手指事件（单手指和多手指）、资源加载事件、动画事件等为主。 其中，click在移动端是单击事件。 移动端事件问题 移动端事件的各个问题： 问题1：click事件在移动端存在300ms的延迟。 原因： click事件在移动端是单击
2022-04-26 跳出特定for循环，JavaScript中的label语法
seetoyou的博客
04-26 1974
原理 标记语句可以和 break 或 continue 语句一起使用。标记就是在一条语句前面加个可以引用的标识符 标签语句用于给语句加标签，语法如下： label: statement 下面是一个例子： start: for (let i = 0; i < count; i++) { console.log(i); } 在这个例子中，start是一个标签，可以在后面通过break或continue语句引用。标签语句的典型应用场景是嵌套循环。 label语句只在以下场景中使用： for 语句 d
20230621----重返学习-仿QQ音乐播放器-静态页面的免费部署-vue2
seetoyou的博客
06-21 1541
audio标签标签的属性各浏览器对不用音频格式的支持是不一样的可以在audio标签用内部使用source来指定可以使用的音频源。</audio标签对应的DOM元素对象的常见属性</</let;/*currentTime:存储了当前播放的时间「单位秒」duration:存储了总的时间ended:true/false 是否播放完毕paused:true/false 当前是否为暂停的volume:0~1 控制音量的 1最大音量 0静音play方法：控制音频播放pause方法：控制播放暂停。
20230614----重返学习-HTTP网络-辅助知识-前端性能优化
seetoyou的博客
06-14 1140
从输入URL地址到看到页面，中间都经历了啥第一步：URL地址解析。httphttpsHTTPSSLftp上传内容下载内容0~65535第二步：缓存检查Expireshttp/1.0http/1.1Expires具备在效期的缓存信息html页面强缓存webpack编译唯一hash值代码修改每次打包不同的文件html页面最新的文件强缓存服务器资源最新资源本地缓存协商缓存协商缓存强缓存强缓存协商缓存协商缓存的机制HTTP/1.0ETagHTTP/1.1ETag第三步：DNS解析DNS解析递归查询。
E4X已经被废弃,各浏览器基本上不再支持它;
seetoyou的博客
04-29 998
E4X是一种在ECMAScript标准的基础上加入的动态XML支持的程序语言扩展. 到2019年,目前主流浏览器已经不太支持它了,一些版本的Firefox浏览器或许还可以使用,但它已经在主流浏览器的主流版本中基本上不再受到支持了;也就是说E4X已被遗弃! Firefox1.5+支持它,但在Firefox 17默认网页中已被禁用,Firefox 20浏览器默认禁用,并已在Firefox 21删除...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值