PWA学习笔记(二)

设计与体验

APP Shell：

1、应用从显示内容上可粗略划分为内容部分和外壳部分，App Shell 就是外壳部分，即页面的基本结构

2、它不仅包括用户能看到的页面框架部分，还包括用户看不到的代码逻辑

3、页面能够展现所需的最小资源集合，即支持用户界面所需的最小的 HTML、CSS 和 JS 等静态资源集合

4、采用 App Shell 的站点，每个页面都会先加载 App Shell 的内容，

再由 App Shell 根据当前页面 URL 渲染对应的主体内容

正确地使用 APP Shell：

1、使用 Service Worker 预缓存 App Shell 的静态资源

2、用户访问 Web 站点时，通过 Service Worker 拦截请求

3、Service Worker 返回缓存中的 App Shell 给浏览器

4、App Shell 根据当前的 URL 再去请求对应的数据来渲染

骨架屏：

1、快速渲染的静态图片/样式/色块进行占位，让用户对后续会渲染的内容有一定的预期

2、从架构上来说分为前端渲染(CSR)和后端渲染(SSR)两种，骨架屏适用于前端渲染的页面

3、骨架屏的 HTML 和 CSS 内联，从而使骨架屏能更快地展示出来

4、外链样式文件会阻塞骨架屏渲染所需的样式和 HTML 的渲染，可以将外联样式的 rel 设置为 preload

<link rel="stylesheet" href="xxx.css">
<link rel="preload" href="xxx.css">

5、由于使用预加载来加载样式文件，所以我们无法保证浏览器会先应用样式再运行 JavaScript 渲染内容。

所以，在样式文件加载完成前，即使 JavaScript 已渲染好了内容，也先不要替换掉骨架屏，等待样式文件

加载完成后，再触发 JavaScript 进行挂载。如果样式文件在 JavaScript 文件之前加载，则 mount 函数

还没有声明，执行会出错，导致主体内容没有渲染到页面上，需增加标记告诉 JavaScript 样式是否加载完成

// src/main.js
const app = new Vue({
  router,
  components: { App },
  template: '<App/>'
})

/**
 * 挂载 Vue 渲染好的 HTML 元素到 #app 中，替换掉骨架屏
 */
window.mount = function () {
  app.$mount('#app')
}

// 如果样式文件已经加载完成了，直接挂载
if (window.STYLE_READY) {
  window.mount()
}

<!-- index.html -->
<link rel="preload" href="xxx.css" as="style" onload="this.onload=null;this.rel='stylesheet';window.STYLE_READY=1;window.mount&&window.mount();">

Data URL：

1、允许我们使用内联（inline-code）的方式在网页中包含数据，目的是将一些小的数据，

直接嵌入到网页中，从而不用再从外部文件载入

<!-- 传统引入图片方法 -->
<img src="data:images/image.png"/>

<!-- Data URL 引入图片方法 -->
<img src="data:image/png;base64,iV......"/>  

2、格式规范

data:[<mime type>][;charset=<charset>][;<encoding>],<encoded data>

1.  data ：协议名称；

2.  [<mime type>] ：可选项，数据类型（image/png、text/plain等）

3.  [;charset=<charset>] ：可选项，源文本的字符集编码方式

4.  [;<encoding>] ：数据编码方式（默认US-ASCII，BASE64两种）

5.  ,<encoded data> ：编码后的数据

部分 Data URL scheme 支持的类型
data:,                            文本数据
data:text/plain,                    文本数据
data:text/html,                  HTML代码
data:text/html;base64,            base64编码的HTML代码
data:text/css,                    CSS代码
data:text/css;base64,              base64编码的CSS代码
data:text/javascript,              Javascript代码
data:text/javascript;base64,        base64编码的Javascript代码
data:image/gif;base64,            base64编码的gif图片数据
data:image/png;base64,            base64编码的png图片数据
data:image/jpeg;base64,          base64编码的jpeg图片数据
data:image/x-icon;base64,          base64编码的icon图片数据

3、制作 base64 的 Data URL：

(1)使用二进制方式(rb)打开图片文件

(2)用 Python 的 base64 库来给比特流图片进行编码

    (3)获取到 encoded data，把该数据添加头部（看 Data URL 的格式）

# 引入 base64 库
import base64

with open("图片路径", 'rb') as f:
    # 将比特流编码，类型仍是 bytes
    base64_data = base64.b64encode(f.read())
    # 解码比特流为字符串，以供使用
    s = base64_data.decode()
    data_url = 'data:image/jpeg;base64,' + s

4、适用场合：

(1)当访问外部资源很麻烦或受限时

(2)当图片是在服务器端用程序动态生成，每个访问用户显示的都不同时

(3)当图片的体积太小，占用一个HTTP会话不是很值得时

5、不适用场合：

(1)编码后可能会增加数据的体积

(2)Data URL形式的图片不会被浏览器缓存，这意味着每次访问这样页面时都被下载一次，但可优化

页面从加载到展现的大致顺序如下：

1、加载 HTML 文件

2、解析 DOM

3、并行加载 CSS/JS 资源

4、如果 head 中存在外链的样式，则阻塞渲染等待样式文件加载并解析完成

5、如果 head 中存在外链的 script，则阻塞渲染等待 script 文件加载并执行完成

像素：

1、图像中最小的单位，一个不可再分割的点，在计算机屏幕上一般指屏幕上的一个光点

2、设备像素对应屏幕上光点的数量

3、虚拟像素，也可以叫 CSS 像素（CSS Pixels）或逻辑像素，在 Android 开发中可以叫设备无关像素

注：在 iPhone X 上，设备像素是 1125x2436，而 CSS 像素是 375x812，则一个 CSS 像素对应长和宽各 3 个设备像素

    比值 3 就是我们平时所说的设备像素比(Device Pixel Ratio)，简称 DPR ,它并不是一个单位，而是一个比值

EM 和 REM：

1、EM 是相对单位，相对于元素自身的 font-size，它会从继承父元素的字体大小，若父元素没有设置字体大小，会一直找到根元素

2、REM = Root EM，顾名思义就是相对于根元素的 EM，是根据根元素来计算出CSS 像素点的大小，默认为 16px

3、EM 对于模块化的页面元素比较好，而方便是 REM 最大的好处（只需要知道 html 标签的字体大小即可）

vw、vh 和百分比：

1、vw：viewport width，视口宽度，1vw = 1% 视口宽度

2、vh：viewport height，视口高度，1vh = 1% 视口高度

3、百分比：根据父元素来决定，如父元素高 100px，则 50% == 50px

弹性框：

1、不是单位，而是一种布局方式，里面的元素可弹性伸缩、定义排版方向、指定 flex 元素的顺序

2、容器样式属性(display: flex 的元素)：

(1)flex-direction：定义主轴方向，即子元素的排列方向，取值为

row、row-reverse、column 和 column-reverse，默认 row

(2)flex-wrap：默认情况下，弹性布局会将所有元素都压缩到一行，可以通过设置 flex-wrap 告诉

浏览器在适当时候换行取值为 nowrap、wrap、wrap-reverse

(3)flex-flow： 这个属性值是 flex-direction 和 flex-wrap 的简写

(4)justify-content： 定义子元素在主轴上对齐方式，

取值为 flex-start、flex-end、center、space-between 和 space-around

(5)align-items：定义子元素在垂直于主轴的交叉轴的排列方式，

取值为 flex-start、flex-end、center、baseline 和 stretch

(6)align-content：定义了子元素在多条轴线上的对齐方式，如果只使用了一条轴线，那该属性不起作用，

取值为flex-start、flex-end、center、space-between、space-around 和 stretch