01 performance 性能优化--方法-网站

//1 下载Lighthouse 性能检测工具
//2 精简资源 合并 压缩 css js webpack gulp 项目构建工具
//3 利用分布式缓存 3种
//4 减少不必要的二次请求 js代码检测工具
//5 分割js代码 减少因js文件过大 加载时间过长 vue.js react angular
//6 图片优化网络图片转化本地资源 精灵图 base64 GIF 转化成mp4 资源体积(FFmpeg -i animation.gig -b:v 0 -crf 40 -vf scale=600:-1 video.mp4) FFmpeg工具
//7 图片替换视频资源 if(navigator.connection.effectiveType){}
//8 使用懒加载库 import lazysizes from ‘lazysizes’ 导入 lazysizes.js
//
//<img class=‘lazyload’ data-sizes=‘auto’ data-src=‘image.jpg’ data-sreset='image1.jpg 300w,image2.jpg 600w ,image3.jpg 900w/>
//9 手动添加资源加载的优先级
//
//
//
//
//fetch(‘api/related.json’,{importance:‘low’})
//fetch(‘api/related.json’,{importance:‘auto’})
// https://www.zachleat.com/web/recipes/ 字体网址 font-display:swap
//10 性能优化 Guess.js
//hiper工具查看页面加载时间

yslow 性能检测工具https://github.com/marcelduran/yslow
make 下载 https://cmake.org/download/

网站资源下载测试:http://www.webkaka.com/webCheck.aspx
网站全球:http://www.freespeedtest.com/
谷歌pagespeed 性能测试:https://developers.google.com/speed/pagespeed/insights/