腳本預載入
⑴ 資源預載入preload、資源預讀取prefetch
preload 提供了一種聲明式的命令，讓瀏覽器提前載入指定資源(載入後並不執行)，需要執行時再執行
這樣做的好處在於：
1、將載入和執行分離開，不阻塞渲染和document的onload事件
2、提前載入指定資源，不再出現依賴的font字體隔了一段時間才刷出的情況
簡單的例子：
其中：
預載入：
實際執行：
除了使用link標簽靜態標記的方式來預載入資源之外，還可以以腳本化的方式動態創建標簽，執行這些預載入操作
預載入：
執行：
使用 preload 後，不管資源是否使用都將提前載入。若不確定資源是必定會載入的，則不要錯誤使用 preload，以免本末導致，給頁面帶來更沉重的負擔
沒有用到的 preload 資源在 Chrome 的 console 里會在 onload 事件 3s 後發生警告
它的作用是告訴瀏覽器載入下一頁面可能會用到的資源，注意，是下一頁面，而不是當前頁面。因此該方法的載入優先順序非常低，也就是說該方式的作用是加速下一個頁面的載入速度
參考：
通過rel="preload"進行內容預載入
資源預載入preload和資源預讀取prefetch簡明學習
⑵ 淺談angular2路由預載入策略
1.問題描述
在沒有使路由懶載入的時候，第一次使用的時候載入特別慢，影響用戶體驗，angular2可以使用loadChildren進行懶載入，第一次使用的時候只會載入需要的模塊，其它模塊在真正使用的時候才會去載入，這個時候打開瀏覽器控制台查看js載入的時候，會發現你在使用時候會去載入對應的js，導致第一次點擊相應模塊的功能時會卡頓一下，後面在使用就不會了，這樣還是用戶體驗不好，接下來告訴你如果使用預載入策略解決這個問題。
2.預載入策略
RouterMole.forRoot的第二個添加了一個配置選項，這人配置選項中就有一個是preloadingStrategy配置，當然它還有其它配置，這里只講preloadingStrategy，這個配置是一個預載入策略配置，我們需要實現一個自己的預載入策略，在一些不需要預載入的場景加我們可以不配置，首先我們新建一個selective-preloading-strategy.ts的文件，使用class實現PreloadingStrategy介面的preload方法，代碼如下：
import
{
PreloadingStrategy,
Route
}
from
"@angular/router";
import
{
Observable
}
from
"rxjs";
/**
*
預載入策略
*/
export
class
SelectivePreloadingStrategy
implements
PreloadingStrategy
{
preload(route:
Route,
load:
Function):
Observable<any>
{
//當路由中配置data:
{preload:
true}時預載入
return
route.data
&&
route.data
&&
route.data['preload']
?
load()
:
Observable.of(null);
}
}
上面的意思很簡單，當你在路由中配置了data:
{preload:
true}參數後，這裡面的策略就返回一個load()，表示需要預載入，如果沒有配置就不進行預載入，當然你也可以反過來，默認是預載入，只在配置不需要預載入的時候不載入，就像我的github上的一樣，自己靈活運用。
接下來，在在路由中加入策略，也就是RouterMole.forRoot中的配置，代碼如下：
import
{
NgMole
}
from
'@angular/core';
import
{
RouterMole,
Routes
}
from
'@angular/router';
import
{SelectivePreloadingStrategy}
from
"./selective-preloading-strategy";
import
{
LoginComponent
}
from
'./login/login.component';
import
{
MainComponent
}
from
'./main/main.component';
/**
*
app路由
*/
const
routes:
Routes
=
[
{
path:
'',
redirectTo:
'/login',
pathMatch:
'full'
},
{
path:
'login',
component:
LoginComponent
},
{
path:
'app',
component:
MainComponent,
loadChildren:
'app/main/main.mole#MainMole',
data:
{preload:
true}
}
];
export
const
appRoutes=RouterMole.forRoot(routes,{preloadingStrategy:
SelectivePreloadingStrategy});
還需要在AppMole的providers添加，代碼如下：
/**
*
app模塊
*/
@NgMole({
imports:
[
appRoutes,
BrowserMole,
BrowserAnimationsMole,
NgbMole.forRoot(),
MainMole,
LoginMole
],
declarations:
[
AppComponent,
ToastBoxComponent,
ToastComponent,
SpinComponent
],
providers:
[AppService,ToastService,HttpService,SpinService,SelectivePreloadingStrategy],
exports:[ToastBoxComponent,SpinComponent],
bootstrap:
[
AppComponent
]
})
export
class
AppMole
{}
接下來在路由中使用，代碼如下：
import
{
NgMole,
OnInit
}
from
'@angular/core';
import
{
RouterMole,
Routes,
Router
}
from
'@angular/router';
/**
*
主體路由
*/
const
routes:
Routes
=
[
{
path:
'home',
loadChildren:
'app/home/home.mole#HomeMole',
data:
{preload:
true}
},
{
path:
'demo',
loadChildren:
'app/demo/demo.mole#DemoMole',
data:
{preload:
true}
},
];
export
const
mainRoutes
=
RouterMole.forChild(routes);
打開瀏覽器F12，查看js的載入，你會發現，當頁面載入完後，會預載入其它模塊的js
官網上有一個默認實現PreloadAllMoles
，自行參考官網說明。
具體代碼到我的github上找，https://github.com/332557712/cc
。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
⑶ win7系統出現開機出現載入腳本失敗是什麼原因
進開始－運行－msconfig－啟動項，看看合理載入腳本失敗的程序相關的啟動項是哪個，把前面的鉤去掉，重啟即可。一般是卸載軟體美卸載干凈引起的，使用一些注冊表清理工具清理下也有可能有用。
⑷ requirejs怎樣預載入腳本
很明顯只能是 在底部代碼執行前載入依賴文件。可以考慮將底部代碼也用require載入，並放在依賴文件之後，並放在 window.onload=function(){ 這里 }