首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏lgp20151222

    前端延迟加载

    drools,spring-security,spring-jpa,webjars,Aspect,drools-drt,rabbitmq,zookeeper,mongodb,mysql存储过程 这次就来整合下前端的延迟加载 于是,我百度了个轻量记得懒加载包 然而,百度的前端的质量.... 下面是最少的代码实现懒加载 三 代码 <! -- src是懒加载前的图片,多为空或者loading。 百度第一的竟然说这两图片插件自带....不过哪怕他是错的,基本都秒懂怎么改... data-echo是懒加载后的图片--> </body> <script src="js/echo.js"></script > <script> Echo.init({ offset: 0,//离可视区域多少像素的图片可以被加载 throttle: 1000 //图片延时多少毫秒加载

    1.6K40发布于 2018-11-09
  • 来自专栏前端面试题总结

    前端加载和预加载

    加载和预加载的目的都是为了提高用户的体验,二者行为是相反的,一个是延迟加载,另一个是提前加载。懒加载对缓解服务器压力有一定作用,预加载则会增长服务器前端压力缓存。 懒加载 lazyload懒加载:又叫延迟加载、按需加载,当我们打开一个网页,优先展示的首屏图片就先加载,而其他的图片,等到需要去展示的时候再去请求图片资源。 div>

    <script> const imgs = [ "2.jpg", "3.jpg", "4. 预加载 定义 延迟加载、按需加载 提前加载、不需要也提前加载 目的 更好更快地加载页面首屏内容,网页性能优化让用户无需等待

    3.1K20编辑于 2022-10-21
  • 来自专栏全栈程序员必看

    ue4动态加载模型(unity资源加载)

    就比如 FString sPath = "/Game/Blueprints/Actor/RuntimeActor/RuntimeCameraBP.RuntimeCameraBP_C"; 2>使用UE4编辑器的 1 如何非构造函数方式加载一个uasset(直接代码写中文以及中文图片的命名方式的习惯不好,不要学我) //静态方法, 加载uasset的资源,比如UI贴图等。 , emUIType, false); if(pUW) UGridSlot* pGSlot = SPGridPanel_Left->AddChildToGrid(pUW, row, column); 4> Material/ColorMatreial_Inst_3.ColorMatreial_Inst_3"), NULL, LOAD_None, NULL); MaterialInstance_Level4 = LoadObject<UMaterialInstance>(NULL, TEXT("/Game/Material/ColorMatreial_Inst_4.ColorMatreial_Inst_4"

    2K10编辑于 2022-07-29
  • 来自专栏前端那些趣事

    前端那些事》聊聊前端的按需加载

    前沿:按需加载是性能优化其中的一个环节,可以是图片的按需加载,也就是lazyload来实现按需加载的场景,也可以是组件库的引入,只需部分组件的使用而无需全局引入整个组件库的场景,又可以是路由的按需加载, 当路由被访问的时候才加载对应组件的场景,以此来实现更高效率的使用等等,本文把“懒加载”也划分为按需加载 1.图片按需加载 场景:当一个页面存在需要多个图片加载的场景时,可以通过我们经常看到的所谓“ 2.组件的按需加载 场景:当我需要使用某个组件库的某个组件时,不想全部加载整个组件库,这个时候就需要按需加载了,可以解决一个首屏加载问题,降低首屏加载时间,举个例子,我现在需要用到element-ui 2.2 项目中组件的按需加载 简单理解就是把我们的组件变成了一个函数,起初不执行它,只有你需要它的时候,也就是页面加载时,才触发它加载进来。 ? 3.路由中的按需加载 简单而言则是路由懒加载,当我们用webpack打包并构建应用时,输出的bundle 包会变得非常大,影响页面加载和体验。

    2.8K30发布于 2020-07-03
  • 来自专栏前端那些趣事

    前端那些事》聊聊前端的按需加载

    树酱希望将前端的乐趣带给大家 本文已收录 github.com/littleTreem… 喜欢就star✨ 前沿:按需加载是性能优化其中的一个环节,可以是图片的按需加载,也就是lazyload来实现按需加载的场景 ,也可以是组件库的引入,只需部分组件的使用而无需全局引入整个组件库的场景,又可以是路由的按需加载,当路由被访问的时候才加载对应组件的场景,以此来实现更高效率的使用等等,本文把“懒加载”也划分为按需加载 1.图片按需加载 场景:当一个页面存在需要多个图片加载的场景时,可以通过我们经常看到的所谓“懒加载”,当滑动到图片相应的位置时再加载图片的信息,以此来实现按需加载,举个最简单的例子,你去逛淘宝的时候 ,电商网站图片信息是很多的,这个时候如果把当前页面下的图片都将资源请求过来,是很消耗资源的,对网站的体验也是极其不好,只需要加载你当前“视线”下的图片即可,vue技术栈中vue-lazyload即可实现 ,下面聊聊它的使用和原理 1.1 vue-lazyload是什么 本质上懒加载就是,在适当的时候加载用户需要看的资源(可视区域),当页面开发时将src路径先预先设置好属性,这样页面加载时图片就不会马上向服务器请求资源

    73442发布于 2020-10-15
  • 来自专栏编程微刊

    Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页。 ,一下子加载不出来,就会导致页面间的短暂空白,如果遇上网速不好,那差不多就是一个不完美的bug 一次性加载数据,前端分页 上一篇文章中提到的原理js代码如下: $(function() { ,数据太多了,一次性加载不出来,卡的很,和后台商量了一下,得出了一个简单的思路,当前页数和显示的条数即可,解决方案如下: 分批加载数据,前端分页(实现异步加载) js代码: $(function /p/c806eabe5bec 进阶攻略|前端完整的学习路线:https://www.jianshu.com/p/ed50ee3889d4 八款前端开发人员更轻松的实用在线工具:https://www.jianshu.com :https://www.jianshu.com/p/d4af2aa96cee 文末福利: 福利一:前端,Java,产品经理,微信小程序,Python等资源合集大放送:https://www.jianshu.com

    4.6K30发布于 2018-06-01
  • 来自专栏编程微刊

    Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页。 ,一下子加载不出来,就会导致页面间的短暂空白,如果遇上网速不好,那差不多就是一个不完美的bug 一次性加载数据,前端分页 上一篇文章中提到的原理js代码如下: $(function() { ,数据太多了,一次性加载不出来,卡的很,和后台商量了一下,得出了一个简单的思路,当前页数和显示的条数即可,解决方案如下: 分批加载数据,前端分页(实现异步加载) js代码: $(function 如果你用到此插件作分页的时候,涉及到的数据量大,可以采用异步加载数据,当数据不多的时候,直接一次性加载,方便简单。 文末福利: 福利一:前端,Java,产品经理,微信小程序,Python等资源合集大放送:https://www.jianshu.com/p/e8197d4d9880 福利二:微信小程序入门与实战全套详细视频教程

    61000编辑于 2025-05-18
  • 来自专栏被删的前端游乐场

    前端性能优化--加载流程篇

    对于前端应用的性能优化,大多数时候我们都是从加载流程开始优化起。前面我有给大家整体地讲过《前端性能优化--归纳篇》,其实里面已经囊括了大多数场景下的一些性能优化的方向。 大多数的前端性能优化,都是从页面的启动和加载流程开始梳理和定位,对于功能复杂的业务来说,这样的梳理尤为重要。 资源获取资源获取主要可以围绕两个角度做优化:资源大小资源缓存一、资源大小一般来说,前端都会在打包的时候做资源大小的优化,资源类型包括 HTML、JavaScript、CSS、图片等。 资源懒加载常常也是跟资源分包一起进行,大多数前端框架(比如 Vue、React、Angular)也都提供了懒加载的能力,也可以配合 Webpack 打包做处理。 大多数情况下,前端应用都相对简单,也无需做过度的优化。对于复杂的应用,对加载流程和链路的梳理、划分,不管是对我们做架构设计来说,还是对于做性能优化来说,都有不小的帮助。

    82121编辑于 2024-01-17
  • 来自专栏网络日志

    前端性能优化系列 | 加载优化

    加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。 (4)第三方库实现 除了上面介绍的一些延迟加载方法之外,还可以借助一些已经封装好的第三方库,下面是一些成熟的第三方库: lozad.js 是超轻量级且只使用 Intersection Observer 4. 视频加载优化 (1)延迟加载视频 图片和视频这类静态资源资源占比都比较大。与图片一样,视频同样可以延迟加载,来达到优化性能的目的。 <source src="main.webm" type="video/webm"> <source src="main.mp<em>4</em>" type="video/mp<em>4</em>"> 其中video type="video/mp4"> 这里为video标签添加了poster属性,用来指定图片为视频延迟加载出现前的占位,还使用了类似于图像懒加载的方式,将视频的真实地址放在了data-src

    86210编辑于 2024-08-01
  • 来自专栏赵康的日常专栏

    前端】CommonJS的模块加载机制

    CommonJS的模块加载机制 CommonJS模块的加载机制是,输入的是被输出的值的拷贝。也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。 参考文献: CommonJS规范 -- JavaScript 标准参考教程(alpha): 5: 模块的加载机制

    32030编辑于 2023-10-17
  • 来自专栏互联网杂技

    前端知识普及之页面加载

    页面加载 页面加载就是从你输入网址+enter开始,发生的一些列过程,最终到页面显示。 从微观上分的话,页面加载有两部分 一个是以DOMContentLoaded触发为标志的DOM树的渲染完成 一个是以辅助资源img,font加载完成为触发标志的onload事件 他们两个的具体区别就是"资源的加载 (2) 加载外部脚本和样式表文件。 (3) 解析并执行脚本代码。 (4) 构造HTML DOM模型。//ready执行 (5) 加载图片等外部文件。 (6) 页面加载完毕。 这只是,页面加载很浅的一块,前端能在页面加载上做的工作其实超级多。 (2) 加载外部脚本和样式表文件。 (3) 解析并执行脚本代码。 (4) 构造HTML DOM模型。//ready执行 (5) 加载图片等外部文件。 (6) 页面加载完毕。

    2K90发布于 2018-04-02
  • 来自专栏大数据-数据人生

    前端技术提高页面加载速度

    十三、尽可能延迟脚本加载 一种提升页面下载速度的潜在方式是将脚本放在页面的底部,使页面加载更迅速。 十四、按需加载 JavaScript 文件 要按需加载 JavaScript,使用 import() 函数。 + ms; $import(src + seed); } 十五、验证函数加载 也可以验证一个函数是否被加载,如果没有,加载 JavaScript 文件。 并行、分段加载外部 script Parallel script loading (并行加载)是加速网站页面加载最有效的方法之一。 新推出的 browsers 已经开始支援 parallel script loading,包括 IE8, FF3.5, Safari 4, Chrome 2 等。

    4.5K20发布于 2020-04-02
  • 来自专栏全栈程序员必看

    vue-router实现路由懒加载( 动态加载路由 )_前端加载原理

    小胖梅-的个人空间_哔哩哔哩_Bilibili 为什么需要懒加载?      像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分 ,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 vue异步组件 es提案的import() webpack的require,ensure() 1 . vue异步组件技术 == == 异步加载 vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 . : 懒加载 2.组件懒加载方案二 路由懒加载(使用import) const 组件名=() => import(‘组件路径’); // 下面2行代码,没有指定webpackChunkName,每个组件打包成一个

    2.1K20编辑于 2022-11-10
  • 来自专栏全栈程序员必看

    路由懒加载的原理及实现_前端路由懒加载

    加载解决的问题: 避免进入首页就加载全部的前端资源造成用户等待时间过长的问题。 这个问题,早就有人发现,于是解决方案就是路由懒加载,这只是一个技术名词。 使用这种方法时,我们加载路由文件时,首先要加载所有引入的路由组件,这样会影响页面的加载速度。 现在我们通过懒加载的方式去改善这一问题,所以就延伸出了resolve这一概念; 2) 箭头指向的部分就是我们的改善方法。 当用require这种方式引入的时候(ES5的写法),会将component分别打包成不同的js文件,加载的时候也是按需加载,只用访问这个路由网址时才会加载这个js; 3) 也是按需加载,只用访问这个路由网址时才会加载这个

    1.5K20编辑于 2022-11-10
  • 来自专栏小孟开发笔记

    PSR-4规范:自动加载

    摘要: FIG-PHP工作组推出的PSR-4规范能够满足面向package的自动加载,它规范了如何从文件路径自动加载类,同时规范了自动加载文件的位置。 1.   PSR-4规范:自动加载 虽然在[PSR-4-Meta]中指出PSR-4是对PSR-0规范的补充而不是替换,但是在[PSR-0]中已经写到PSR-0于2014.10.21被废弃,并在[PSR-4-Meta PSR-4规范能够满足面向package的自动加载,它规范了如何从文件路径自动加载类,同时规范了自动加载文件的位置。 1.1 概述 这份PSR规范描述了从文件路径自动加载类。 (4) 自动加载实现一定不能(MUST NOT)抛出异常,一定不能(MUST NOT)引发任何级别的错误, 并且不应当(SHOULD NOT)返回值。 1.3. PSR-4应用 PHP的包管理系统Composer已经支持PSR-4,同时也允许在composer.json中定义不同的prefix使用不同的自动加载机制。

    97940编辑于 2023-05-21
  • 来自专栏mousemin

    PSR-4 自动加载规范

    PSR-4 自动加载规范 PSR-4 描述了从文件路径中 自动加载 类的规范。 它拥有非常好的兼容性,并且可以在任何自动加载规范中使用,包括 PSR-0。 PSR-4 规范也描述了放置 autoload 文件(就是我们经常引入的 vendor/autoload.php)的位置。 全限定类名的加载过程 在全限定的类名(一个 命名空间前缀)中,一个或多个前导命名空间和子命名空间组成的连续命名空间,不包括前导命名空间的分隔符,至少对应一个根目录。 自动加载文件禁止抛出异常,禁止出现任何级别的错误,也不建议有返回值。 范例 下表显示了与给定的全限定类名、命名空间前缀和根目录相对应的文件的路径。 示例中的自动加载器禁止被视为规范的一部分,它随时都可能发生改变。

    73210编辑于 2023-06-10
  • 来自专栏哲学驱动设计

    GIX4中懒加载

    在使用OpenExpressApp框架的GIX4项目中,对象的懒加载按照对象的性质不同,分为以下两种方式: 根对象类:     Get方法:获取根对象,并附带上第一级的子对象属性。     懒加载的思想在这里的体现,比较特殊,大致是这样的:当点击列表中某个对象A时,会使用Get方法获取一个新的对象B,并把它的值全部赋于A,这样,A就在被点击的时候,得到了它的所有子对象属性。 非根对象类:     Get方法:获取此对象的一般属性,它的子对象属性使用一般的属性懒加载方式。

    55480发布于 2018-01-26
  • 来自专栏森屿暖树

    前端特效学习4

    效果图 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body>

    <div class="cube

    35320编辑于 2022-03-23
  • 来自专栏烤包子

    UE4加载lib库

    UE4 需要在xx.Build.cs中添加动态链接库路径; // Fill out your copyright notice in the Description page of Project Settings

    1.2K20发布于 2021-11-10
  • 来自专栏产品优化

    前端 实战项目·动态加载 JS 文件

    动态加载 JS 文件 对于 Vue、React 等框架开发的单页面应用,在某些页面开发特殊功能时经常需要依赖第三方 JS 文件,如果在全局引入 CDN 资源可能会加载冗余文件,此时最好使用动态加载方式 动态加载 JS 脚本指仅在某些特殊页面引入依赖文件,而非全局引入,这样可以避免在这些页面并未打开时造成加载无用的资源,提高页面加载速度的同时,也让整个项目更加模块化。 js 的加载不会阻塞页面的渲染和资源的加载。defer 会按照原本的 js 的顺序执行。 对于 async,它的作用是能够异步的加载和执行脚本,同样不会阻塞页面的渲染和资源的加载,一旦加载到就会立刻执行。 ,配合 Promise 等待上一个脚本文件加载完成后再加载下一个文件,从而实现按次序加载执行脚本。

    6.8K40编辑于 2022-12-01
领券