7. screen&px + gpu&layout

这一节课程主要讲解的是性能优化的相关问题… 先大致的看一遍 之后得找时间再看 因为有大部分的内容还不理解

7.1 screen&px

CPU 和 GPU

  1. GPU 的算力 比 CPU 强很多 若我们的页面中有设计到图像处理的部分
  2. 能用 GPU 来做 就不要用 CPU
  4. 动画效果吃 GPU (耗性能) 能少用就尽量少用

浏览器的渲染顺序

...

reflow 和 repaint

reflow:
    改变窗口大小;
    改变字体大小;
    内容的改变, 输入框输入文字;
    激活伪类, 比如 :hover
    操作 class 属性
    脚本操作 DOM
    计算 offsetWidth offsetHeight
    设置元素的 style 属性

repaint:
    仅仅是改变某个元素的背景色 或 文字颜色 或 边框颜色 并且 不影响它周围或内部的布局的属性

repaint 速度快于 reflow

will-change mdn

16.7ms

浏览器刷新页面的频率是 1s 60次
平均下来 16.666666667ms 刷新一次页面
若 gpu 可以在一帧时间内渲染好页面, 那么当用户改变页面的元素或者实现动画效果的时候, 将会非常流畅

7.2 gpu&layout

讲解显示器的 成像原理

空间混色法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>空间混色法</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrapper {
            display: flex;
        }

        .demo {
            width: 0.1px;
            height: 80px;
        }

        .demo:nth-of-type(2n) {
            /* 偶数红色 */
            background-color: #f00;
        }

        .demo:nth-of-type(2n+1) {
            /* 奇数绿色 */
            background-color: #0f0;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <!-- .demo*1000 -->
    </div>
</body>

</html>

7. 补充 - 图1

像素 & 像点 & 点距

7. 补充 - 图2

7. 补充 - 图3

像素 --> 红 绿 蓝 --> 空间混色法
一个像素由 3 个像点构成
    有的公司出的显示器设备的像点 采用的是 图1 点状的 而有的公司采用的是后者 图2 条状的
点距 同色像点之间的距离
    DPI(ppi) 一英寸所能容纳的点距数量 (即: 像素点数量)
    1 in = 2.54 cm
    96dpi ≈  25.4mm / 100 = 0.254mm / 个
    DPI 一开始表示的是打印机在一英寸里面可以打印的墨点数量
    PPI 表示的是一英寸所能容纳的像素点数 (点距数)
        在描述屏幕的清晰度的时候 dpi 和 ppi 可以通用 表示的都是一个意思

ctr 显示屏 求点距的方法 几乎是所有屏幕都通用的
lcd 液晶屏

7. 补充 - 图4

参照像素 & 设备像素比 dpr

参照像素 (CSS像素 逻辑像素)
    为了解决在不同 dpi 的显示器上显示相同的效果 提出了 参照像素的概念

取值
    96dpi 一臂距离看 显示出来的具体大小

dpr
    物理像素 / CSS像素
    物理像素也就是设备的实际像素
    表示的含义: 一个逻辑像素 需要 多少个物理像素来实现

倘若用户的显示器就是 96dpi 那么显示显示器的实际像素和参照像素的比例为 1 : 1 (dpr = 1)
倘若用户的显示器是 200dpi 那么比例大致为 2 : 1 也就是用户显示器上的两个像素点 被 浏览器视作一个像素点 (dpr ≈ 2)

7. 补充 - 图5

美工给我们的 PSD 图 是按照 iPhone6 的标准来给的