懒加载技术是现在许多大型网站的都使用的提高网站性能的方式,它的核心思想是当用户想看页面某个区域时,再加载该区域的数据。这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度。

其实国内很多网站都用到了懒加载技术,比如国内两个大型电商网站的页面都运用到了这项技术:

天猫首页:

京东商品列表页:

最近在学习时,自己写了一个带懒加载功能的电影列表展示页,大家可以先看下页面效果:

http://f81236211.w4w7.tumm.top/lazyload/

然后自己在页面底部写了一个分页功能,页面跳转后仍然是懒加载的,只有后面的内容滚动进视野区内时,才去加载.

(大家在看demo时,不要频繁跳转请求页面,因为给我提供数据的豆瓣开发者api进行了请求频率限制,频繁请求会暂时挂掉,其实我自己也把豆瓣的数据爬取到我的服务器数据库了了,但是还要写服务器端的传输数据接口太麻烦了,直接跨域从豆瓣拿了)

懒加载一般主要用于图片,因为我们都知道,一个页面加载中一般来说占流量最大的就是图片了,一般来说懒加载的主流实现方式是:先将需要懒加载的图片的真正src隐藏掉,这样图片就不会下载,然后在图片需要呈现给用户时再加上真实的src属性。

我这里写了一个懒加载图片的demo:

http://f81236211.w4w7.tumm.top/lazyimg/

大家可以看下,原理是:

1.一开始让页面中所有资源的src都是1.jpg,这样页面加载时只会加载一张图片

<img src="./img/1.jpg" data-src="img/3.jpg">
<img src="./img/1.jpg" data-src="img/4.jpg">
<img src="./img/1.jpg" data-src="img/a.jpg">
<img src="./img/1.jpg" data-src="img/b.jpg">
<img src="./img/1.jpg" data-src="img/c.jpg">

2.监测滚动条滚动,滚到到视野范围内时,让图片的src变为图片上data-src里面真实的图片地址,这样就实现了动态的懒加载效果.

现在很多网站图片的懒加载都是基于这个原理实现的,但是很多网站不止懒加载图片,还懒加载区块内容,就像许多空间新闻类网站的列表页一样,比如知乎:

以及qq空间:

当页面滚动滚动到视野区域内时,加载整块内容,包括html结构,我开头的电影demo里简单实现了这个效果,可以发现当滚动条滚动到这个区域时,整个html结构都是动态生成的,这是我电影懒加载demo里实现的效果:

我们先不讨论这样做的优缺点,只说一下简单实现原理:

1.做一个html模板.我这里用的arttemplate做的.

2.当页面首次呈现出来时把数据嵌入到模板里.然后把模板append到页面容器内.

3.当页面滚动到视野区时,去缓存中或者是用ajax去异步请求一屏的数据再次嵌入到模板里,然后append到页面容器内,这样的话如果有无限的数据就会产生知乎,QQ空间哪种无限内容加载的瀑布流效果.

(此处我的电影数据有限,所以没有做成瀑布流,做成了分页的形式,不能无限加载,只要加载5屏就会到页面底部选择是否跳转到新的一页,比较类似电商网站商品列表的风格)

这是github源码地址:https://github.com/JOE-XIE/lazy-demo

关于图片懒加载以及区块的懒加载,大家如果有更NB的实现方式或优化方式欢迎在评论区分享一下,在此抛砖引玉,恳请大神指教!

抛砖引玉:探讨网站性能优化之Javascript异步懒加载技术的更多相关文章

  1. web性能优化之js图片懒加载

    html <div class="container"> <ul> <li> <div id="first" clas ...

  2. 性能优化-css,js的加载与执行

    前端性能优化 css,js的加载与执行 javascript是单线程的 一个网站在浏览器是如何进行渲染的呢? html页面加载渲染的过程 html渲染过程的一些特点 顺序执行,并发加载 词法分析 并发 ...

  3. Vue性能优化之组件按需加载(以及一些常见的性能优化方法)

    关于Vue中的按需加载我就简单介绍一下:大概就是我们所有的东西都会在app.js里面,但是我们并不需要把所有的组件都一次性加载进来,我们可以在需要它的时候再将它加载进来,话不多说,开车! 1.webp ...

  4. javascript异步延时加载及判断是否已加载js/css文件

    <html> <head> <script type="text/javascript"> /**======================= ...

  5. Angular性能优化实践——巧用第三方组件和懒加载技术

    应该有很多人都抱怨过 Angular 应用的性能问题.其实,在搭建Angular项目时,通过使用打包.懒加载.变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能. 为了帮助开发者深入理解和 ...

  6. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  7. js, javascript 图片懒加载 实例代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Web前端性能优化总结——如何提高网页加载速度

    一.提高网页加载速度的必要性 国际知名的一组来自Jupiter Research的数据显示:购物者在访问网站过程中的不满会导致销售损失和品牌受损,其中 77%的人将不再访问网站 ,62%的人不再从该网 ...

  9. javascript 异步模块加载 简易实现

    在javascript是没有类似java或其他语言的模块概念的,因此也不可能通过import或using等关键字来引用模块,这样造成了复杂项目中前端代码混乱,变量互相影响等. 因此在复杂项目中引入AM ...

随机推荐

  1. (简单) POJ 2750 Potted Flower,环+线段树。

    Description The little cat takes over the management of a new park. There is a large circular statue ...

  2. VI 摘要

    1  行首添加注释 1  :5,10s/^/#/g 2  sed '5,10s/^/#/' 2 替换某一个行 文本为 11111 22222 33333 替换: %s/\(.*\)/http:\/\/ ...

  3. Spring自学教程-声明式事务处理(六)

    Spring事务处理分两种: 一.编程式事务:在程序中控制事务开始,执行和提交: 1.1 使用TransactionTemplate, 使用回调函数执行事务,不需要显示开始事务,不需要显示提交事务,但 ...

  4. 《玩转Bootstrap(基础)》笔记

    基本的HTML模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. NSDate详解及获取当前时间等常用操作

    NSDate类用于保存时间值,同时提供了一些方法来处理一些基于秒级别时差(Time Interval)运算和日期之间的早晚比较等. 1. 创建或初始化可用以下方法 用于创建NSDate实例的类方法有 ...

  6. SGU 194 Reactor Cooling ——网络流

    [题目分析] 无源汇上下界可行流. 上下界网络流的问题可以参考这里.↓ http://www.cnblogs.com/kane0526/archive/2013/04/05/3001108.html ...

  7. UVa 496 - Simply Subsets

    题目大意:给你两个集合,判断两个集合的关系(不相交.相等.真子集和其他).简单判断就可以了,不过STL的set没有交集.并集等操作有点让人觉得不方便... #include <cstdio> ...

  8. 自己动手做聊天机器人 二十九-重磅:近1GB的三千万聊天语料供出

    Reference: http://www.shareditor.com/blogshow/?blogId=112 经过半个月的倾力打造,建设好的聊天语料库包含三千多万条简体中文高质量聊天语料,近1G ...

  9. 使用命令创建github代码仓库,push本地仓库到github远程代码仓库

    1.利用命令创建github远程代码仓库 在将本地代码push到github远程代码仓库之前,总是需要新建github代码仓库,在将本地仓库关联到github远程仓库.其中最为繁琐的操作是建立gith ...

  10. linx建立用戶&組

    groupadd  test                  创建test用户组 useradd  user1                  创建user1用户 passwd   user1   ...