按需加载JS

JavaScript无非就是script标签引入页面，但当项目越来越大的时候，单页面引入N个js显然不行，合并为单个文件减少了请求数，但请求的文件体积却很大。这时候比较合理的做法就是按需加载。按需加载和按需执行JS比较类似，只不过要执行的JS变成了固定的“实现加载JS”的代码。按需加载实现的思路如下：

• 对滚动条进行事件绑定,假设绑定的函数为function lazyLoadJS(){};
• 在函数lazyLoadJS中，按照下面思路实现：选择一个元素作为参照物，当滚动条即将靠近时该元素位置，开始执行加载对应JS；
•  在JS加载完毕后，开始执行相应的函数来渲染界面；
• 在实际项目中，可以根据需要设置一个目标距离，比如还有200像素该元素即将进入可视区域；按需加载JS和按需执行JS比较类似，这里就不再单独提供示例代码了；大家可以在按需执行JS的中示例中，把loadAD函数更改为动态加载JS即可；

分屏展示

当一个网页比较长，有好几个屏幕，而且加载了大量的图片、广告等资源文件时，分屏展示，可提升页面性能和用户体验。其实分屏展示也可以从按需加载的的角度来看待，默认是加载第一屏幕的内容，当滚动条拉动即将到达下一个屏幕时，再开始渲染下个屏的内容。换言之，是把图片、背景图片、HTML一起按需加载，一开始不对HTML进行解析，那么背景图、img图片也不会进行加载。

分屏展示的思路如下：

•  根据具体业务情况，收集主流最大的分辨率的高度；假设这里是用960px;
•  按照这个高度进行分屏，依次把下一个屏幕内的HTML用来表示；
•  为了让页面的高度不变，需要让textarea占据一定的页面空间，也就是让页面出现对应的滚动条；因此需要指定样式visility:hidden，并指定它的高度和宽度。
• 利用上述讲的按需执行JS，把里面的HTML代码提取出来，重新填充到textarea的父节点上，便可实现解析对应HTML，从而实现分屏展示。

示例代码如下（需要把页面和Y.asyncScrollLoader.js 放在同一个目录）：

运行上面代码并抓包发现：在默认首屏，并没有去解析textarea里面的代码，但当拉动滚动条到一定位置时，textarea里面的HTML依次被解析，从而实现了网页分屏展示。

使用“按需加载”进行性能优化时，需要合理选择触发的动作。“按需加载”的最大优势在于减少了不必要的资源请求，节省流量，真正实现“按需所取”。但是“按需加载”本身如果使用不当也会影响用户体验，因为“按需加载”的时机在用户触发某动作之后，如果用户的网速比较慢的话，加载脚本或执行脚本可能需要等候较长的时间，而用户则不得不为此付出代价。因此，如果要使用“按需加载”则需要选择正确的触发动作，如果是根据滚动条来触发，可考虑一个目标距离，假设目标距离还有200像素即将进入可视区域，则就开始加载，而不是等到进入了可视区域才加载。以上所讲的各种“按需加载”类型，都可以封装成相应的组件，然后就可以在项目中进行应用。

转载于:https://www.cnblogs.com/douglasvegas/p/4587574.html