脚本预加载
⑴ 资源预加载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(){ 这里 }