提高网页渲染速度的实用技巧

减少资源体积，让页面轻装上阵

打开一个网页，最怕的就是转圈加载。尤其是用手机流量访问的时候，图片还没出来，已经感觉浪费了几秒钟。其实很多慢，是因为资源太大。比如一张未经压缩的图片可能有几MB，换成 WebP 格式后，往往能缩小一半以上。

可以使用工具提前压缩图片，或者在服务器端开启自动转换。例如 Nginx 配合 image filter 模块，按需生成小图：

location ~* \.(jpg|png)$ {
    set $webp_suffix "";
    if ($http_accept_encoding ~ "webp") {
        set $webp_suffix ".webp";
    }
    if (-f $request_filename$webp_suffix) {
        add_header Vary Accept-Encoding;
        rewrite (.*) $1$webp_suffix break;
    }
}

合理加载 CSS 和 JavaScript

CSS 放头部，JS 放底部，这是老经验，但依然管用。浏览器解析 HTML 是从上到下的，如果 JS 文件放在前面，它会阻塞后续内容的渲染，用户就只能盯着空白等。

更进一步，可以把非关键 CSS 提取出来，用异步方式加载。比如首屏只需要布局和标题样式，其他轮播、评论区的样式可以稍后载入。使用媒体查询或动态插入就能实现：

<link rel="stylesheet" href="common.css" media="print" onload="this.media='all'">

利用浏览器缓存机制

用户第二次打开你的页面时，其实没必要再下载一遍所有文件。设置合适的缓存策略，能让静态资源直接从本地读取。比如给带哈希名的 JS 文件设置长期缓存：

Cache-Control: public, max-age=31536000, immutable

而 HTML 文件则保持短缓存或不缓存，确保内容更新能及时生效。这样既快又稳。

服务端启用 Gzip 压缩

文本类资源像 HTML、CSS、JS，压缩后通常能减少 60% 以上的体积。只要在服务器配置里打开 Gzip，几乎不花成本就能提速。以 Nginx 为例：

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml;

别小看这个开关，对移动端用户特别友好，省流量还加载快。

预加载关键资源

有些资源虽然不在首屏，但你知道一定会用到，比如主字体文件或核心 JS。可以用 <link rel="preload"> 提前告诉浏览器：“这个很重要，赶紧下。”

<link rel="preload" href="main.js" as="script">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

这样浏览器不会等到解析到才开始下载，节省了等待时间。

简化 DOM 结构

页面嵌套太多层 div，不仅写起来累，浏览器渲染也慢。深层级的结构会让重排重绘更频繁。尽量保持扁平化，用语义化标签替代无意义包裹。比如一个按钮不需要五层 div 套着，两层足够。

少一点冗余代码，多一点清晰结构，页面自然跑得更快。