LazyLoad优化

-
-# Created by https://www.gitignore.io/api/node,webstorm,netbeans,sublimetext,vim
-
-### Node ###
-# Logs
-logs
-*.log
-npm-debug.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules
-jspm_packages
-
-# Optional npm cache directory
-.npm
-
-# Optional REPL history
-.node_repl_history
-
-
-### WebStorm ###
-# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
-# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
-.idea/
-# User-specific stuff:
-.idea/workspace.xml
-.idea/tasks.xml
-.idea/dictionaries
-.idea/vcs.xml
-.idea/jsLibraryMappings.xml
-
-# Sensitive or high-churn files:
-.idea/dataSources.ids
-.idea/dataSources.xml
-.idea/dataSources.local.xml
-.idea/sqlDataSources.xml
-.idea/dynamic.xml
-.idea/uiDesigner.xml
-
-# Gradle:
-.idea/gradle.xml
-.idea/libraries
-
-# Mongo Explorer plugin:
-.idea/mongoSettings.xml
-
-## File-based project format:
-*.iws
-
-## Plugin-specific files:
-
-# IntelliJ
-/out/
-
-# mpeltonen/sbt-idea plugin
-.idea_modules/
-
-# JIRA plugin
-atlassian-ide-plugin.xml
-
-# Crashlytics plugin (for Android Studio and IntelliJ)
-com_crashlytics_export_strings.xml
-crashlytics.properties
-crashlytics-build.properties
-fabric.properties
-
-### WebStorm Patch ###
-# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
-
-# *.iml
-# modules.xml
-
-
-### NetBeans ###
-nbproject/private/
-build/
-nbbuild/
-dist/
-nbdist/
-nbactions.xml
-.nb-gradle/
-
-
-### SublimeText ###
-# cache files for sublime text
-*.tmlanguage.cache
-*.tmPreferences.cache
-*.stTheme.cache
-
-# workspace files are user-specific
-*.sublime-workspace
-
-# project files should be checked into the repository, unless a significant
-# proportion of contributors will probably not be using SublimeText
-# *.sublime-project
-
-# sftp configuration file
-sftp-config.json
-
-
-### Vim ###
-# swap
-[._]*.s[a-w][a-z]
-[._]s[a-w][a-z]
-# session
-Session.vim
-# temporary
-.netrwhist
-*~
-# auto-generated tag files
-tags
-
-### VS Code ###
-.vscode/
-
-### YOHO ###
-public/dist/
-public/css/*
-public/bundle/*
-.eslintcache
-*.log.*
-nbproject/*
-.DS_Store
+
+# Created by https://www.gitignore.io/api/node,webstorm,netbeans,sublimetext,vim
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+
+### WebStorm ###
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+.idea/
+# User-specific stuff:
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/dictionaries
+.idea/vcs.xml
+.idea/jsLibraryMappings.xml
+
+# Sensitive or high-churn files:
+.idea/dataSources.ids
+.idea/dataSources.xml
+.idea/dataSources.local.xml
+.idea/sqlDataSources.xml
+.idea/dynamic.xml
+.idea/uiDesigner.xml
+
+# Gradle:
+.idea/gradle.xml
+.idea/libraries
+
+# Mongo Explorer plugin:
+.idea/mongoSettings.xml
+
+## File-based project format:
+*.iws
+
+## Plugin-specific files:
+
+# IntelliJ
+/out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+### WebStorm Patch ###
+# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
+
+# *.iml
+# modules.xml
+
+
+### NetBeans ###
+nbproject/private/
+build/
+nbbuild/
+dist/
+nbdist/
+nbactions.xml
+.nb-gradle/
+
+
+### SublimeText ###
+# cache files for sublime text
+*.tmlanguage.cache
+*.tmPreferences.cache
+*.stTheme.cache
+
+# workspace files are user-specific
+*.sublime-workspace
+
+# project files should be checked into the repository, unless a significant
+# proportion of contributors will probably not be using SublimeText
+# *.sublime-project
+
+# sftp configuration file
+sftp-config.json
+
+
+### Vim ###
+# swap
+[._]*.s[a-w][a-z]
+[._]s[a-w][a-z]
+# session
+Session.vim
+# temporary
+.netrwhist
+*~
+# auto-generated tag files
+tags
+
+### VS Code ###
+.vscode/
+
+### YOHO ###
+public/dist/
+public/css/*
+public/bundle/*
+.eslintcache
+*.log.*
+nbproject/*
+.DS_Store
+.devhost

@@ -22,6 +22,7 @@ const session = require('express-session');
 const memcached = require('connect-memcached');
 const hbs = require('express-handlebars');
 const pkg = require('./package.json');
+const devtools = require('./doraemon/middleware/devtools');
 
 const app = express();
 const MemcachedStore = memcached(session);
@@ -40,6 +41,10 @@ global.doraemon = path.resolve('./doraemon');
 
 const logger = global.yoho.logger;
 
+if (app.locals.devEnv) {
+    app.use(devtools());
+}
+
 app.set('view engine', '.hbs');
 app.set('views', './doraemon/views');
 app.engine('.hbs', hbs({

@@ -15,9 +15,9 @@
             (function(d,c){var e=d.documentElement,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;if(!f){return}if(f>=750){e.style.fontSize="40px"}else{e.style.fontSize=40*(f/750)+"px"}};if(!d.addEventListener){return}b();c.addEventListener(a,b,false);d.addEventListener("DOMContentLoaded",b,false)})(document,window);
         </script>
         {{#if devEnv}}
-            <link rel="stylesheet" media="all" href="//localhost:5004/css/index.css">
+            <link rel="stylesheet" media="all" href="//{{devHost}}:5004/css/index.css">
             {{#unless noLocalCSS}}
-            <link rel="stylesheet" media="all" href="//localhost:5004/{{module}}.{{page}}.css">
+            <link rel="stylesheet" media="all" href="//{{devHost}}:5004/{{module}}.{{page}}.css">
             {{/unless}}
         {{^}}
             <link rel="stylesheet" href="//cdn.yoho.cn/yohoblk-wap/{{version}}/index.css">
@@ -32,9 +32,9 @@
         </div>
 
         {{#if devEnv}}
-            <script src="//localhost:5004/libs.js"></script>
+            <script src="//{{devHost}}:5004/libs.js"></script>
             {{#unless noLocalJS}}
-            <script src="//localhost:5004/{{module}}.{{page}}.js"></script>
+            <script src="//{{devHost}}:5004/{{module}}.{{page}}.js"></script>
             {{/unless}}
         {{^}}
             <script src="//cdn.yoho.cn/yohoblk-wap/{{version}}/libs.js"></script>

@@ -11,7 +11,7 @@ const brandListBox = require('channel/brand-list-box.vue');
 
 require('common/vue-filter')(Vue);
 
-Vue.use(lazyload);
+Vue.use(lazyload, { preLoad: 3 });
 
 new Vue({
     el: '#brand-list',

@@ -4,7 +4,7 @@ const cateRes = require('channel/cate-resource-box.vue');
 
 require('common/vue-filter')(Vue);
 
-Vue.use(lazyload);
+Vue.use(lazyload, { preLoad: 3 });
 
 new Vue({
     el: '#cate-resource',

@@ -6,7 +6,7 @@ const channel = require('channel/index.vue');
 
 require('common/vue-filter')(Vue);
 
-Vue.use(lazyload);
+Vue.use(lazyload, { preLoad: 3 });
 Vue.use(infinitScroll);
 
 new Vue({

@@ -5,7 +5,7 @@ const sidebar = require('channel/sidebar.vue');
 
 require('common/vue-filter')(Vue);
 
-Vue.use(lazyload);
+Vue.use(lazyload, { preLoad: 3 });
 
 new Vue({
     el: '#sidebar',

@@ -7,6 +7,7 @@
 
 module.exports = (Vue) => {
     Vue.directive('lazy-html', function(html) {
+        // TODO 首屏幕不使用
         html = html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, '<img v-lazy="\'$1\'">');
         this.el.innerHTML = html;
         this.vm.$compile(this.el);

@@ -4,7 +4,7 @@ const directive = require('common/vue-directive');
 const app = require('editorial/detail.vue');
 
 require('common/vue-filter')(Vue);
-Vue.use(lazyload);
+Vue.use(lazyload, { preLoad: 3 });
 Vue.use(directive);
 
 new Vue({

@@ -8,7 +8,7 @@ const Vue = require('vue');
 const lazyload = require('vue-lazyload');
 const infinitScroll = require('vue-infinite-scroll');
 
-Vue.use(lazyload);
+Vue.use(lazyload, { preLoad: 3 });
 Vue.use(infinitScroll);
 require('common/vue-filter')(Vue);
 

@@ -17,4 +17,4 @@ new Vue({
     }
 });
 
-Vue.use(lazyload);
+Vue.use(lazyload, { preLoad: 3 });

@@ -5,6 +5,6 @@ const exchange = require('me/exchange.vue');
 
 require('common/vue-filter')(Vue);
 
-Vue.use(lazyload);
+Vue.use(lazyload, { preLoad: 3 });
 
 new Vue(exchange);

@@ -5,7 +5,7 @@ const refund = require('me/refund.vue');
 
 require('common/vue-filter')(Vue);
 
-Vue.use(lazyload);
+Vue.use(lazyload, { preLoad: 3 });
 
 new Vue({
     el: '#refund',

@@ -4,7 +4,7 @@ const directive = require('common/vue-directive');
 const app = require('product/detail/index.vue');
 
 require('common/vue-filter')(Vue);
-Vue.use(lazyload);
+Vue.use(lazyload, { preLoad: 3 });
 Vue.use(directive);
 
 new Vue({

@@ -10,8 +10,9 @@ const lazyload = require('vue-lazyload');
 const shareBox = require('product/shop/share-box.vue');
 
 require('common/vue-filter')(Vue);
-
-Vue.use(lazyload);
+Vue.use(lazyload, {
+    preLoad: 3
+});
 
 new Vue({
     el: '#share',

@@ -9,7 +9,9 @@ const lazyload = require('vue-lazyload');
 const infinitScroll = require('vue-infinite-scroll');
 
 require('common/vue-filter')(Vue);
-Vue.use(lazyload);
+Vue.use(lazyload, {
+    preLoad: 3
+});
 Vue.use(infinitScroll);
 
 const shopBox = require('product/shop/shop-box.vue');

@@ -18,7 +18,7 @@
         </ul>
         <p class="cardlist--loading text-center" v-show="inLoading">正在加载...</p>
         <p class="cardlist--end text-center" v-show="atEnd ">--End--</p>
-        
+
         <div class="empty-tip" v-show="empty">
             <i class="icon icon-search"></i>
             <p class="empty-tip-cn">未找到相关商品</p>
@@ -31,7 +31,7 @@
     const lazyload = require('vue-lazyload');
     const infinitScroll = require('vue-infinite-scroll');
 
-    Vue.use(lazyload);
+    Vue.use(lazyload, { preLoad: 3 });
     Vue.use(infinitScroll);
 
     let bus = require('common/vue-bus');

@@ -23,7 +23,7 @@
 
     let locationQuery = qs(decodeURIComponent(location.search.replace(/^\?/, '')));
 
-    Vue.use(lazyload);
+    Vue.use(lazyload, { preLoad: 3 });
     Vue.use(infinitScroll);
     require('common/vue-filter')(Vue);
 

@@ -21,7 +21,7 @@
 
     let locationQuery = qs(decodeURIComponent(location.search.replace(/^\?/, '')));
 
-    Vue.use(lazyload);
+    Vue.use(lazyload, { preLoad: 3 });
     Vue.use(infinitScroll);
     require('common/vue-filter')(Vue);
 

@@ -18,7 +18,7 @@
     const order = require('component/product/order.vue');
     const list = require('component/product/list.vue');
 
-    Vue.use(lazyload);
+    Vue.use(lazyload, { preLoad: 3 });
     Vue.use(infinitScroll);
 
     require('common/vue-filter')(Vue);

 <template>
-    <top-bar :share-data="shareData"></top-bar>
+    <top-bar :share-data="shareData" :show-top-bar="showTopBar"></top-bar>
+
     <shop-top :shop-info="shopInfo"></shop-top>
     <div :class='{"shop-goods-top": !shopInfo.isBlkShop}'>
         <goods-list :data="productList" :empty="empty"></goods-list>
     </div>
     <filter :config="filterConfig" v-ref:filter></filter>
+    <div id="timer" style="position: fixed; z-index: 100; bottom: 0">{{timer}}</div>
 </template>
 <style>
     #shop {
@@ -34,9 +36,10 @@
             return {
                 shareData: {}, // 分享相关数据
                 shopInfo: {}, // 店铺介绍相关数据
-
+                timer: 0,
                 sortConfig: {},
                 filterConfig: {},
+                showTopBar: false,
 
                 // query
                 url: '/product/shop/goods.json',
@@ -73,7 +76,7 @@
             /* 获取店铺简介相关数据 */
             getShopInfo() {
                 $.get({
-                    async: false,
+                    // async: false,
                     url: '/product/shop/info.json',
                     data: {
                         domain: $shop.data('domain'),
@@ -103,6 +106,8 @@
                     } else {
                         this.shopInfo.showBrandInfo = false;
                     }
+
+                    this.showTopBar = true;
                 }).fail(() => {
                     tip('网络出错~');
                 });
@@ -177,6 +182,11 @@
                 self.$set('filter', val);
                 self.$refs.filter.isVisible = false;
             });
+        },
+        init() {
+            setInterval(()=> {
+                this.timer = new Date().getTime();
+            }, 1)
         }
     };
 

 <template>
-    <cheader :title="title" :class="{ghost: shareData.isBlkShop}" :fixed="shareData.isBlkShop" v-ref:header>
-        <template slot="right" v-on:scroll="">
-            <span v-if="shareData.isBlkShop" v-show="shareData.isFav" class="icon" @click="collectShop()">&#xe60d;</span>
-            <span v-if="shareData.isBlkShop" v-show="!shareData.isFav" class="icon" @click="collectShop()">&#xe60c;</span>
-            <span v-if="shareData.isBlkShop" class="icon" @click="goShare()">&#xe60e;</span>
-            <span class="icon" @click="showFilter()">&#xe60b;</span>
-        </template>
-    </cheader>
+    <div :style="{display: topBarDisplay}">
+        <cheader :title="title" :class="{ghost: shareData.isBlkShop}" :fixed="shareData.isBlkShop" v-ref:header>
+            <template slot="right" v-on:scroll="">
+                <span v-if="shareData.isBlkShop" v-show="shareData.isFav" class="icon" @click="collectShop()">&#xe60d;</span>
+                <span v-if="shareData.isBlkShop" v-show="!shareData.isFav" class="icon" @click="collectShop()">&#xe60c;</span>
+                <span v-if="shareData.isBlkShop" class="icon" @click="goShare()">&#xe60e;</span>
+                <span class="icon" @click="showFilter()">&#xe60b;</span>
+            </template>
+        </cheader>
+    </div>
 </template>
 
 <style>
@@ -30,8 +32,9 @@
         },
         props: {
             shareData: {
-                type: Object
-            }
+                type: Object,
+            },
+            showTopBar: false
         },
         computed: {
             title() {
@@ -42,6 +45,9 @@
                 }
 
                 return result;
+            },
+            topBarDisplay() {
+                return this.showTopBar ? 'block' : 'none';
             }
         },
         components: {