當前位置:首頁 » 編程軟體 » 腳本預載入

腳本預載入

發布時間: 2022-12-06 17:29:00

⑴ 資源預載入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(){ 這里 }

熱點內容
qq上傳照片在哪裡 發布:2023-01-29 11:40:22 瀏覽:565
賓士新c級推薦哪個配置 發布:2023-01-29 11:34:58 瀏覽:307
快手直播伴侶安卓版怎麼使用 發布:2023-01-29 11:31:20 瀏覽:55
資訊社區源碼 發布:2023-01-29 11:30:58 瀏覽:463
車機系統外置存儲8g是什麼水平 發布:2023-01-29 11:27:18 瀏覽:966
恆溫孵化如何配置設備 發布:2023-01-29 11:25:23 瀏覽:941
監控密碼怎麼設置 發布:2023-01-29 11:17:50 瀏覽:323
安卓下載需要認證怎麼設置 發布:2023-01-29 11:16:03 瀏覽:957
升級了怎麼返回安卓系統 發布:2023-01-29 11:13:14 瀏覽:141
戰神伺服器的地址是什麼 發布:2023-01-29 11:11:28 瀏覽:468