前端性能优化

网络环境 优化重点之一
DNS寻址
DNS之ip和域名之间相互转换
输入ip后自动转为域名，是作了一次301跳转
301:永久跳转 302：暂时跳转 304：浏览器缓存，图片缓存解决:在图片后面加参数如 ?v=20200101
DNS从右到左解析，最开始解析最后的.cn/.us

性能检测。webpagetest

加载顺序
渲染流程

本地js性能监测：
chrome://tracing/
页面性能分析：
www.webpagetest.com
加载方式三种：
同步加载：都加载完才能展现给用户看，如HTML，css。
分级加载：同步+异步相结合，先给用户加载重要信息好比Logo/核心功能，后面加载不重要的。
按需加载：用户不触发该功能咱们就不加载。或者用户不触发，可是带宽闲置，咱们再加载。

本地存储
SessionStorage: 临时存储神器，关闭页面标签自动回收，页面刷新不会被回收，不能够跨页面交互。
Cookie：兼容性最好，几乎全部的浏览器都支持。缺点是大小有限制。
localStorage:几乎全部浏览器都支持，数据存放在xxuser/AppData/Local/Google/ ..../Local Storage，大小限制约为5M.

openDatabase: 就是一个完整的数据库，使用起来跟mySQL没有区别。数据存放在xxuser/AppData/Google/Chrome/User Data/Default/databases目录下。
indexDB:
浏览器缓存JS文件的机制不透明。

bigpipe简介
占位--请求后填充

优化术语定义：
技术类：
首屏时间（加载到第一屏的功能点，要求可见可用，所消耗的时间点）
白屏时间：从进入页面到headbody解析的时间
可操时间：与模块相关，主要是测试核心模块的使用率，以及用户感知
连通率：多为视频站点。时间为纵轴，主要是对应时间用户看到视频或者听到声音的比例。

产品类：
pv一次访问一次pv
uv
day日活跃用户数量
Mau 月活用户人数
跳出率：跳出时间留下来的人/pv

经常使用图片优化方法：
图片很差的地方：占用带宽，图片自己与分辨率相关，不一样设备看到图片要求也不同。
页面中图片的加载效果：
有一种是加载先变模糊而后清晰，另外一种是很清晰，可是逐行加载显示。
其实他们的区别是压缩算法不同。模糊到清晰是小波算法，逐行显示是离散余弦变换，浏览器根据不一样图片选择不一样渲染算法。
备选技术：CSS效果、CSS动画，体积很小，提供与分辨率无关的效果。

CSS-Sprites工具：
http://alloyteam.github.io/gopng -- 腾讯 -- 简单好用，麻烦的地方是每次须要本身改图片，本身定位
http://fis.baidu.com/ -- 百度 -- 自动化

<picture></picture>标签，响应式图片设计。
<video></video>在不一样浏览器上UI有差异，可是支持自定义UI，隐藏video标签自己UI。

站点视频优化：
即便视频资源<video>标签放在图片资源<img>前面，浏览器会认为video是多媒体资源然后置，把video放在最后加载。
资源前置方法：在资源放在最前面用link标签方式预加载到内存，后面再用video标签去从内存读取。

高性能DOM：只能从避免触发repaint/reflow入手。

reflow（回流）: 根据各类样式计算全部元素的盒子模型，并放到相应位置。 -- 理解为计算盒子位置和安放盒子
当位置发生改变，不管是自身仍是兄弟元素发生改变，必定会发生回流。
repaint（重绘）:当页面中的盒子属性（位置、大小、颜色等）肯定下来后，浏览器便把盒子绘制一遍，因而页面内容出现了。-- 理解为绘制盒子长相
只要位置没有发生改变，只是所看到的页面自己视觉发生改变了，就必定会发生重绘。
回流必定触发重绘，可是重绘不必定触发回流。
DOM元素的添加、修改（内容）、删除会同时触发回流和重绘。

如何减小触发repaint/reflow:
如减小display属性修改次数，用document fragment合并屡次修改等。

Chrome Developer Tools查看重绘：
竖向三个点 -- More Tools -- Rendering -- 勾选Paint Flashing，这时浏览器重绘的部分就会高亮显示。

结语：编码实际上是填空题，80%的时间用来思考，10%的时间用来编码，10%的时间用来调优。性能优化最困难的地方是发现问题。性能优化不是单独前端领域就能解决问题。不少问题并非代码问题，多是外部环境如CDN挂掉了。