前端骨架屏实现原理.docxVIP

前端骨架屏实现原理 前端骨架屏，又叫做高速加载网页，是为了在首屏加载过程中缓解用户等待时间而提出的一种新的网页技术。它能够在第一次的页面加载完成之前，显示出一个占位画面，使得用户有种资源正在加载之中的感觉，从而缩短首屏加载花费的时间。 原理： 前端骨架屏的实现原理是首先在页面布局初始化完成后，将节点树变成一个骨架页面，即先将页面的内容拆分成多个结构块，再根据结构块在骨架页面中占上位置，最后用一个循环把结构块换成加载完成的内容。 实现： 前端骨架屏可以使用一个 HTML 页面，先定义整个页面的布局和结构，再定义页面区域加载完成之前的 骨架屏样式 ，只需在CSS中定义每个元素的宽高和其它样式，有时还使用小图片或较小的图标提供一个可视效果：即每个节点树会根据预设的样式进行替换，替换的内容会显示在骨架页面中定义的布局下面，最终实现快速给用户显示内容的效果。 最后，当页面中的所有结构块替换完成，可见部分内容都加载完成后，就会触发 onload 事件完成加载，此时骨架屏就会被完全替换，并显示页面完整的内容。 总结： 前端骨架屏的实现原理就是，先克隆原来的节点树，将其改造成骨架屏，再将节点树一块块的替换，最后完成了页面的高速加载，使得用户体验更好、加载更快，达到“首屏秒开”的目的。