Threejs基本概念(六)加载器

JavaScript016

Threejs基本概念(六)加载器,第1张

Loader

FileLoader

FontLoader

ImageLoader

JSONLoader

Cache

缓存

MaterialLoader

ObjectLoader

TextureLoader

AnimationLoader

用于以JSON格式加载动画的类。

AudioLoader

加载

BufferGeometryLoader

用于加载BufferGeometry的装载器。这在内部使用FileLoader来加载文件。

MaterialLoader

用于以JSON格式加载素材的加载器

ObjectLoader

用于加载JSON资源的加载程序,此加载程序无法加载几何

TextureLoader

基类

CompressedTextureLoader

基于块的纹理加载器(dds,pvr,...)的抽象基类

CubeTextureLoader

立方体加载器

DataTextureLoader

抽象基类加载通用二进制纹理格式(rgbe,hdr,...)

MaterialLoader

用于以JSON格式加载素材的加载器

ObjectLoader

TextureLoader

BabylonLoader

.babylon

ColladaLoader

.dae

GLTF2Loader

.gltf

MTLLoader

.mtl资源的装载器 (材质)

OBJLoader

.obj资源的装载器 (3d对象)

OBJLoader2

.obj资源的装载器(3d对象)

WWOBJLoader2

用于在web worker中加载.obj资源的装载器。(3d对象)

PCDLoader

用于.pcd文件的加载程序。加载ascii和二进制。不支持压缩的二进制文件(3d对象)

PDBLoader

.pdb是geometryAtoms,geometryBonds和JSON结构。

SVGLoader

TGALoader

加载.tga文件 纹理的类。

《JavaScript开发框架权威指南》百度网盘pdf最新全集下载:

链接: https://pan.baidu.com/s/17SRPdiy6pRI4eyfQg-VY4Q

?pwd=gbvq 提取码: gbvq

简介:JavaScript开发框架quanwei指南涵盖了在开发过程中常用的各种JavaScript工具,以帮助读者在大量流行的JavaScript工具中做选择。全书分为16章,从开发工具、模块加载器、客户端框架、服务端框架数据库交互、通信、管理控制流和其他有用框架等几个方面,涵盖了Bower、Grunt、Yeoman、PM2、RequireJS、Browserify、Knockout、AngularJS、Kraken、Mach、Mongoose、Knex、Bookshelf、Faye、Q、Async.js、Underscore和 Lodash等框架和库。全书涵盖了客户端和服务器端的开发,通过细致的讲解、详细的代码示例,阐明了这些工具的用法。  

异步加载又叫非阻塞加载,浏览器在下载执行js的同时,还会继续进行后续页面的处理。主要有三种方式。

方法一:也叫Script DOM Element

但是这种加载方式执行完之前会阻止onload事件的触发,而现在很多页面的代码都在onload时还执行额外的渲染工作,所以还是会阻塞部分页面的初始化处理。

方法二:onload时的异步加载

这种方法只是把插入script的方法放在一个函数里面,然后放在window的onload方法里面执行,这样就解决了阻塞onload事件触发的问题。

注:DOMContentLoaded与load的区别。前者是在document已经解析完成,页面中的dom元素可用,但是页面中的图片,视频,音频等资源未加载完,作用同jQuery中的ready事件;后者的区别在于页面所有资源全部加载完毕。

方法三:其他方法

由于JavaScript的动态性,还有很多异步加载方法: XHR Injection、 XHR Eval、 Script In Iframe、 Script defer属性、 document.write(script tag)。

XHR Injection(XHR 注入):通过XMLHttpRequest来获取JavaScript,然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。

Script In Irame:在父窗口插入一个iframe元素,然后再iframe中执行加载JS的操作。

GMail Mobile:业内JS内容被注释,所以不会执行,在需要的时候,获取script中的text内容去掉注释,调用eval()执行。

HTML5新属性:async和defer属性

defer属性:IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注:所有的defer脚本必须保证按顺序执行的。

async属性:Html5新属性。脚本将在下载后尽快执行,作用同defer,但是不能保证脚本按顺序执行。他们将在onload事件之前完成。

Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async属性。可以同时使用async和defer,这样IE 4之后的所有IE都支持异步加载。

没有async属性,script将立即获取(下载)并执行,期间阻塞了浏览器的后续处理。如果有async属性,那么script将被异步下载并执行,同时浏览器继续后续的处理。

总结:

对于支持HTML5的浏览器,实现JS的异步加载只需要在script元素中加上async属性,为了兼容老版本的IE还需加上defer属性;对于不支持Html5的浏览器(IE可以用defer实现),可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码,你可以把它放在匿名函数中执行,也可以在onload中执行,也可以通过XHR注入实现,也可以创建一个iframe元素,然后在iframe中执行插入JS代码。

三:延迟加载

有些JS代码在某些情况在需要使用,并不是页面初始化的时候就要用到。延迟加载就是为了解决这个问题。将JS切分成许多模块,页面初始化时只加载需要立即执行的JS,然后其它JS的加载延迟到第一次需要用到的时候再加载。类似图片的延迟加载。

JS的加载分为两个部分:下载和执行。异步加载只是解决了下载的问题,但是代码在下载完成后就会立即执行,在执行过程中浏览器处于阻塞状态,响应不了任何需求。

解决思路:为了解决JS延迟加载的问题,可以利用异步加载缓存起来,但不立即执行,需要的时候在执行。如何进行缓存呢?将JS内容作为Image或者Object对象加载缓存起来,所以不会立即执行,然后在第一次需要的时候在执行。

1:模拟较长的下载时间:

利用thread让其sleep一段时间在执行下载操作。

2:模拟较长的JS代码执行时间

这段代码将使JS执行5秒才完成!

JS延迟加载机制(LazyLoad):简单来说,就是在浏览器滚动到某个位置在触发相关的函数,实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢?可以通过一个定时器来实现,通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断是否需要执行函数。