js中加載分兩種：預加載與延遲加載
一、 預加載，增強用戶的體驗，但會加載服務器的負擔。一般會使用多種 CSS(background)、JS(Image)、HTML(<img />) 。
1、什么是預加載
提前加載圖片，當用戶需要查看時可直接從本地緩存中渲染
2、實現預加載的方法
a、單純的css 實現
可通過CSS的background屬性將圖片預加載到屏幕外的背景上。只要這些圖片的路徑保持不變，當它們在Web頁面的其他地方被調用時，瀏覽器就會在渲染過程中使用預加載（緩存）的圖片。簡單、高效，不需要任何JavaScript。
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
b、單純的js預加載圖片
<div class="hidden">
<script type="text/javascript">
<!--//--><![CDATA[//><!--
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"http://domain.tld/gallery/image-001.jpg",
"http://domain.tld/gallery/image-002.jpg",
"http://domain.tld/gallery/image-003.jpg"
)
//--><!]]>
</script>
</div>
c、使用ajax實現預加載
window.onload = function() { setTimeout(function() { // XHR to request a JS and a CSS var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://domain.tld/preload.js'); xhr.send(''); xhr = new XMLHttpRequest(); xhr.open('GET', 'http://domain.tld/preload.css'); xhr.send(''); // preload image new Image().src = "http://domain.tld/preload.png"; }, 1000); };
參考網址：http://web.jobbole.com/86785/
二、延遲加載（懶加載）
1、什么是懶加載
懶加載又稱延遲加載。
當訪問一個頁面時，先把img元素或者其他元素的背景圖片替換成一張大小1*1px圖片的路徑（只需要請求一次的占位圖），只有當圖片出現在瀏覽器的可視區域內時，才設置圖片真正的路徑，讓圖片顯示出來，這就是圖片的懶加載。
2、懶加載的實現原理
頁面中img元素，如果沒有src屬性，瀏覽器就不會發出請求去下載圖片，只有通過js設置圖片路徑，瀏覽器才會發送請求；
懶加載的原理是先在頁面中把所有的圖片統一使用一張占位圖進行占位，把真正的路徑存在元素的‘data-url’屬性中，要使用的時候，在設置。
3、懶加載的實現步驟
1)首先，不要將圖片地址放到src屬性中，而是放到其它屬性(data-original)中。
2)頁面加載完成后，根據scrollTop判斷圖片是否在用戶的視野內，如果在，則將data-original屬性中的值取出存放到src屬性中。
3)在滾動事件中重復判斷圖片是否進入視野，如果進入，則將data-original屬性中的值取出存放到src屬性中。
4、懶加載的優點
頁面加載速度快、可以減輕服務器的壓力、節約了流量,用戶體驗好
三、懶加載與預加載的對比
1、概念
懶加載也叫延遲加載：js圖片延遲加載，延遲加載圖片或者符合某些條件是才加載某些圖片；
預加載：提前加載圖片，當用戶需要查看時可直接從本地緩存中渲染。（base64小圖片可以通過css保存）
2、區別
兩種技術的本質：兩者的行為相反，一個是提前加載，一個是遲緩甚至不加載。懶加載會對前端有一定的緩解壓力作用，預加載則會增加前端的壓力。
3、懶加載的意義及實現方式：
懶加載的主要目的是優化前端性能，減少請求數或延遲請求數。
方法：
a、純粹的延遲加載，使用setTimeOut或者setInterval 進行加載延遲；
b、條件加載，符合某些條件，或者觸發了某些事件才開始異步下載；
c、可視區加載，即僅加載可以看到的區域，監控滾動條實現。
4、預加載的意義及實現方式
預加載是犧牲前端性能，換取用戶體驗，使用戶的操作得到最快的反映。
方法：
比如：用CSS和JavaScript實現預加載；僅使用JavaScript實現預加載；使用Ajax實現預加載。
常用的是new Image();設置其src來實現預載，再使用onload()方法回調預加載完成事件。只要瀏覽器吧圖片下載到本地，src就會使用緩存，這是最基本的預加載方法。當image下載完圖片后，會得到寬和高，因此可以在預加載錢得到圖片的大小(方法是用記時器輪循寬高變化)。
function loadImage(url,callback) { var img = new Image(); img.src = url; if(img.complete) { // 如果圖片已經存在於瀏覽器緩存，直接調用回調函數 callback.call(img); return; // 直接返回，不用再處理onload事件 } img.onload = function(){ img.onload = null; callback.call(img); } }
參考網址：https://blog.csdn.net/YiDaShi33/article/details/54316126
四、vue中的懶加載
vue中的延遲加載是通過webpack代碼拆分組件實現的。
在vue中，有3塊不同的延遲加載和代碼拆分，使用動態導入：
a、組件，又稱為異步組件
b、路由器
c、vuex模塊
1、 vue組件的延遲加載
通過將import函數包裝到箭頭函數中，Vue將僅在請求時執行它，並在該時刻加載模塊。
Vue.component('AsyncCmp', () => import('./AsyncCmp'))
2、vue路由器中的延遲加載
vue路由器內置支持延遲加載。假設我們想在/login 路由中延遲加載一個Lgin 組件
// Instead of: import Login from './login' const Login = () => import('./login') new VueRouter({ routes: [ { path: '/login', component: Login } ] })
3、延遲加載vuex模塊
Vuex有一種registerModule方法可以讓我們動態創建Vuex模塊。
const store = new Vuex.Store() ... // Assume there is a "login" module we wanna load import('./store/login').then(loginModule => { store.registerModule('login', loginModule) })
參考網址：https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/