开发团队总结的五个黄金方案

从点击按钮开始载入网页，在用户的感知中，什么时候是“加载完成”？是首屏加载，即在可见的屏幕范围内，内容展现完全，loading进度条消失。因此在前端性能优化中，一个很重要的目的就是尽可能提升这个“首屏加载”的时间，我们可以从一下几点出发：

• 按需加载

根据需要加载所需的资源，而不是在首页加载全部的资源。比如说Require.js就可以在需要的时候加载js资源。

• 延迟加载

它是让屏幕外，或者不影响整体效果显示的图片、背景等资源，在界面就绪之后再进行网络加载。

• 滚屏加载

滚屏加载是一种常见的无刷新动态加载数据的方案，通常用在列表形式数据展示中。一方面，数据不是通过翻页进行加载，这样就避免了再一次请求和渲染整个页面；另一方面，数据显示的数量是受限的，例如第一次只请求了10条数据，也就只需要渲染这10条数据，下拉滚屏的时候，再去获得下面10条数据。

• Media Query（响应式加载）

响应式设计是现在网站设计的一个流行趋势，随着移动互联网的发展，这项技术也越来越受到重视。通过这项技术，我们能够方便地控制资源的加载与显示，例如说在分辨率不同的手机上，分别使用不同的css，加载不同大小的图片资源。

• Favicon.ico

如果我们没有设置图标icon，则会加载默认的图标：域名目录下的favicon.ico。很多开发者没有注意到这一点，就会导致这个请求404或者500。通常，我们在应用内部打开网页，不会显示这个图标出来（除非放到浏览器中显示网页），我们需要保证这个图标存在，尽可能地小（一般4KB以下），并且设置一个较长的缓存过期时间。

• 小图片合并

在html网页中，如果有多个小图片需要加载，不妨试试CSS Sprites（精灵图片）方案，尤其是一些基本不变，大小差不多的操作类型图标。它将多个小图拼成一张大图，通过css像素位置显示大图中的某一张小图，减少了众多小图片的请求。

• 避免DataURL

DataURL是用Base64的方式，将图片变成一串文本编码放入代码的方式。这种方式有好处，因为它可以减少一次http交互的请求，对于一些体积特别小的图片，或者是动态生成的图片可以考虑使用。

一般情况下，我们都是需要避免DataURL的，因为它的数据体积通常比二进制图片的格式大1/3，而且它不会被浏览器缓存，每次页面刷新都需要重新加载这部分数据。

• 使用图片的替代(css3, svg, iconfont)

CSS3和svg可以更好地使用GPU进行渲染加速，而且会避免增加图片资源导致的http请求增加。例如一些div的圆角效果，就完全可以用css来实现。

Iconfont，可以认为是一种矢量类型的操作字体。如果页面中有较多的操作图标，可以考虑使用iconfont来替代图片资源。

我们提供NodeJS的工具可将svg图标生成字体文件和预览html,可以直观的浏览图标和其样式id。

• js,css合并压缩

尽量将所有的js和css合并，减少资源请求的次数。

压缩合并后的代码，压缩后的大小可以降低至原来的1/3以下，有效节约流量。

• html优化

html优化除了可以压缩大小之外，还能自动解决一些代码规范上的问题，如未结束的tag,空元素等

• Gzip

服务端要开启Gzip压缩

• 资源缓存，长cache

合理设置资源的过期时间，尤其对一些静态的不需要改变的资源，将其缓存过期时间设置得长一些。

• 分域名部署

将动态资源和静态资源放置在不同的域名下，例如图片，放在自己特定的域名下。

这样的好处是，静态资源请求时，不会带上动态域名中所设置的cookie头信息，从而减少http请求的大小。

• CDN加速

部署CDN服务器，或者使用第三方的CDN加速服务，优化不同地域接入网站的带宽速度。

• 接口合并

如果页面需要请求两部分以上的数据接口，建议将其合并，否则会增加一次http请求。

• 减少接口数据量

有的时候，服务端会把一些无关紧要的数据返回回来，尤其是类似于更新时间、状态等信息，如果在客户端不影响内容的逻辑展示，不妨在接口返回的数据中直接去掉这些内容。

• 缓存

缓存接口数据，在一些数据新旧敏感性不高的场景下很有作用，在非首次加载数据时候优先使用上次请求来的缓存数据，可以让页面更加快速地渲染出来，而不用等待一个新的http请求结束之后再渲染。

以上就是笔者在日常项目开发过程中实践并总结的前端优化方案。目前我们的实践方向逐渐从Maven插件这类后端工具转向纯前端的工具链（NodeJS+Gulp）。

这套方案及工具链不仅在Web App上得到验证，而且也广泛的使用在H5混合式Mobile APP中，后续笔者将会介绍我们总结的前端工具链，敬请期待！