1、性能优化的指标和工具
1-1、为什么要进行web性能优化
1-2、性能指标和优化目标
1-3、RAIL测量模型
1-4、使用WebPageTest评估Web网站性能
webPageTest 网址
1-5、使用LightHouse分析性能
安装
npm install lighthouse
使用
例如： 访问b站网站：
lighthouse http://www.bilibili.com，自动打开一个空白页面
最终在本地生成一个测试报告：
找到并打开测试报告分析性能指标：
1-6、使用Chrome DevTools分析性能
1-7、常用的性能测量APIs
DNS 解析耗时: domainLookupEnd - domainLookupStart
TCP 连接耗时: connectEnd - connectStart
SSL 安全连接耗时: connectEnd - secureConnectionStart
网络请求耗时 (TTFB): responseStart - requestStart
数据传输耗时: responseEnd - responseStart
DOM 解析耗时: domInteractive - responseEnd
资源加载耗时: loadEventStart - domContentLoadedEventEnd
First Byte时间: responseStart - domainLookupStart
白屏时间: responseEnd - fetchStart
首次可交互时间: domInteractive - fetchStart
DOM Ready 时间: domContentLoadEventEnd - fetchStart
页面完全加载时间: loadEventStart - fetchStart
http 头部大小： transferSize - encodedBodySize
重定向次数：performance.navigation.redirectCount
重定向耗时: redirectEnd - redirectStart
// 计算一些关键的性能指标
window.addEventListener('load', (event) => {
// Time to Interactive
let timing = performance.getEntriesByType('navigation')[0];
console.log(timing.domInteractive);
console.log(timing.fetchStart);
let diff = timing.domInteractive - timing.fetchStart;
console.log("TTI: " + diff);
})
// 页面可见性的状态监听
let vEvent = 'visibilitychange';
if (document.webkitHidden != undefined) {
// webkit prefix detected
vEvent = 'webkitvisibilitychange';
}
function visibilityChanged() {
if (document.hidden || document.webkitHidden) {
console.log("Web page is hidden.")
} else {
console.log("Web page is visible.")
}
}
document.addEventListener(vEvent, visibilityChanged, false);
2、渲染优化
2-1、浏览器渲染原理和关键渲染路径
2-2、回流与重绘, 如何避免布局抖动
2-3、使用FastDom
fastdom 可以用来避免布局抖动
2-4、复合线程与图层
2-5、避免重绘
2-6、高频事件防抖
2-7、React时间调度实现
3、代码优化
3-1、JS开销和如何缩短解析时间
3-2、配合V8 有效优化代码
3-3、函数优化
3-4、对象优化
3-5、HTML优化
3-6、CSS对性能的影响
4、资源优化
4-1、资源的压缩与合并
4-2、图片格式优化
4-3、图片加载优化
4-4、字体优化
5、构建优化
5-1、webpack的优化配置
5-2、webpack的依赖优化
5-3、基于webpack的代码拆分
5-4、手把手教你做webpack的资源压缩
5-5、基于webpack的持久化缓存
5-6、基于webpack的应用大小监测与分析
5-7、React按需加载的实现方式
6、传输加载优化
6-1、启用压缩Gzip
mac 安装 ngnix
安装 homebrew, 官网地址
- 安装（可以用 brew 安装）
sudo brew install nginx
- 查看 nginx 版本
nginx -v
- 启动 nginx
sudo nginx
也可以使用下面的命令启动，但是配置文件nginx.conf修改后用这个命令执行不生效，故不建议使用：
sudo brew services start nginx
image
- 查看 nginx 是否启动成功
在浏览器中访问http://localhost:8080，如果出现如下界面，则说明启动成功.
image
备注：端口号是在配置文件 nginx.conf 里面配置的，默认端口是 8080 ，配置文件的位置 /usr/local/etc/nginx
- 关闭nginx
sudo nginx -s stop
也可以使用下面的命令启动，但是配置文件nginx.conf修改后用这个命令执行不生效，故不建议使用：
sudo brew services stop nginx
- 重新加载nginx
sudo nginx -s reload
- 可能遇到的问题
端口被占用
nginx: [emerg] bind() to 0.0.0.0:80 failed (48: Address already in use)
解决方法：修改 nginx.conf 文件里的端口号
权限不够
nginx: [alert] could not open error log file: open() “/usr/local/var/log/nginx/error.log” failed (13: Permission denied)
解决方法：在命令前加上 sudo，这时可能会要求输入密码，密码就是电脑的开机密码啦~
cd /usr/local/cellar/nginx/1.12.1/bin➜ bin sudo brew services start nginxbin chmod a+x ./nginxchmod: Unable to change file mode on ./nginx: Operation not permitted//将nginx文件添加权限➜ bin sudo chmod a+x ./nginx➜ bin sudo ./nginxnginx: [emerg] getgrnam("root") failed in /usr/local/etc/nginx/nginx.conf:2//修改nginx.conf文件，然后重新启动nginx➜ 1.12.1 cd bin➜ bin sudo ./nginx➜ bin sudo nginx -s reload➜ bin sudo nginx -s stop
- 补充
安装 homebrew ，将以上命令粘贴至terminal，然后回车即可
/usr/bin/ruby -e "$(curl -fsSL raw.githubusercontent.com/Homebrew/in…)"
常用的指令有：
nginx-s reload 重新加载配置nginx-s reopen 重启nginx-s stop 停止nginx-s quit 退出nginx-V 查看版本，以及配置文件地址nginx-v 查看版本nginx-c filename 指定配置文件nginx-h 帮助
nginx.conf 配置gzip：
gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/xml text/javascript application/json;
gzip_static on;
gzip_vary on;
gzip_buffers 4 16k;
gzip_http_version 1.1;
