代码

代码位置：CSS和JS互相阻塞

内联JS写最前此外 CSS前（避免白屏、闪烁）JS后

chrome 无论css于head还是body 都白屏

firefox head内-白屏 body内-闪烁

代码拆分

JS-不同维度 CSS-不同维度

runtime    reset/normalize

vendor     vendor

common     commom

page       page

图片懒加载 例文

<img src='placeholder.png' data-src='a.png' >

window.onscroll=
    findImgs().each  img
           new Image();
            .src = img.dataset.src;
            .onload   
                   imgs.src = img.dataset.src

DNS预解析

index.html的标签

<link rel="dns-prefetch" href="https://example.com/" >

index.html的响应头

Link: <https://example.com/>; rel=dns-prefetch

连接复用 & 并发连接(主要是HTTP1.1下)

请求头添加
Connection: keep-alive （HTTP1.1 已自动加）
附加选项-以服务器返回为准
KeepAlive:timeout=5,max=20

设置不同Domian提高TCP连接数量

同Domain下TCP链接达到上限后会尝试复用已返回结果的链接

HTTP/2

Server Push 但存在文件列表困境

Nginx
location = / {
...
    http2_push /style.css;
    http2_push /examp.png;
}

Nginx
location = / {
...
    http2_push-preload on;
}
index.html 响应头里
Link: </style.css>;rel=preload;as=style

Web性能优化

代码

DNS预解析

连接复用 & 并发连接(主要是HTTP1.1下)

HTTP/2