前端性能优化
涉及的功能
一、资源的合并与压缩
1. 谷歌案例学习
- html压缩
- css压缩
- 无效代码删除
- css语义合并
- 在线网站或者其他工具
- js的压缩与混乱
- 删除回车等，剔除注释
- 代码语义缩短，变量名缩短，无用代码删除（代码保护）
- 文件合并
- 开启gzip
2. 图片相关的优化
- png8/png24/png32的区别
- png8：2^8(256）色+支持透明
- png24：2^24色+不支持透明
- png32 2^32色+支持透明
- 不同格式图片常见的业务场景
- jpg有损压缩，压缩率高，不支持透明
- png支持透明，浏览器兼容性好
- webp压缩率程度更好，在ios webview上有兼容性问题
- svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景
- 进行图片压缩
- 针对真是图片情况，舍弃掉一些相对无关紧要的色彩信息
- css雪碧图
二、一个网站在浏览器是如何渲染的？
html渲染过程中的一些特点
- 顺序执行，并发加载
- 是否阻塞
- css head中阻塞页面的渲染
- css 阻塞js的执行
- css 不阻塞外部脚本的加载
- 依赖关系
- 引入方式
三、懒加载和预加载
- 懒加载
- 图片进入可视区域之后请求图片资源
- 需要监听scroll事件，在scroll事件回调中，去判断懒加载图片是否进入到可视区域中。
- 对于电商等图片很多，业务很长的场景适用
- 减少无效资源的加载
- 并发加载资源过多会阻塞js的加载，影响网站的正常使用。
- 预加载
- 图片等静态资源在使用之前提前请求
- 资源使用时能从缓存中加载，提升用户体验
- 页面展示的依赖关系维护
四、重绘和回流
- 重绘
- 当render tree中的一些元素需要更新属性，而这些元素的属性只是会影响元素的外观、风格，而不影响布局的，比如background-color，则就叫做重绘。
- 回流
- 当render tree中的一部分（或者全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流（reflow）。
- 当页面布局和几何属性改变时就需要回流。
触发页面重布局的属性
- 盒子模型相关属性会触发重布局
- 定位属性及浮动会触发重布局
- 改变节点内部文字结构也会触发重布局
- width、heigth、top、bottom、left、rigth
- padding、margin、text-align、overflow-y
- overflow、font-weiweight
- dispaly、position、font-family
- border-width、float、line-height
- border、clear、vertail-align
- min-height、white-space、font-size
根据这些特效对页面进行优化
- 用translate代替top改变
- 用opacity代替visibility
- 不要一条一条的修改DOM的样式，预先定义好class、然后修改DOM的className
- 把DOM离线后修改，比如先把DOM给display:none(有一次reflow)，然后你修改100次，再给它显示出来。
- 不要把DOM节点的属性值放在一个循环里当做这个循环的变量
- 不要使用table布局，可能一个很小的改动会造成整个table的重新布局
- 动画实现的速度的选择
- 对于动画新建图层
- 启用CPU硬件加速
五、浏览器储存：localstorage、sessionstorage、cookie、indexdb的概念和使用
- cookie
- 因为http请求无状态，所以需要cookie去维护浏览器状态
- 过期时间expire
- cookie的生成方式
- http response header中的 set-cookie
- js中可以通过document.cookie可以读写cookie
- 仅仅作为浏览器储存（大小4kb，能力被localstorage代替）
- cookie在相关域名下面-cdn流量损耗
- httponly
- localstorage
- HTML5专门设计出来用于浏览器储存的
- 大小为5M左右
- 仅在客户端使用，不参与服务端通信
- 接口封装较好
- 浏览器本地储存方案
- 需要主动去清除
- sessionStorage
- indexdb（用的少）
- indexdb是一种低级API，用于客户端储存大量机构化数据。该API使用检索来实现对该数据的高性能搜索。
- 虽然webStorage对于储存少量的数据很有用，但对于储存更大量的机构化数据来说，这种方法不太有用。indexDB提供了一种解决方案。
- 为应用创建离线版本
六、缓存
七、服务端优化
- 构件层模板编译
- 数据无关的prerender的方式
- 服务端渲染
其他......
