按需加载/懒加载

按需解析HTML

按需解析HTML,就是页面一开始不解析HTML,根据需要来解析HTML。解析HTML都是需要一定时间,特别是HTML中包含有img标签、引用了背景图片时,如果一开始就解析,那么势必会增加请求数。常见的有对话框、拉菜单、多标签的内容展示等,这些一开始是不需要解析,可以按需解析。

实现按需解析,首先用<script type=”text/x-template”>html</sccript> 这个标签来对忽略对HTML的解析。然后根据触发的动作,script里面的HTML获取出来,填充到对应的节点中

示例代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>按需解析HTML</title>
</head>
<body>
<script type="text/x-template" id="suc_subscription">
    <!--假设这里的样式box-dytz 引用了一张背景图--->
    <div>
    <!--这里暂且用这张图片作为测试,实际中,大家可以替换为任何图片-->
    <img src="http://tid.tenpay.com/wp-content/uploads/2012/12/按需加载.jpg" />
    </div>
</script>
<div id="success_dilog"></div>
<input type="button" value="点我展示HTML"  onclick="showHTML()"  />
<script>
    function showHTML(){
        document.getElementById(‘success_dilog‘).innerHTML =  document.getElementById(‘suc_subscription‘).innerHTML;
    }
</script>
</body>
</html>

DEMO:http://tid.tenpay.com/wp-content/uploads/2013/06/demo.html

在页面加载结束后,看到并没有图片加载的请求。

点击按钮之后执行了加载图片的操作,此时才在网络中看到图片的请求

这样减少了加载页面最开始的请求,减轻服务器的负载。

按需加载图片

按需加载图片,就是让图片默认开始不加载,而且在接近可视区域范围时,再进行加载。也称之为懒惰加载。大家都知道,图片一下子全部都加载,请求的次数将会增加,势必影响性能。

先来看下懒惰加载的实现原理。它的触发动作是:当滚动条拉动到某个位置时,即将进入可视范围的图片需要加载。实现的过程分为下面几个步骤:

1)生成<img data-src=”url”>标签时,用data-src来保存图片地址;

(相当于加载转圈的图片)

2)记录的图片data-src都保存到数组里;

(保存真正的图片)

3)对滚动条进行事件绑定,假设绑定的函数为function lazyload(){};

4)在函数lazyload中,按照下面思路实现:计算图片的Y坐标,并计算可视区域的高度height,当Y小于等于(height+ scrollTop)时,图片的src的值用data-src的来替换,从而来实现图片的按需加载;

按需加载/懒加载

时间: 2024-10-18 18:52:18

按需加载/懒加载的相关文章

vue学习指南:第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))

各位朋友 因 最近工作繁忙,小编停更了一段时间,快过年了,小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天.从今天开始 我会抽时间把 Vue 的知识点补充完整,以及后期会带给大家更完善的知识体系!!! 路由的按需加载(懒加载) 我们都知道 vue的路由是我们必学的,也是不可分离的一部分,我们传统引入路由的方式是这样的, import Home from '@/components/home/Home' 但是在真正项目的开发中,这种现象是杜绝的,是不建议使用这种传统方式引入的.

vue路由的异步加载(懒加载)方法

vue路由的异步加载(懒加载)方法. javascriptvue.jsvue-router 阅读约 2 分钟 vue本身不多介绍.直接说问题,因为vue的所有路由都是加载在一个app.js里的,如果项目巨大,那么首页加载会是灾难.所以我们就需要把某些路由用异步加载(懒加载)的方式进行加载. 1.先来看正常的加载方式 import Login from "@/components/pages/signIn/signIn"; export default new Router({ rout

延时加载 懒加载

1. strong 用于一般对象 weak 用于UI对象 assign 用于结构型 %02d 整数保存2位,不够的前面补0 重复代码封装抽取,把重复的东西抽取出来写到函数中,把不同的东西作为参数 /** */ 文档注释 2. 数据的延时加载(懒加载)(将属性放在get方法中初始化的方式),用到时再加载,添加get方法 -(NSArray *)array { if(_array == nil)//从未被初始化 { //初始化数据} return _array } 如果第一次加载的方式是_array

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

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

懒加载和预加载

参考链接: 懒加载和预加载 懒加载的原理及实现 处理图片预加载时设置img的src属性和img的onload事件的位置前后顺序关系 关于图片的预加载,你所不知道的 页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求. 加载图片的过程是异步的 一.懒加载 介绍 懒加载也就是延迟加载. 当访问一个页面的时候,先把所有img标签的src设为同一张空白图片的路径(占位图,只需请求一次),将其真正的图片地址存储在img标签

Hibernate 性能优化之懒加载

针对数据库中的大数据,不希望特别早的加载到内存中,当用到它的时候才加载 懒加载分为:类的懒加载.集合的懒加载.单端关联的懒加载 类的懒加载    1.在默认情况下,类就是执行懒加载        2.只有使用了load方法以后才能用懒加载    3.如果在相应的映射文件中,设置<class>的lazy="false"懒加载将失去效果集合的懒加载     1.针对一多对的情况或者多对多的情况    2.根据一方加载set集合,决定在什么时候给set集合填充数据        

懒加载 字典转模型 自定义cell

1 懒加载: 1>  什么是懒加载? 懒加载又称为延时加载,即在系统调用的时候加载,如果系统不调用则不会加载.所谓的懒加载其实就是重写其 get 方法. 2>  特点:在使用懒加载的时候要先判断该方法是否已经存在,如果不存在则再进行实例化. 3>  优点: 不必将创建对象的方法都写在 viewDidLoad 里面,代码可读性更强. 每个控件的getter 方法分别负责各自的实例化处理,独立性强,耦合性低. 4>  使用步骤: 声明一个属性.该属性可以是私有属性也可以是在. h 文件

swift学习第十六天:懒加载和tableView

懒加载 懒加载的介绍 swift中也有懒加载的方式 (苹果的设计思想:希望所有的对象在使用时才真正加载到内存中) 和OC不同的是swift有专门的关键字来实现懒加载 lazy关键字可以用于定义某一个属性懒加载 懒加载的使用 格式 lazy var 变量: 类型 = { 创建变量代码 }() 懒加载的使用 // 懒加载的本质是,在第一次使用的时候执行闭包,将闭包的返回值赋值给属性 // lazy的作用是只会赋值一次 lazy var array : [String] = { () -> [Stri

进一步优化SPA的首屏打开速度(模块化与懒加载) by 嗡

前言 单页应用的好处在于一次载入所有页面资源,利用本地计算能力渲染页面,提高页面切换速度与用户体验.但缺点在于所有页面资源将被一次性下载完,此时封装出来的静态资源包体积较大,使得第一次打开SPA页面时候需要的载入时间较长. 在上一篇文章Angular2 单页应用一些优化总结 中提到的利用压缩.混淆.开启gzip传输后,我们成功将3.5兆的资源包压缩到350k.但是如果SPA应用的页面数进一步增加,100个甚至1000个页面的时候,还是无法避免巨大的首页资源包加载的问题.所以350k的资源包是否还