减少HTTP请求CSS/JS合并打包小图标等，替换成iconfont：可以作为单个DOM节点使用，可以设置大小，颜色等，非常方便。个人建议前端维护这个字体包。每次有新的icon，只要让设计师给我们对应的svg文件就可以了。前端自己去icomoon.io/网站，导入原来的selection.json文件，增量生成新的css，极其方便。之前一直以为iconfont只能是单色的，其实也可以是多色的。svg中的路径更多，设计师会处理它。字体生成后，前端可以正常引用（引用时，多色字体会有更多标签）。使用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作为服务端，使用中间件压缩开启gzip压缩：//server.jsvarexpress=require('express');varcompress=require('compression');varapp=express();app.use(compress());复制代码对于一般的SPA项目，如果节点服务器的作用比较简单，比如只是做一个接口转发，很多人更喜欢用Nginx作为服务器。Nginx在转发接口、压缩、缓存等功能上更胜一筹。不过大多数前端应该对Nginx比较陌生。为了练习技术，你可以使用熟悉的节点。真正的项目部署，专业的实现者会使用缓存
