前端性能优化的常用手段

关注

转载最新推荐文章于 2026-08-04 11:06:54 发布 286 阅读 AI 写同款· GEO 优化 ›

2025上海前端面试遇到问题整理从小公司到大公司各种面试整理（高频题目出现）持续更新中想在 2025 年前端面试中脱颖而出？别再盲目刷题啦！这里有超实用的“2025 前端高频面试题，亲身经历”分享。每一道题都源自真实面试场景，涵盖 React、Vue 框架应用、性能优化、Webpack 与 Vite 区别等核心要点。不仅能让你熟悉高频考点，更能从答题思路、技巧中掌握应对面试的方法。无论是初出茅庐的新手，还是想跳槽加薪的资深开发者，这份经验分享都能为你助力，让你在面试中自信满满，轻松斩获心仪 offer！阅读详情

反正，前端性能优化就是很重要，不好好学习怎么进阶到20K+的薪水啊？！

性能优化方面一直有所关注，但如果不去对自己所负责的项目进行一下回锅，实践实践，优化优化，总会有点“书上得来终觉浅”的感觉吧！

从最开始的CSS放到<head>里面、js放到</body>前面、使用雪碧图等，到后面的静态资源压缩、合并以及使用iconfont代替小图标，再到最近实践的gzip压缩、设置HTTP Header缓存字段…

gzip压缩、设置ETag等，早就在《高性能网站建设指南》那两本书中看过，但我一直认为这都是后端小伙伴干得事，就没有怎么留意过。直到最近，对前后端分离的理解越来越充分，对整个项目的部署越来越清晰，对项目里面的资源请求越来越明白，才恍然意识到：前后端分离了，这他妈就是前端自己干的事啊！！！

从以下几个方面来说一说自己实践过的优化方法：

浏览器渲染页面的过程

所谓优化，第一个要弄明白的就是：优化什么、从哪里优化。前端做出来的页面是在浏览器里面呈现的，那浏览器是怎么渲染这个页面的呢？遇到CSS、js静态资源，浏览器是怎么处理的？具体的过程这里不再赘述，网上资源一大堆，我自己之前也写过一篇，《网站性能优化—CRP》，算是谷歌文档的翻译版吧。

理解了浏览器渲染页面的过程，也就明白了：CSS为什么要放到<head>里面、js放到</body>前面，以及js的异步加载（async、defer）等优化。

减少HTTP请求

CSS/JS 合并打包
小图标等用iconfont代替：作为单个DOM节点使用，可以设置大小、颜色等，非常便利。个人建议前端来维护这个字体包，每次有新增的图标，让设计师给我们对应的svg文件即可，前端自己去 icomoon.io/ 这个网站，导入原来的selection.json文件，增量生成新的css，无比方便。之前，我一直以为iconfont只能是单色的呢，其实也可以是多色的，svg里面多一些path而已，设计师会搞定的。生成字体后，前端正常引用即可（引用的时候，多色字体会多一些标签）
使用base64格式的图片：有些小图片，可能色彩比较复杂，这个时候再用iconfont就有点不合适了，此时可以将其转化为base64格式（不能缓存），直接嵌在src中，比如webpack的url-loader设置limit参数即可
~~使用雪碧图：设置背景图尺寸大小，感觉很麻烦，而且雪碧图的维护也不怎么便利，好像使用率越来越低了，都被iconfont取代了~~

减少静态资源的体积

压缩静态资源：合并打包的js、css文件体积一般会比较大，一些图片也会比较大，这个时候必须要压缩处理。前后端分离项目，不论是gulp还是webpack，都有相应的工具包。针对个别图片，有时候也可以单独拿出来处理，我个人经常使用这个网站 tinypng.com/ 在线压缩
编写高效率的CSS：涉及到代码层面的优化比较多也比较细，不同水平的技术人员写出来的肯定不一样，这里不做进一步的分析。但是为什么要把CSS拿出来说一说呢？因为现在项目里面基本上都在使用CSS预处理器，Less、SaaS、Stylus等等，这导致了某些初级前端的滥用：嵌套5、6层，甚者能达到7、8层，吓死个人！嵌套这么深，影响浏览器查找选择器的速度不说，这也一定程度上产出了很多冗余的字节，这个要改、要提醒，一般建议嵌套3层即可。关于编写高效率的CSS，推荐一篇文章，《Writing efficient CSS selectors》
服务端开启gzip压缩：大招，最近刚知晓，真是太牛逼了，一般的css、js文件能压缩60、70%，当然，这个比率可以设定的。前后端分离，如果前端部署用node、express作服务器的话，使用中间件compression即可开启gzip压缩：
```
// server.js
var express = require('express');
var compress = require('compression');
var app = express();
app.use(compress());复制代码
```
对于一般的SPA项目，如果node服务器的作用比较简单，比如只是做个接口转发之类的，很多人更倾向用Nginx作服务器，Nginx在转发接口、压缩、缓存等功能上更胜一筹。不过，大部分前端对Nginx应该陌生一些，为了实践技术，用熟悉的node即可，真正的项目部署，有专业的实施人员来搞。