title: The first screen optimized series (a) date: 2018-6-23 13:53:30 tags:
- Promise
- Pictures lazy loading
- Routing lazy loading categories: front-end
Optimization means eight hundred and eighteen times used in the project, as well as their knowledge derived from them. Since this project is more complex, more modules, (certainly better than large electric providers website), there are eight home request, and after the streamlining, the slightest mistake, black and white phenomenon will be very serious. Experience poor. Classification module partition 1. ## 2. Home rotation 4. FIG. 3. Collect the number 6. The number of cases for later display the main content display 7. Display 8. The cooperation mechanismDescription of Requirement: Optimizing the fold load speed and reduce the time black and white.
Which is located in the fold is 4, 5, 6 also for showing on the big screen.
Optimization methods
Skeleton Screen (skeleton screen)
In simple terms, skeleton screen when the page content is not loaded, first using some placeholder graphics, content to be loaded and then replace it after completing the swap. Experience the effect that, before the page is fully rendered, the user will see a simple style, depicting the general framework of the current page, the page can perceive is gradually loaded, each occupying part of the final screen skeleton is completely replaced. Display as follows:
Routing lazy loading
The different components corresponding to the route is divided into different blocks of code, when the route is accessed, and then load the corresponding components of medium and large projects, it will seem very efficient for developers, but also easy to maintain. But here to do the production and development environments distinction, because if the project is very large, each time you change the code to trigger the hot update time will be very long, so the only route lazily in a production environment.
// 生产环境 _import_production.js
module.exports = file => () => import('@/pages/' + file + '.vue');
// 开发环境 _import_development.js
module.exports = file => require('@/pages/' + file + '.vue').default; // vue-loader at least v13.0.0+
// router.js中引用
const _import = require('./_import_' + process.env.NODE_ENV);
{
path: 'course',
component: _import('course/index'),
name: 'course'
}
Pictures lazy loading (vue-lazyload)
// 安装
npm install vue-lazyload --save-dev
// 使用 main.js
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
Vue.use(VueLazyload, {
preLoad: 1.8,
error: require('@/assets/lazy/error.png'),
loading: require('@/assets/lazy/loading.png'),
attempt: 1,
listenEvents: ['scroll']
});
new Vue({
el: 'body',
components: {
App
}
});
// 在使用图片的地方加上v-lazy即可
<img v-lazy="img.src" >
More use can refer vue-lazyload results presented here is that the request is complete data, go to request pictures of Ali cloud storage, at this stage, the image resource loading process, display the status of loading, loaded, display pictures, if image loading failure, failure to display a picture.
Promise
Back to our original question, the course home page of the number of requests was 8, requests are asynchronous requests, and our browser to the number of requests under the same domain is limited, than to limit the number of requests will be blocked, browse to Google 6 concurrent requests an amount of, for example, home course of data requests and requests add up to hundreds of pictures above, we have made a request for a picture processing, use lazy loading, in addition, on the request and data under different domains, we need to consider is the data request, currently eight, so I did a test, if you issue the same time, it is probably time for each request is 50ms, when each time you send a request for a separate time, every requests the requested time about a dozen milliseconds, so I had the solution is to use setTimeOut, delayed request to do so, I need to test individual time for each request, and then write the delay time for them, so efficiency is very low of. In addition, with the execution priority than the promise, setTimeOut will be reduced, and later adopted a promise of way, as follows:
return new Promise((resolve,reject) => {
})
Another reason for using this approach is that, if all asynchronous requests triggered simultaneously, then the browser will assign priority to perform for them, and this way, the order of requests in the order in our call. The browser allocation, it may request the bottom of the page will be executed first. In the case of a request less, reflected this difference is not significant.
Mentioned promise, I think the biggest advantage is its design as the original intention as to solve the problem of the layers of the callback (difficult to maintain, and not elegant) - chained calls, as well as Promise.all () usage, for a combination of data is very convenient.
Browser cache (localStorage)
For done infrequently modified data cache, and a frequency conversion according to different cache times.
if (cacheTime < 0) cacheTime = 3600000;
var result = { data: response.data, expiration: new Date().getTime() + cacheTime };
localStorage.setItem(cacheName, JSON.stringify(result));
Detailed caching method, has been uploaded to github: Go to View
PageSpeed Tools
This tool can be downloaded from Google's plug-in store, easy to use, can list all the points to be optimized. The picture prompted local issues, such as the use of browser cache, you need to set etag and expire time on the server. The time can be used to load test
console.time('加载时间');
console.timeEnd('加载时间');
Reference article:
- Website performance optimization combat - from the story of 1.06s to 12.67s
- Event Loop On
- JavaScript works in Eleven - rendering engine and performance optimization tips
- Based on how the Vue SPA optimize page load speed
- Add to screen skeleton vue project
- Browsers allow concurrent requests resources are limited - Analysis
- Metamorphosis of static resources and update the cache is still just a slag slag, the above is just my personal understanding, if insufficient, please also indicate, be grateful.