乐趣区

请说出静态资源请求的优化措施是否用过雪碧图和iconfont

减少 HTTP 请求

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

减少静态资源的体积
压缩静态资源:合并打包的 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 即可,真正的项目部署,有专业的实施人员来搞

使用缓存

退出移动版