资源的合并与压缩css
做用html
1.减小http请求数量
2.减小请求资源的大小
复制代码
1.html压缩
2.css压缩
3.js的压缩和混乱
4.文件合并
5.开启gzip
复制代码
请求过程当中一些潜在的性能优化点？
dns是否能够经过缓存减小dns查询时间？
网络请求的过程走最近的网络环境？
相同的静态资源是否能够缓存？
可否减小请求http请求大小？
减小http请求？
服务端渲染？
复制代码
png8: 256色+支持透明
png24: 2^24色+不支持透明
png32: 2^24色+支持透明
复制代码
1.jpg有损压缩，压缩率高，不支持透明不须要透明图片的业务场景）
2.png支持透明，浏览器兼容好（须要透明图片的业务场景）
3.webp压缩程度更好，在ios webview有兼容性问题（安卓所有）
4.svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景（图片样式相对简单的业务场景）
复制代码
1、懒加载
1.图片进入可视区域以后请求图片资源
2.对于电商等图片不少，页面很长的业务场景适用
3.减小无资源的加载
4.并发加载的资源过多会阻塞js的加载，影响网站的正常使用
2、预加载
1.图片等静态资源在使用以前的提早请求
2.资源使用到时能从缓存中加载，提高用户体验
3.页面展现的依赖关系维护
复制代码
回流：当render tree中的一部分（或所有）由于元素的规模尺寸，布局，隐藏等改变而须要从新构建，当页面布局和几何属性改变时就须要回流。
重绘：当render tree的一些元素须要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，好比background-color。
回流必将引发重绘而重绘不必定会引发回流
复制代码
1.盒子模型相关属性会触发重布局
2.定位属性及浮动也会触发重布局
3.改变节点内部文字结构也会触发重布局
复制代码
1.获取DOM后分割为多个图层
2.对每一个图层的节点计算样式结果（Recalculate style--样式重计算）
3.为每一个节点生成图形和位置（Layout--回流和重布局）
4.将每一个节点绘制填充到图层位图中（Paint Setup和Paint--重绘）
5.图层做为纹理上传至GPU
6.符合多个图层到页面上生成最终屏幕图像（Composite Layers--图层重组）
复制代码
1.用translate替代top改变
2.用opacity替代visibility
3.不要一条一条地修改DOM的样式，预先定义好class，而后修改DOM的className
4.把DOM离线后修改，好比：先把DOM给display:none（有一次Reflow）,而后你修改100次，而后再把它显示出来
5.不要把DOM结点的属性值放在一个循环里当成循环里的变量
6.不要使用table布局，可能很小的一个小改动会形成整个table的从新布局
7.动画实现的速度的选择
8.对于动画新建图层
9.启用GPU硬件加速
复制代码
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
复制代码
1.HTML5设计出来专门用于浏览器存储的
2.大小为5M左右
3.仅在客户端使用，不和服务端进行通讯
4.接口封装较好
5.浏览器本地缓存方案
复制代码
1.会议级别的浏览器存储
2.大小为5M左右
3.仅在客户端使用，不和服务端进行通讯
4.接口封装较好
5.对于表单信息的维护
复制代码
1.IndexedDB是一种低级API，用于客户端存储大量结构化数据。该API使用索引来实现对该数据的高性能搜索。虽然WebStorage对于存储较少许的数据颇有用，但对于存储更大量的结构化数据来讲，这种方法不太有用。IndexedDB提供了一个解决方案。
2.为应用建立离线版本。
复制代码
PWA(Progressive Web Apps)是一种Web Apps新模型，并非具体指某一种前沿的技术或者某一个单一的知识点，咱们从英语缩写来看，这是一个渐进式的Web App，是经过一系列新的Web特性，配合优秀的UI交互设计，逐步的加强Web App的用户体验。
1.可靠性：在没有网络的环境中也能提供基本的页面访问，而不会出现"未链接到互联网"的页面。
2.快速性:针对网页渲染及网络数据访问有较好优化。
3.融入性：应用能够被增长到手机桌面，而且和普通应用同样有全屏、推送等特性。
4.lighthouse
复制代码
Service Worker是一个脚本，浏览器独立于当前网页，将其在后台运行，为实现一些不依赖页面或者用户交互的特性打开了一扇大门。在将来这一些特性将包括推送消息，背景后台同步，geofencing（地理围栏定位），但它将推出的第一个首要特性，就是拦截和处理网络请求的能力，包括以编程方式来管理被缓存的响应。
应用：
1.使用拦截和处理网络请求的能力，去实现一个离线应用。
2.使用Service Worker在后台运行同时能和页面通讯的能力，去实现大规模
复制代码