草丁图书馆

  1. 首页 > 生活杂烩 > >

懒加载 前端优化：懒加载思考( 二 )


2、getBoundingClientRect API
此方法非常有用，通常用于确定元素相对于视口的位置。该方法返回一个DOMRect对象，该对象包含六个属性:左、上、宽、高、下和右。左、右、上、下:都是元素(不包括边距)到视口原点(视口的上、左边界)的距离。
// 用法举例：var ro = object.getBoundingClientRect();var Top = ro.top;var Bottom = ro.bottom;var Left = ro.left;var Right = ro.right;var Width = ro.width || Right - Left;var Height = ro.height || Bottom - Top;function isElementInViewport (el) {var rect = el.getBoundingClientRect();return (rect.top >= 0 &&rect.left >= 0 &&rect.bottom <= (document.documentElement.clientWidth || document.documentElement.clientHeight) &&rect.right <= (document.documentElement.clientWidth || document.documentElement.clientWidth));} 3、IntersectionObserver API 至于要不要用这个API，个人建议了解一下。目前还处于w3c草案阶段，浏览器实现并不乐观。

懒加载 前端优化：懒加载思考


文章图片

这个API为开发人员提供了异步监听目标元素和视口之间的交叉状态的方法。下面是一个惰性加载模板内容的例子。
function query(selector) {return Array.from(document.querySelectorAll(selector));}var observer = new IntersectionObserver(function(changes) {changes.forEach(function(change) {var container = change.target;var content = container.querySelector('template').content;container.(content);observer.unobserve(container);});});query('.lazy-loaded').forEach(function (item) {observer.observe(item);});这个应用编程接口使延迟加载变得简单，因为不需要监控容器的滚动事件，所有这些事件都由本机观察器异步回调。
四、拓展优化1。添加节流
【懒加载 前端优化：懒加载思考】滚动事件，在滚动过程中，由于检测是否在窗口中的逻辑，经常被触发。因此，频繁执行DOM操作、资源加载等浏览器负担消耗严重的行为。如果不控制，很可能会导致UI暂停，甚至浏览器崩溃。
// 添加节流控制。if (_setting.throttleMS > 0) {this.update = throttle(this.update, _setting.throttleMS);} 2、添加仅垂直方向判断 一般在懒加载的情况下，滚动事件绑定到窗口对象，整个页面从上到下呈现。因此，判断水平元素是否在窗口中通常是没有意义的。设置开关可以减少水平判断逻辑，减少资源消耗。
// 只判断垂直方向元素是否出现在视窗内if (setting.vertical) {if(jqThis.height() <= 0 || jqThis.css('display') === 'none'){return;}if ($.abovethetop(this, setting)) {// Nothing.} else if (!$.belowthefold(this, setting)) {jqThis.trigger(APPEAR_EVENT);counter = 0;} else {if (++counter > setting.failureLimit) {return false;}}} 3、扩展功能 如前所述，懒加载不限于图片。有时，需要延迟加载的静态资源可以根据业务需求进行扩展。比如:js外链脚本，css外链样式，视频，音频等等。或者只是释放回调，后续的具体业务逻辑就由开发自己处理了。具体思想是，在初始化过程中，可以配置指定的参数来确定当前的惰性加载实例执行哪个函数加载。还可以在站DOM中配置属性，判断懒加载类型，可以根据业务需要灵活处理。
V.摘要
对于前端优化来说，懒加载可以看作是一种优秀的优化方法，可以在很多场景下使用，增强页面体验。但是，惰性加载的核心是判断元素是否在窗口中的操作。这种判断是在窗口滚动过程中获取元素的宽度和高度，导致页面频繁重绘，会耗费大量的性能开销。而且在监控DOM的时候，如果懒加载的逻辑是为了延迟渲染某个HTML代码，那么绑定DOM事件就要更详细的考虑，否则监控事件可能会失败。因此，在惰性加载场景的应用中，应该给予更多的考虑。如果页面资源少，页面整体逻辑简单，可能不使用懒加载，一次性加载完成体验可能比懒加载优化效果更好。希望大家在工作中能合理运用懒加载的思想，从而达到更好的页面体验。

推荐阅读


上一篇：餐厅厕所谁是凶手 餐厅里的厕所真是太危险了！

下一篇：幻城大结局 《幻城》大结局主角全死了?悲壮收官