抛砖引玉:大型网站性能优化之Javascript异步懒加载技术

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

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

天猫首页:

京东商品列表页:

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

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屏就会到页面底部选择是否跳转到新的一页,比较类似电商网站商品列表的风格)

由于懒得下插件,自己全用jquery写的,这里几个与本文有关的工具及插件,大家自行搜索:

懒加载:lazyload.js

分页:twbs-pagination

模板:arttemplate

数据:豆瓣开发者api

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

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

时间: 2024-10-03 13:12:12

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

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

引用就是某一变量(目标)的一个别名,对引用的操作与对变量直接操作完全一样. 引用的声明方法:类型标识符 &引用名=目标变量名: 例如: int a int &b=a; //定义引用b,它是变量a的引用,即别名 #include <stdio.h> void main() { int a = 123; int &b = a; printf("a=%d b=%d\n", a, b); } 执行结果: 实例:引用和变量的关系 #include <io

再谈javascript图片预加载技术

图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展示出来,所以lightbox显示的图片的速度体验要比直接输出的差很多,而本文说提到的预加载技术主要针对获取图片尺寸. 一段典型的使用预加载获取图片大小的例子: var imgLoad = function (url, callback) {    var img = new Image();   

javascript 异步模块加载 简易实现

在javascript是没有类似java或其他语言的模块概念的,因此也不可能通过import或using等关键字来引用模块,这样造成了复杂项目中前端代码混乱,变量互相影响等. 因此在复杂项目中引入AMD的概念,AMD:全称是Asynchronous Module Definition,即异步模块加载机制.通过AMD可以不需要在页面中手动添加<script>来引用脚本,而通过定义依赖自动加载模块脚本,接下来的代码将讲解如何实现建议的AMD模块,如果需要查看比较详细的实现可以下载requirejs

原生JavaScript实现懒加载

源码工程下载地址:https://github.com/blff122620/jsLibary/lazyLoad.html 实现原理就是通过scroll事件判断元素是否已经进入viewport 导入 lazyLoad.js 使用 inViewPort(item)即可 判断item是否在视口里,然后继续进行自己的逻辑就行了 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT

原生javascript代码懒加载

1.先定义需要懒加载的样式: class="lazyload" 2.设置初始透明度为0.1: .lazyload{ filter: Alpha(opacity=10); -moz-opacity:0.1; opacity:0.1; } 3.把真正需要加载的真实地址放在data-src属性中: src="懒加载图片.png" data-src="真实图片"; 4. 前端开发周大伟同学JavaScript代码编写: function lazyload

前端性能优化 css和js的加载与执行

一个网站在浏览器端是如何进行渲染的? html本身首先会被渲染成 DOM 树,实际上 html 是最先通过网址请求过来的,请求过来之后,html 本身会由一个字节流转化成一个字符流,浏览器端拿的就是字符流,然后通过词法分析之后,将相应的语法分析成相应的 token ,比如说 header token, 转化不同的 token tag ,然后通过 token 类型 append 到 dom 树. 遇到 link token tag,然后去请求 css ,请求过来之后再去对 css 进行解析,生成

优化:JavaScript的正确加载

减少 JavaScript 对性能的影响有以下几种方法: 将所有的<script>标签放到页面底部,也就是</body>闭合标签之前,这能确保在脚本执行前页面已经完成了渲染. 尽可能地合并脚本.页面中的<script>标签越少,加载也就越快,响应也越迅速.无论是外链脚本还是内嵌脚本都是如此. 采用无阻塞下载 JavaScript 脚本的方法: 使用<script>标签的 defer 属性(仅适用于 IE 和 Firefox 3.5 以上版本): 使用动态创建

前端性能优化--图片懒加载(lazyload image)

图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒加载怎么个懒法,就是你不想看就不给你看,我也懒得加载出来,懒得去请求.通俗的说就是你不要就不给你,怎么地.举个栗子,比如在进入某个页面的时候,它会有许多的图片,有些图片可能在下面,当我们点进页面但没有滑动下去或没看完整个页面,那么下面的图片就会"没用",加载了也白加载,而且还降低了网页的加

前端优化-图片懒加载

一.什么是懒加载 懒加载技术(简称lazyload)是对网页性能优化的一种方案.lazyload的核心是按需加载,避免网页打开时加载过多资源,让用户等待太久,在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域).这里我们主要是对img标签使用懒加载技术,使用jquery的query.lazyload.js库实现. 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览