浏览器 服务器渲染&浏览器渲染 优化

梳梳
176 阅读4分钟

你知道有哪些原因是影响页面性能的？

  • HTTP请求

  • 复杂的页面逻辑(JS设计)

  • 重度的DOM操作

  • 服务端响应

  • 大量的数据

有哪些办法可以加速我们的页面性能？

  • a. 加载（80%）

    1. 减少http请求（精灵图，css与js的内联与合并）

    2. 资源压缩与合并（代码打包）

    3. CDN库（大图，大文件，局域网到主干网络部分）

    4. 懒加载

    5. SSR服务端渲染

    6. 分包

    7. 异步加载 8.DNS预解析

    8. 缓存

  • b. 性能与动画

    1. 减少dom操作,避免回流

    2. 采用文档碎片(虚拟dom的原理)

    3. 要操作的元素脱离文档流（定位，浮动，translate）

  • 以下不算性能优化，执行效率的问题

    image.png

  • 三元比 if else 快

  • 性能分析

    • 页面加载性能

    • 动画与操作性能

      • 提倡使用 transform 里面的 translate 跟回流有关系

        • 绝对定位使要操作的元素脱离文档流
        • 最大限度避免回流

    • 内存占用

      • 直播

    • 电量消耗

      • 游戏：像素

image.png

image.png

懒加载

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    img {
      display: block;
      margin-bottom: 50px;
      width: 400px;
      height: 400px;
    }
  </style>
</head>
<body>
  <img src="./img2/timg.gif" data-src="./img2/time.jpg" alt="">
  <img src="./img2/timg.gif" data-src="./img2/time2.jpg" alt="">
  <img src="./img2/timg.gif" data-src="./img2/time3.jpg" alt="">
  <img src="./img2/timg.gif" data-src="./img2/time4.jpg" alt="">
  <img src="./img2/timg.gif" data-src="./img2/time5.jpg" alt="">
  <script>
    // 全部用一张loading动画 一次请求
    let num = document.getElementsByTagName("img").length; // 9
    let img = document.getElementsByTagName("img"); // 集合，数组
    let n = 0;
    lazyload();
    window.onscroll = lazyload;

    function lazyload() {
      let seeHeight = document.documentElement.clientHeight; // 视口高度
      // 滚动条的距离
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      for(let i = n; i < num; i++){
        // 该出现了
        if(img[i].offsetTop < seeHeight + scrollTop){
          if(img[i].getAttribute("src") === "./img2/timg.gif"){
            img[i].src = img[i].getAttribute("data-src")
          }
          n = n + 1
        }
      }
    }
  </script>

</body>

</html>

服务器渲染&浏览器渲染

何为渲染？

  • 页面上的数据要发生更新，就是渲染

  • 这个工作放在服务器进行就是服务器渲染，放在浏览器进行就是浏览器渲染

浏览器端渲染路线：用 js 去生成 html，前端做路由

  • 请求一个 html。服务端返回一个 html

  • 浏览器下载 html 里面的 js/css 文件。等待 js 文件下载、加载并初始化完成。

  • 由 js 代码向后端请求数据（ajax/fetch）。等待后端数据返回

  • 客户端从无到完整地，把数据渲染为响应页面

服务端渲染路线：后台语言通过一些模板引擎生成 html

  • 请求一个 html

  • 服务端：请求数据、初始渲染、返回已经有正确内容的页面

  • 客户端请求 js/css 文件。等待 js 文件下载、 加载并初始化完成

  • 客户端把剩下一部分渲染完成

浏览器渲染页面

  1. 从HTML解析出DOM Tree（DOM树）

  2. 从CSS解析出CSSOM Tree(CSS规则树)

  3. JavaScript代码由JavaScript引擎处理

  4. DOM树建立后根据CSS样式进行构建内部绘图模型，生成RenderObject树(渲染树)

  5. 根据网页层次结构构建RenderLayer树，同时构建虚拟绘图上下文(重排)

  6. 依赖2D和3D图形库渲染成图像结果呈现在浏览器中（重绘）

  • 注意

    • css的下载过程不会阻塞解析，但JS会等待其下载并执行完成后才会继续解析

    • JS下载时，会并行下载其他的资源

从用户输入浏览器输入url到页面最后呈现有哪些过程？有什么办法能优化页面性能？

image.png

  • 简述版

    • 解析url：域名，子域名，主机，端口号

    • 进入DNS域名系统 找到真实ip地址 (第二次，检查缓存，减少一步解析)

      • 浏览器将域名解析的映射（真实ip）缓存到本地

      • ping

    • 建立连接 TCP三次握手（都不会携带正式数据）

    • 请求和传输数据，渲染页面(浏览器渲染页面的整个过程)

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

  • url：真实ip地址映射

    • www.baidu.com/ => 统一资源定位符（网址）

    • https: 传输协议

    • www: 服务器

    • baidu.com: 域名 => 真实ip

    • ?id=1 参数

  • 1.1 第一次访问

    • 1.2 第二次访问：将域名解析的IP存在本地 => 读取浏览器缓存

  • 文字版

    • 浏览器

      • 从URL解析出主机名

      • 将主机名转换成服务器ip地址

        • 先查找本地DNS缓存列表

        • 没有的话再向浏览器默认的DNS服务器发送查询请求

        • 同时缓存

      • 将端口号从URL中解析出来

      • 三次握手建立与目标Web服务器的TCP连接

      • 向服务器发送一条HTTP请求报文

    • 服务器

      • 向浏览器返回一条HTTP响应报文

      • 关闭连接

    • 浏览器解析文档

    • 如果文档中有资源

      • 重复发请求报文动作 直至资源全部加载完毕
avatar
文章
阅读
粉丝