通用手段和工具
- 压缩图片和代码
npm install -g minifier html-minify
minify -o styles.min.css styles.css
minify -o jquery.min.js jquery.js
- 按编码压缩 请求 head Accept-Encoding=gzip，服务器返回 head Content-Encoding=gzip 进行回应
npm install compression // node.js压缩中间件，支持 deflate 和 gzip
以上是在 Node 服务器端用的。如果 web 服务器是 ng 或 Apache、iis，按各自工具的指南配置。
mp3、mp4、gif 压缩后可能会更大，在具体应用中可以避开他们。据说 JPEG、PNG，以及 WOFF 和 WOFF2 字体也会，但没有发现。
- Chrome 的 Performance 面板
- 蓝色——网络相关事件
- 黄色——与 JavaScript 相关的事件
- 紫色——渲染
- 绿色——绘制
使用 console.timeStamp("Modal open."); 在时间线上放置一个标记，方便定位问题。
- USB 真机调试 chrome://inspect#devices
实测成功：iphone8 ios12、MacOS Mojave 10.14.6 1. 手机：设置-safari-高级-打开 Web 检查器 2. 手机：打开任意网站 3. 电脑： 开发-xxx 的 iphone-你要调试的网站
实测成功：vivo 手机 chrome 浏览器（手机自带的没有成功）、win10，且 pc 版本需低于手机 1. 手机：开发者选项-打开开发者选项、打开 usb 调度、选择 usb 配置-midi 2. 电脑：可以看到连接的设备和网站（当 pc 版本需低于手机，才会出现 inspect fallback，否则仅有 inspect，而 inspect 需要翻墙） 3. 手机：chrome 打开任意网站
安卓机 USB 真机调试参见 https://www.jianshu.com/p/7c142ba59c21
手机浏览器不能是无痕模式
CSS
以移动端为主，向 PC 兼容，因为目前移动端为流量大于 PC
善用变量，DRY 原则
link （执行顺序）优于 @import
伪类、兄弟、属性选择器 性能不好
Flex 性能比盒子模型快近 5 倍
will-change 属性优化过渡（用来优化 transition，不易用）
Preload 在不支持的浏览器里可以使用 loadcss hack 一下
Prefetch 是闲时加载
原则：
(1) 设置网站在本地机器上的运行环境；(2) 在每个临界点（mydevice.io）中识别首屏 CSS；(3) 将首屏 CSS 和其余 CSS 分离，并将首屏 CSS 内联到 HTML；(4) 使用 preload 加载网站其余 CSS，使其不会阻塞渲染。
-
mydevice.io 查看常用设备（或当前设备）分辨率表。还能看当前浏览器对一些 css3、html5 的支持情况、user-agent 等
-
loadcss 的另一种写法
<link rel="preload" href="..." as="style" onload="this.rel='stylesheet'" /><noscript><link rel="stylesheet" href="..." /></noscript> -
Js 内联到 head 的 script 里可以在页面渲染前执行（计算手机 H5 时的页面抖动）
图片
有缩放的图片比无缩放，渲染和绘制时间长
<img src="img/amp-xsmall.jpg"
srcset="img/amp-small.jpg 512w, img/amp-medium.jpg 768w, img/amp-large.jpg 1280w"
sizes="(min-width: 704px) 50vw, (min-width: 480px) 75vw, 100vw">
<picture>
<source media="(min-width:650px)" srcset="/i/photo/flower-4.jpg">
<source srcset="/i/photo/tulip.jpg">
<img src="/i/photo/flower.gif" alt="Flowers">
</picture>
- img 标签：srcset="url 1x|25w"；x 为像素密度（可以理解为反倍数，0.5x = 2 倍图），w 与 sizes 配合使用（40w sizes="20px" = 2 倍图）
- picture 标签：img 必须有
- 上两项：除了 ie 支持还可以
- SVG：矢量图和支持 html 解析是优点，但不支持缓存（以 img 标签引入是可以缓存的）、大 svg 性能不好!!!
-
svg 雪碧图
cnpm i -g svg-sprite -
svg 压缩
cnpm i -g svgo -
非矢量图压缩
cnpm i imageminimagemin-jpegtran压缩 jpg，不如 https://tinypng.comimagemin-pngquant压缩 png，比 https://tinypng.com 要好 -
图片懒加载，lazyload
javascript
-
document.onreadystatechange 页面加载状态改变:
loading 正在加载
document 仍在加载
interactive 可交互，文档已解析，图片还在加载
complete 完成，全部加载完成，window.onload 即将触发
-
requestAnimationFrame js 动画，比 settimeout 效率高很多
-
简单介绍了 serviceWorker（维护一张资源列表，列表未全部缓存则弃用缓存，以保证缓存的完美体验）
-
正则（非本书内容）
// (?=) (?:) 等，括号为必须 > 'Windows2000'.replace(/(95|98|NT|2000)/g, '__$1') < "Windows__2000" > 'Windows2000'.replace(/(?:95|98|NT|2000)/g, '__$1') < "Windows__$1" > 'Windows2000'.replace(/(?=95|98|NT|2000)/g, '__') < "Windows__2000" > 'Windows2000'.replace(/(?<=95|98|NT|2000)/g, '__') < "Windows2000__" > 'Windows2000'.replace(/(?!95|98|NT|2000)/g, '__') < "__W__i__n__d__o__w__s2__0__0__0__" > "1234567890".replace(/(?=(\d{3})+$)/g,',') < "1,234,567,890"
压缩和缓存
压缩方式除了 gzip 还有 Brotli，大部分浏览器于 17 年开始支持，它压缩后更小，对 cpu 压力差不多，且提供了比 gzip 更高的压缩级别（gzip 为 0-9，br 为 0-11，10-11 会比 9 小的多，但对 cpu 的压力也大的多）
引外，还可以使用compression-webpack-plugin之类的在打包时压缩好（生成.gz 文件），这样就不用 NG 之类的工具耗费 CPU 实时压缩了（NG 通过配置 gzip_static 属性来实现优化返回.gz 文件，没有再通过源文件实时压缩）
Cache-Control: max-age=1000 | no-cache | no-store | stale-while-revalidate=36000
-
no-cache 可以存储（为 304 做准备），但必须重新校验
-
no-store 不存储，必须重新下载
-
stale-while-revalidate 一段时间内使用缓存优先，新下载的内容更新缓存
-
private 不要保存在 CDN 上，仅在浏览器仅与服务器交互
etag: 基于文件生成的校验码（If-None-Match）。 expires: 具体时间。 last-modified: 最后修改时间（If-Modified-Since）。
Cache-Control 与 Expires 的作用基本一致，但后者受客户端时间影响。
etag 与 last-modified 都是在为 304 做准备，两者共用时服务器先验证 ETag，再比较 last-modified。
http2
http1 的问题
-
队首阻塞，常见的优化方法有 域名分片、代码合并为一个文件（雪碧图）
一次处理的请求个数有限制，6 个？但在 Chrome 91.0.4472.164 中并没有看到这个限制，或许我找的不对？Queued 时间和 Started 时间一样才算一次处理？ -
关于压缩，是不压缩请求头的，cookie 之类的会话数据会在所有请求和响应中占据带宽。
-
非强制 ssl 的安全性问题。
http2
-
通讯结构：一个连接包含多个双向流、一个流里有多个请求，使用帧分隔。
-
HPACK 算法：可压缩头部、通过建立表来删除重复头部。
-
强制 ssl
-
服务器推送：添加响应头
Link: </css/styles.min.css>; rel=preload; as=style，不要和预加载混淆，这是需要在服务器配置的，如 ng、apache 或 node -
向下兼容：规范要求当浏览器不支持 2 时，自动降级到 1
对于优化：
-
资源适量拆分：因为请求成本更低（并非没有），适量拆分比一味捆绑对请求速度、缓存更友好。
-
不建议使用内联资源和雪碧图：内联资源效率低下（如 svg、base64 图片），雪碧图优势不再明显，且都不利于缓存。
关于 caniuse，它支持与 Google Analytics（谷歌版本百度统计）联动，查看所有受访者对 http2 的支持情况，不确定是否支持分析其它统计数据
Gulp
npm install -g gulp-cli
npm show gulp version
npm install gulp --save
<!-- 基本插件 终端输出 清理构建 浏览器自刷新 -->
npm install gulp-util del gulp-livereload gulp-ext-replace --save
npm install gulp-htmlmin
npm install gulp-less gulp-postcss autoprefixer --save
<!-- 国内很少用吧 -->
npm install autorem cssnano --save
<!-- js 压缩，连接为一个文件 -->
npm install gulp-uglify gulp-concat --save
npm install gulp-imagemin imagemin-webp imagemin-jpeg-recompress imagemin-pngquant imagemin-gifsicle imagemin-svgo --save
</pre>
gulpfile
import gulp from "gulp";
import util from "gulp-util";
import htmlmin from "gulp-htmlmin";
import livereload from "gulp-livereload";
function minifyHTML() {
return (
gulp
// 查找文件
.src("src/**/＊.html")
// 输出给htmlmin处理
.pipe(htmlmin())
// 保存到本地dist文件夹
.pipe(gulp.dest("dist"))
// 浏览器重载
.pipe(livereload())
);
}
gulp.task(minifyHTML);
util.log("...");
this.emit("end");
function watch() {
livereload.listen();
gulp.watch("src/**/＊.html", minifyHTML);
}
gulp.task("default", watch);
// 打包，parallel 并行任务，series 串行任务
gulp.task(function clean() {
return del(["dist"]);
});
gulp.task(
"build",
gulp.parallel(
minifyHTML,
buildCSS,
uglifyJS,
imageminMain,
imageminWebP,
gulp.series(uglifyJS, concatJS)
)
);
SEO(非本书内容)
-
向外链添加
rel=“noopener”或rel=“noreferrer”以提高性能并防止安全漏洞。nofollow 搜索引擎不要收录
noreferrer 隐藏引用者信息
noopener 修复 window.opener 安全漏洞，外链可以访问打开者并影响其性能
-
html 添加 lang，img 添加 alt
-
Cumulative Layout Shift 累计布局偏移(CLS)：原因有 无尺寸图片、Ads、iframes、embeds，动态注入内容，Web 字体导致 FOIT/FOUT，更新 DOM 之前等待网络响应的操作
手机的 CLS 值很大，图片没大小会导致的慢网络下页面上下来回跳
总阻塞时间很大，需要把不需要的拿掉，比如不用的样式、组件、包(eleui)
网友评论