搜车前端性能优化指南
发布在大搜车前端团队专栏2014年7月24日view:6485
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

优化指南

最近对首页做了一些前端性能和代码层面的优化,可以作为参考,大家平常多优化下自己负责的产品。

1.图标sprite合并,用开发工具的network查看可以合并的小图片,减少请求数。

2.图片延迟加载,首次加载的图片越少越好,例如首页所有banner和车辆图片的延迟加载,焦点图切换的延迟加载。

3.功能延迟初始化,模块脚本延迟加载,利用requirejs和Souche.Util.appear的配合实现滚动到某个地方的时候再按需加载脚本并初始化。例如:

//限时优惠的初始化
Souche.Util.appear(".timebuy", function() {
    require(['index/timedown'], function(downCounter) {
        $('.down-counter').each(function() {
            var $this = $(this);
            downCounter($this);
        });
    })
})
//求购模块的初始化,包含求购历史的初始化
Souche.Util.appear(".qiugou", function() {
    require(['index/qiugou'], function(QiuGou) {
        QiuGou.init(config);
    })
})
//生活车初始化
Souche.Util.appear(".carlife", function() {
    require(['index/carlife'], function(CarLife) {
        CarLife.init(config);
    })
})

4.文件合并,requirejs规范和合并,将js都放在页面最底部。css精简为两个文件(souche.css和页面的css)。后台用less管理css模块,js用requirejs管理,发布的时候自动打包。

requirejs 可以设置一个后缀为.rjs的配置文件,发布的时候发现此类配置文件就会自动按照配置打包涉及到的文件到一个js中。例如index的js:

<code>
({
  baseUrl: ".",
  name: "index",
  include: ["index/sidebar","souche/stats"],
  out: "index.r.js"
})
</code>

5.可以适当减少dom结构,有些不必第一次加载进来的大段的html,可以用异步加载,例如首页的品牌导航中的信息。

6.图片无损压缩,已经集成到发布工具中,发布的时候会自动对png jpg做无损压缩,不会损失画质。

7.http请求缓存。例如首页求购区域的品牌和车系的缓存,第一次请求成功后之后就会缓存下来,代码在souche/util/load-info.js中,以后要加载品牌和车系的都可以用这个js,依赖于sc-db.js(一个本地存储的小库)。

LoadInfo.loadBrands(function(data) {
    var html = "";
    data = brandSort(data.items);
    for (var i in data) {


    }
    brandSelect.addOptions(html)
})
LoadInfo.loadSeries(brandCode, function(data) {
    var html = "";

    for (var i in data.codes) {


    }
    seriesSelect.addOptions(html)
})

代码组织

css代码。通过less来组织一个页面的css,通过@import方法来把代码打包到一个统一的css中。前台看起来是一个css,后台其实已经模块化。

js代码。新代码尽量使用requirejs组织,然后用上面说的.rjs的配置文件的方式配置。不过在测试和正式环境,引用方式不同,可以参考首页的实现方式:

测试环境用分开的方式加载,正式环境引用打包过后的js

<c:if test="${requestScope.islocal!='true'}">
    <script type="text/javascript" src="<sc:res value="/assets/js/index.r.js"/>"></script>
    </c:if>
  <script>
    require(['index','index/sidebar','souche/stats'], function (Index){
      Index.init({
        <c:if test="${not empty views.recommendCars&&views.recommendCars.realNum>0}">
        has_qiugou:true
        </c:if>
        <c:if test="${not(not empty views.recommendCars&&views.recommendCars.realNum>0)}">
        has_qiugou:false
        </c:if>
      });
    });
  </script>

关于js的模块化,页面里尽量自己进行模块化,不要把一堆逻辑写在一块,适当模块化。

统一的模块,现在都放在souche文件夹下。后面会不断演变,可能会积累自己的框架或者功能库,也会积累自己的ui库。

例如souche下可以分util(工具类),ui(可复用的图形库)。大家可以多积累一些东西在这里,这会是我们公司前端的特色。不过要注意一定要写好文档和注释。

分析工具

在线分析:https://developers.google.com/speed/pagespeed/insights/?url=www.souche.com

一些指导原则比较老,不一定准确。

可以使用chrome插件:pagespeed,里面的指导原则比较新:

https://chrome.google.com/webstore/detail/gplegfbjlmmehdoakndmohflojccocli

截图:

enter image description here

评论
发表评论
5年前

@之乎者也 就是一个nodejs插件而已,不过需要配置环境支持

5年前

同求工具

5年前

图片无损压缩和grunt-contrib-imagemin一样吗?

5年前

6.图片无损压缩,已经集成到发布工具中,发布的时候会自动对png jpg做无损压缩,不会损失画质。 求分享下这个工具~~O(∩_∩)O~

5年前
    • test 回复~?
5年前

测试

WRITTEN BY
芋头
思考,去做,做好,做的比别人好
TA的新浪微博
PUBLISHED IN
大搜车前端团队专栏

大搜车(souche.com)前端团队的一些研究和总结性文章。欢迎订阅。

我的收藏