懒加载是一种常见的技术，通过按需加载资源来减少网页的数据使用。如今懒加载已经是一种 Web 标准，大部分的主流浏览器都支持通过 loading=lazy属性使用懒加载。

loading效果在实际开发中是很常见的，尤其是在Ajax请求的时候，可以给用户一个很好的交互体验。通过css3实现loading动画，主要用到的属性：

pace.js是一个自动加载页面进度栏的小插件,它可以自动监视您的Ajax请求，事件循环滞后，文档就绪状态以及页面上的元素来确定进度。在ajax导航上，它也能进行监听,同时他也可以很方便的集成到Wordpress中

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验

改善性能的最好方法之一是避免重复两次相同的工作。因此，只要可以缓存结果供以后使用，就可以加快程序的速度。通过从重新定义为数据属性的访问器属性开始，您可以将计算推迟到第一次读取该属性时，然后将结果缓存起来以备后用

通常用 Vue.js 编写单页应用（SPA）时，当加载页面时，所有必需的资源（如 JavaScript 和 CSS 文件）都会被一起加载。在处理大文件时，这可能会导致用户体验不佳。

懒加载(Lazy-Load)。它是针对图片加载时机的优化：在一些图片量比较大的网站（比如电商网站首页，或者团购网站、小游戏首页等），如果我们尝试在用户打开页面的时候，就把所有的图片资源加载完毕

每次滚动到元素时，都显示加载动画，如何添加？以上图中的动画为例，添加俩个左右容器，将内容放置在容器内部。

所谓懒加载就是在图片进入 *可视区域* 前，用 *同一张* 图片作为图片的 src 属性值，这样可减少请求及带宽。懒加载的重点是：判断元素是否进入可视区域？

当 DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash，当 onload 事件触发时，页面上所有的DOM

页面加载的时候，vue生命周期的触发顺序是怎样的呢？那么进入某个路由对应的组件的时候，我们会触发哪些类型的周期呢？根实例的加载相关的生命周期（beforeCreate、created、beforeMount、mounted）

之前看到一篇文章，《微信小程序之提高应用速度小技巧》，是讲如何实现小程序在触发页面跳转前就请求协议，利用跳转页面的短短200~300ms的时间，获取到数据并渲染到页面上，实现数据在小程序页面中预加载。这种技术

在通过ajax或者src动态获取js、css文件的时候，我们常常需要判断文件是否加载完成，以便进行进一步的操作。那么如何判断css是否加载完成？

这个需求本身不复杂，但是需要在组件中一次性引入十张图片，作为一个有代码洁癖的程序员，我是不允许这种重复性代码存在滴，于是乎就尝试有没有什么简单的方法。

懒加载(lazyload)也叫延迟加载, 惰性加载. 实质是当网页页面滚动到相应的地方，对应位置的内容才进行加载显示，这样能明显减少了服务器的压力和流量