前端性能优化

网络环境 优化重点之一
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挂掉了。