页面性能优化

1. 减少http请求数量和请求资源大小两个优化要点

2. 掌握压缩与合并的原理

   1. 减少请求的数量，这是合并
   2. 减少请求的大小，这是压缩
      - html 压缩 
      - css 压缩：去掉回车，空格，无效代码，语义合并
      - js 压缩：注释，回车，空格
      - 有损压缩，jpg压缩

3. 掌握通过在线网站和fis3两种实现压缩与合并的方法

1. fis3 百度内部使用构建工具

4. png 图片分析

   1. png8——256色 + 支持透明
   2. png24——2^24色 + 不支持透明
   3. png32——2^24色 + 支持透明

5. 不同格式图片常用的业务场景

1. jpg 有损压缩，压缩率高，不支持透明（用于大部分不需要透明图片的业务场景）
2. png 支持透明， 浏览器兼容好（用于大部分需要透明图片的业务场景）
3. webp压缩程度更好，在ios webview有兼容性问题（用于安卓）
4. svg矢量图， 内嵌代码， 相对较小， 图片样式相对简单的场景（图片样式相对简单的业务场景）

6. css 雪碧图

  1. 把网站上用到的一些图片整合到一张单纯的图片中，减少网站的http请求数量
  2. 缺点：整合图片比较大时，一次加载比较慢

7. image inline

1. 将图片内容嵌入到html中，减少网站的http请求数量

8. HTML渲染过程的一些特点

   1. 顺序执行，并发加载：（引入外部资源，并发度受浏览器限制）
      - 从上至下加载
      - html中并发请求资源
   2. 是否阻塞
      - css 阻塞：css head中阻塞页面的渲染，阻塞js的执行，不阻塞外部脚本的加载
      - js 阻塞： 直接引入的js阻塞页面的渲染，不阻塞资源的加载，js顺序执行，阻塞后续js逻辑的执行。
   3. 依赖关系（js 使用 async defer 异步加载）
   4. 引入方式

9. 懒加载，预加载

1. 懒加载：图片进入可视区域之后请求图片资源
2. 预加载：图片等静态资源在使用之前提前请求，资源使用时能从缓存中加载，提升用户体验

10. 重绘与回流

1. 回流：当render-tree中一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变了布局，需要重新构建。对应的css属性有，

• 盒子模型相关属性：width,height,padding,margin,display,border-width,border;
• 定位属性：top,bottom,left,right,position,float,clear;
• 改变节点内部文字结构：text-align,overflow-x,overflow-y,overflow,font,font-family,line-height,vertical-align,white-sapce,font-size.
  当页面布局与几何属性改变时就需要回流。

2. 重绘：当render-tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background(-****)，color,border-style,visibility,text-decoration,outline-color,outline,box-shadow

11. 浏览器存储

1. cookie http请求是无状态的，所以需要cookie去维持客户端状态
     - 服务端生成，客户端存储
     - 作为浏览器存储，大小4kb左右
     - 需要设置过期时间，expire
2. localStorage 浏览器本地缓存，大小5M左右
3. sessionStorage 会话级别浏览器存储，大小5M左右
4. indexedDB 用户客户端存储大量结构化数据，为应用创建离线版本

12. PWA（Progressive Web App）

是一种Web App新模型，并不是一种前沿的技术或者一种单一的知识点。这是一个渐进式的Web App，是通过一系列新的Web特性，配合优秀的UI交互设计，逐步增强Web App的用户体验

13. Service Worker

1. Service Worker是一个脚本，目前首要特性，就是拦截和处理网络请求的能力，包括以编程的方式来管理被缓存的响应，实现与主页面的通信
2. 使用 Service Worker在后台运行同时能和页面通信的能力，去实现大规模后台数据处理
3. Service Worker生命周期，install，active，...
4. Chrome浏览器使用指令查看当前页面的Service Worker使用情况（复制放到浏览器网址处）

       - chrome://serviceworker-internals/
       - chrome://inspect/#service-workers

14. 缓存

- chrome://cache 查看缓存

1. Cache-Control
   • max-age ：缓存最大有效时间段，从请求开始计算
   • s-maxage ： 指定public（共享内容）缓存时间（优先级高于max-age）
   • private ： 表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）
   • public ： 表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存。
   • no-cache ： 从服务端计算缓存策略
   • no-store ： 不使用缓存
2. Last-Modified
   • 基于客户端和服务端协商的缓存机制
   • last-modified --- response-header
   • if-modified-since --- request-header
   • 需要与cache-control共同使用 （max-age 过期之后 向服务器请求）
3. Etag（优先级比Last-Modified高） / If-None-Match
   • 文件内容的hash值 （文件内容改变，hash值改变）
   • etag --- response header
   • if-none-match --- request header
   • 需要与cache-control共同使用