前端性能优化

一. css、js 的加载与执行

一个网站在浏览器端是如何进行渲染的呢？ 基本过程 1．解析HTML文件，创建DOM树 2．解析CSS,形成CSS对象模型 3．将CSS与DOM合并，构建渲染树（renderingtree） 4．布局和绘制 对渲染树上的每个元素，计算它的坐标，称之为布局。浏览器采用一种流方法，布局一个元素只需通过一次，但是表格元素需要通过多次。 最后，渲染树上的元素最终展示在浏览器里，这一过程称为“painting”。 当用户与网页交互，或者脚本程序改动修改网页时，前文提到的一些操作将会重复执行，因为网页的内在结构已经发生了改变。

1. HTML渲染过程的一些特点
   1. 顺序执行、并发加载
   2. 是否阻塞
   3. 依赖关系
   4. 引入方式
2. 顺序执行、并发加载
   1. 词法分析
   2. 并发加载
   3. 并发上限
3. css阻塞
   1. css head中阻塞页面的渲染
   2. css阻塞js的执行
   3. css不阻塞外部脚本的加载
4. js阻塞
   1. 直接引入的js阻塞页面的渲染
   2. js不阻塞资源的加载
   3. js顺序执行，阻塞后续js逻辑的执行
5. 依赖关系
   1. 页面渲染依赖于css的加载
   2. js的执行顺序的依赖关系
   3. js逻辑对于dom节点的依赖关系
6. js引入方式
   1. 直接引入
   2. defer
   3. async
   4. 异步动态引入js
7. 加载和执行的一些优化点
   1. css 样式表置顶
   2. 用 link 代替 import
   3. js 脚本置底
   4. 合理使用 js 的异步加载能力

二. 重绘与回流

1. 回流 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)，当页面布局和几何属性改变时就需要回流。
2. 重绘 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
3. 回流必将引起重绘而重绘不一定会引起回流
4. 触发页面重布局的属性
   1. 盒子模型相关属性会触发重布局
   2. 定位属性及浮动也会触发重布局
   3. 改变节点内部文字结构也会触发重布局
   4. 触发页面重布局的属性: width height padding margin display border-width border min-height top bottom left right position float clear text-align overflow-y font-weight overflow font-family line-height vertival-align white-space font-size
   5. 只触发重绘的属性: color border-style border-radius visibility text-decoration background background-image background-position background-repeat background-size outline-color outline outline-style outline width box-shadow

三. 浏览器存储

1. Cookie
   1. 因为HTTP请求无状态，所以需要cookie去维持客户端状态
   2. 过期时间 expire
   3. cookie的生成方式
      1. http response header中的set-cookie
      2. js中可以通过document.cookie可以读写cookie
   4. 仅仅作为浏览器存储（大小4KB左右，能力被localstorage替代）
   5. cookie中在相关域名下面 —— cdn的流量损耗
   6. httponly
2. LocalStorage
   1. HTML5设计出来专门用于浏览器存储的
   2. 大小为5M左右
   3. 仅在客户端使用，不和服务端进行通信
   4. 接口封装较好
   5. 浏览器本地缓存方案
3. SessionStorage
   1. 会话级别的浏览器存储
   2. 大小为5M左右
   3. 仅在客户端使用，不和服务端进行通信
   4. 接口封装较好
   5. 对于表单信息的维护
4. IndexedDB
5. IndexedDB 是一种低级API，用于客户端存储大量结构化数据。该API使用索引来实现对该数据的高性能搜索。虽然 Web Storage 对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太有用。IndexedDB提供了一个解决方案。为应用创建离线版本
6. PWA
   1. PWA (Progressive Web Apps) 是一种 Web App 新模型，并不是具体指某一种前沿的技术或者某一个单一的知识点，我们从英文缩写来看就能看出来，这是一个渐进式的 Web App，是通过一系列新的 Web 特性，配合优秀的 UI 交互设计，逐步的增强 Web App 的用户体验.
7. Service Worker
8. Service Worker 是一个脚本，浏览器独立于当前网页，将其在后台运行,为实现一些不依赖页面或者用户交互的特性打开了一扇大门。在未来这些特性将包括推送消息,背景后台同步， geofencing（地理围栏定位），但它将推出的第一个首要特性，就是拦截和处理网络请求的能力，包括以编程方式来管理被缓存的响应。

四. 图片相关的优化

1. 不同格式图片常用的业务场景
   1. jpg有损压缩，压缩率高，不支持透明
   2. png支持透明，浏览器兼容好
   3. webp压缩程度更好，在ios webview有兼容性问题
   4. svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景
2. 不同格式图片常用的业务场景
   1. jpg —— 大部分不需要透明图片的业务场景
   2. png —— 大部分需要透明图片的业务场景
   3. webp —— 安卓全部
   4. svg矢量图 —— 图片样式相对简单的业务场景
3. 进行图片压缩
   1. 针对真实图片情况，舍弃一些相对无关紧要的色彩信息
   2. CSS雪碧图
   3. Image inline 将图片的内容内嵌到html当中 减少你的网站的HTTP请求数量
   4. 使用矢量图 使用SVG进行矢量图的绘制, 使用iconfont解决icon问题
   5. 在安卓下使用webp WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一
   6. 图片懒加载和图片预加载

五. 资源的合并与压缩

1. 重点方面 1 . 理解减少http请求数量和减少请求资源大小两个优化要点 2. 掌握压缩与合并的原理 3. 掌握通过在线网站和gulp两种实现压缩与合并的方法
2. 请求过程中一些潜在的性能优化点
   1. dns是否可以通过缓存减少dns查询时间
   2. 网络请求的过程走最近的网络环境
   3. 相同的静态资源是否可以缓存
   4. 能否减少请求http请求大小
   5. 减少http请求
   6. 服务端渲染