从网络请求过程分析性能优化

缓存

• dns缓存：输入url进行请求，首先进行DNS解析，读取缓存
• cdn缓存和转发：通过cdn服务器缓存可以提供更快更稳定的服务
• 设置浏览器缓存，有内存的缓存像是黑盒，我们平时使用的请求头control-cache，是控制的磁盘，进行强缓存，协商缓存。

请求合并和资源压缩

• 资源压缩：图片，代码的压缩，webpack的loader转化和mini-css-exact-plugin和guifyjs压缩
• 资源合并：如webpack打包将所有资源打包进js里，只引用一个资源
• 请求头的压缩：通过服务端和客户端维护动态+静态的哈夫曼编码的字典
• 请求头的字段：如cdn请求图片资源不需要进行用户信息的验证，不用cookie字段

资源合并和压缩的分析

---

• html压缩：注释等辅助开发的换行符
  在线网站压缩，nodejs提供了html-minifier工具（构建时压缩或在服务端进行压缩：配置是否压缩js,css,注释），后端模板引擎渲染压缩
• css压缩：无效代码删除，CSS语义合并
  在线网站压缩，html-minifier工具压缩css，clean-css压缩
• js压缩与混乱：无效字符删除，注释，代码缩减和优化，代码保护
  在线网站压缩，html-minifier工具压缩js，uglifyjs2压缩

---

• 文件合并：网络延迟，丢包问题影响后续请求，代理中断，浏览器并发请求数量限制
  合并后的问题：渲染延迟，缓存失效
  解决：公共库与业务代码分离打包，不同页面单独打包
  方法：在线网站合并；nodejs实现文件合并（webpack的entry和output自动合并）
• 图片优化
  压缩种类： jpg不需要透明图的场景，png需要透明图的场景 webp安卓全部支持 优于前两者，svg简单的图片样式场景
  压缩方式：css雪碧图；将图片内嵌到HTML中image inline（小于64kb）；使用矢量图svg绘制icon

---

• css&js加载和执行
  css放在head中会保证页面渲染出来是有样式的，所以会阻塞页面的渲染，阻塞js的执行，但是不会阻塞js的加载
  js顺序执行，不会阻塞资源的加载，但是会阻塞页面的渲染，通过预加载的扫描来防止一个js文件的执行阻塞后续js文件的加载。
• 懒加载：在资源到达可视区域才去进行加载，设置dataimg和lazyload等实现 类似淘宝宝贝的懒加载
  获取当前元素距离最上边的距离小于屏幕区域，需要设置预设高度
• 预加载：在使用之前进行请求，使用时从缓存中加载，抽奖的图片，动画展示的预加载保证动画的进行。

回流和重绘

• 浏览器对资源的获取和解析，DOMContentLoaded触发之前是白屏时间，现在浏览器会在html解析生成页面的片段，所以我们将css放在head，将js放在后面，前者是为了css尽快加载，而js放在后面是为了避免放在前面，阻塞HTML的加载而增加白屏时间
• GUI渲染线程：生成html树+css树=render树，布局和绘制成位图
• 主进程进行图层的合并和渲染
• 回流是从布局到渲染：相关的操作：盒模型、定位和浮动、文字内结构的变化
• 重绘是从绘制到渲染：只影响到元素的外观、风格、而不是影响布局

规避回流的手段

https://segmentfault.com/a/1190000014018604

• 不去一条一条的修改dom的样式，预先定义好class然后修改className（多次到一次）
• dom离线修改，新建一个dom进行修改最后进行替换
• 不要把dom的属性值offsetHeight、offsetWidth放在循环里，浏览器为了避免频繁的回流，会有一个回流缓冲区，读取这些属性的时候为了取值的准确性，会去缓冲区读取而破坏缓冲区，而影响回流的过程
• 对重绘的图层可以进行绝对和固定定位脱离文档流，同样最后进行一次所有图层的合并和渲染
• 启动GPU硬件加速，启用后需要设置更高的z-index属性，这是为了避免其后的元素如果z-index值大于等于当前，且absolute或fixed相同，同样会生成复合图层

图层建立的触发条件

• 3d变幻、透视的css属性 设置 transform: translateZ(0); will-change: transfrom;
• 使用video节点进行视频播放
• 拥有3D上下文或者加速的2D上下文的canvas节点
• flash混合插件
• 对opacity做css动画或者使用一个动画webkit变换的元素
• 拥有加速css过滤器的元素
• 元素有一个包含复合层的后代节点
• z-index较低并有一个复合图层的兄弟节点

浏览器缓存

1、cookie 大小4kb，过期时间expire； 设置httponly不允许js读取我们的代码破解cookie；cookie在cdn等相关域名下都会被携带而浪费资源
2、localStorage 用于浏览器存储 大小5M，接口封装较好。
3、sessionStorage 用于会话级别的浏览器存储
4、IndexedDB 用于客户端存储大量结构化数据的低级API为应用创建离线版本
5、service worker 革命？用户创建线程打破之前只能在js线程中执行的状态

pwa 渐进式web app

1、可靠 弱网环境加载、无网络加载
2、快速 网页渲染和数据访问的优化
3、融入 可以加入到手机桌面和普通应用一样有全屏和推送等特性

service worker

可以独立于当前页面，后台运行并与页面通信；使用拦截和处理网络请求的能力实现离线应用。对网络请求进行拦截，在service worker中查找，对于未加载的资源会返回promise的reject结果，第二次才会读取缓存

• 与主页面进行通信 postMessage和addEventListener('message')

  
  
  service storage
  
  
  缓存的获取

indexDB

var request = window.indexedDB.open('test')
var myDB = {
name: 'test',
version: 1,
db: null
}
request.onsuccess(e) {
    myDB.db = e.target.result
}
myDB.close()
window.indexDB.deleteDatabase(myDB)
// 可以创建indexDB的空间 设置索引 优于键值对的存储方式
var store = request.result.createObjectStore(''books",{keypath: 'isb'})
var titleIndex = store.createIndex('by_title', 'title')
store.put({title: 'quarry memories', isb: 123})
// 通过transition进行store的关联进行事务的操作

缓存

设置自动缓存进行性能优化
cache-controll ：max-age； s-maxage(public的时间优先级高于max-age)；public(代理商比如cdn)；private(用户)；no-store；no-cache
协商缓存：Etag对应if-None-Match；last-Modified对应if-Modified-Since

服务端渲染

由于vue代码需要读取框架代码才能渲染，为了解决首屏问题，引入服务端渲染，置出首屏代码扔到服务端来渲染出首屏。
注意几个问题：

• 服务端渲染vue代码是没有mounted周期的
• 服务端的置出的代码需要跟客户端的代码进行混入，同样也可以在客户端进行代码管理，动态数据流需要被获取对应关系 以便客户端对服务端进行管理
• ssr所做的是将css样式和dom结构append到HTML的模板上，js文件可以在客户端后续进行引入执行
• 平衡客户端和服务端的性能，一般用于解决首屏问题，当然不能太多影响服务端性能