经验总结：按需加载JS和css

项目中做过这样的事情:所有页面都通过SSI指令 include这样一份public-js.shtml, 用来引入涉及到的js(包括公共的脚本验证插件自定义组件等),但是一些没有交互效果的页面根本不需要用到这些脚本,所以造成脚本冗余较大(尽管可以从缓存读取,但还是应该尽量减少没用到的脚本为佳) public-js.shtml <script type="text/javascript…

转载 yii2-按需加载并管理CSS样式/JS脚本

一.资源包定义 Yii2对于CSS/JS 管理,使用AssetBundle资源包类. 创建如下: backend/assets/AppAsset.php namespace backend\assets; use yii\web\AssetBundle; /** * @author chan <maclechan@qq.com> * @since 2.0 */ class AppAsset extends AssetBundle { public $basePath = '@webroot';…

转:按需加载html 图片 css js

按需加载是前端性能优化中的一项重要措施,按需加载是如何定义的呢?顾名思义,指的是当用户触发了动作时才加载对应的功能.触发的动作,是要看具体的业务场景而言,包括但不限于以下几个情况:鼠标点击.输入文字.拉动滚动条,鼠标移动.窗口大小更改等.加载的文件,可以是JS.图片.CSS.HTML等.后面将会详细介绍“按需”的理解. 按需解析HTML 按需解析HTML,就是页面一开始不解析HTML,根据需要来解析HTML.解析HTML都是需要一定时间,特别是HTML中包含有img标签.引用了背景图片时,如果一…

yii2.0 如何按需加载并管理CSS样式及JS脚本

链接:http://www.yiichina.com/tutorial/399 (注:以下为Yii2.0高级应用测试) Yii2.0对于CSS/JS 管理,使用AssetBundle资源包类. 视图如何按需加载CSS/JS ? 资源包定义: backend/assets/AppAsset.php namespace backend\assets; use yii\web\AssetBundle; /** * @author chan <maclechan@qq.com> * @since 2.…

Yii2 灵活加载js、css

Yii2.0对于CSS/js 管理,使用AssetBundle资源包类. 视图如何按需加载CSS/JS ? 资源包定义: backend/assets/AppAsset.PHP <?php namespace backend\assets; use yii\web\AssetBundle; /** * @author chan <maclechan@qq.com> * @since 2.0 */ class AppAsset extends AssetBundle { public $b…

动态加载js和css

开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.body.appendChild(script); } /…

动态加载js、css 代码

一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.…

动态加载js和css的jquery plugin

一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include('file/ajaxa.js');$.include('file/ajaxa.css'); //or $.includePath = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files are in th…

PHP：如果正确加载js、css、images等静态文件

日常中,我们想要把一些静态页面放在框架上或者是进行转移时,那么静态页面上的原url加载js.css.images都会失效,那么我们应该怎么进行修改捏? 现在仓鼠做个笔记哈这里有几个注意项: 1.路径必须要绝对正确,基于项目之后的js.css文件位置路径必须是绝对路径 (例如项目的位置在D://studys/aa/bb下,项目名称是cc,js文件路径是D://studys/aa/bb/cc/public/js/dd.js,那么加载路径应该是aa/public/js/dd.js) 2.不要用绝…

按需加载.js .css文件

首先,理解按需加载当你需要用到某个js里面的函数什么鬼,或者某个css里的样式的时候你才开始加载这个文件. 然后是怎样实现的,简单来说就是在js中动态的createElem<script><link>这两种元算--这句话是说给自己的.可以绑定点击事件,滚轮事件(例如图片的懒加载是动态的.) 使用 require.js (一个按需加载的插件)管理.js按需加载,来自http://www.cnblogs.com/chenxizhang/archive/2013/05/16/308194…

angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所有模块需要引用到的js都引入.对于比较小的项目,这是可行的,但是对于大的项目,一旦js文件较多,在页面首次加载时就引入所有js文件,无疑会延缓页面加载的速度,造成不良额用户体验.那么分布加载(按需加载)就显得很有必要了. <!DOCTYPE html> <html lang="en…

angular中按需加载js

按需加载估计是大家在使用angular之后最想解决的问题吧,因为angular的依赖机制,导致了必须在第一次加载的时候就加载所有js文件,小项目还好,稍大一点的项目如果有上百个js文件,不管是从效率还是写法都相当不好.所以这次我使用了$ocLazyLoad来实现懒加载.文档看这里 1.引入js文件,并注入$ocLazyLoad服务 <script src="lib/ocLazyLoad.min.js"></script> 2.对$ocLazyLoad进行基础配置…

js插件动态加载js、css解决方案

最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的变量,那就会报错,靠~~悲催了,就是说js如果动态加载(非浏览器加载因为浏览器加载时同步加载的会等待前一个js加载完成后才进行下一个js加载,这样就不会出现问题)那加载的文件是异步进行的,难怪啊!然后在网上找了些资料说用ajax同步加载,然后我试了真可以,下面就是我的代码分享出来给大家,但是注意这样…

JavaScript(第二十二天)【动态加载js和css】

学习要点: 1.元素位置 2.动态脚本 3.动态样式本章主要讲解上一章剩余的获取位置的DOM方法.动态加载脚本和样式. 一．元素位置上一章已经通过几组属性可以获取元素所需的位置,那么这节课补充一个DOM的方法:getBoundingClientRect().这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box = document.getElementById('box'); //获取元素 alert…

移动端性能优化动态加载JS、CSS

JS CODE (function() { /** * update: * 1.0 */ var version = "insure 1.1.0"; var Zepto = Zepto || null, jQuery = jQuery || null, $ = Zepto || jQuery; var showLoading = false, isUsePackMode = false; // 是否使用合并模式,true则加载分页面合并的JS,CSS if (window.locati…

Asp.Net之后台加载JS和CSS

在Asp.Net开发时,用到的JS库.通用的CSS等,在许多页面都会用到,而每次都需要手动引入,相当麻烦,而且有时一旦忘了引用,还得找半天才能找到问题.那有没有什么办法能够一劳永逸的呢?答案是有的. 我们知道Asp.Net是可以通过后台来渲染前端的,所以如果能够在渲染时将所要的js库和css等添入就可以了.而为了能够复用,所以需要进行类的继承.我们写一个Page的基类PageBase,代码如下. using System; using System.Collections.Generic; us…

tomcat 无法加载js和css 等静态文件的问题

前段时间做了个网站,在本地tomcat测试都没有问题,但是部署到阿里云上之后,系统样式全没了.jsp等动态页面访问正常. 打开浏览器监控发现所有的css 和js 文件返回都是404 .直接访问单个的css 文件也同样是404.以为是路径错了,于是一一对了一遍各个文件的路径和服务器上 tomcat路径方面的设置发现路径没有问题.在网站更目录创建一个css文件和html文件均不能访问.确认不是网站路径的问题. 然后怀疑是tomcat 和 Apache 冲突了,或者可能是Apache 的设置不对.因…

Maven工程webinfo下面的JSP页面无法加载.js、.css文件的解决方案

--下面是我的工程路径 --我jsp的写法 -----启动工程,访问js文件的路径是这样的, href="http://localhost:8080/activiti/css/public.css" 怎么看都没毛病.但是提示404找不到. 所以判断是因为访问被拦截住了.最后分析查找得知,是因为在web.xml缺少了SpringMVC拦截设置. -----下面这段代码来源于其他博客转载通过在web.xml中添加如下设置后,问题的得以解决: 注意: 下面这段代码,要写在引入springM…

require--按需加载js与模块化

1.html中: “<script type="text/javascript" src="js/require.js" data-main="js/main.js" ></script>” 用于连接main.js与加入require: 2.main.js中: 简化路径名 requirejs.config({ baseUrl: 'js', paths: { c:"lib/s/c", jquer…

yii2-按需加载并管理CSS样式/JS脚本

原文地址:https://segmentfault.com/a/1190000003742452…

动态加载JS 和 CSS

动态加载JS（css）文件

laravel加载js和css等资源

4里面是composer下载以后,publish,blade模板里面有html标签不过在5以后,html和form标签去掉了,publish方式似乎也变化了,没看懂…… 直接贴demo吧 mac:newTestApp mmc$ tree public public ├── css │ └── app.css ├── favicon.ico ├── index.php ├── js │ └── aa.js └── robots.txt 引入js <script language="…

react-router配合webpack实现按需加载

很久没有写博客了.一直感觉没有什么要写的,但是这个东西确实有必要的.使用react开发,不可能一直打包到一个文件.小项目肯定没有问题,但是变大一旦到几兆,这个问题就很严重.现在又Commonjs,AMD 规范实现了按需加载.这个就不说了. 说了这么多意思就是大型项目,不可能打包到一个文件中,需要按需求加载我们需要的.按需加载的步骤:1.文件切片.2.按需加载.基本思路就是这个. 1.webpack 配置 : 还有一个东西公共提取: new webpack.optimize.CommonsChun…

Extjs4.1.x使用Application动态按需加载MVC各模块

我们知道Extjs4之后提出了MVC模块开发,将以前肥厚的js文件拆分成小的js模块[model\view\controller\store\form\data等],通过controller拼接黏合,提高了js代码的重用性,可阅读性,更加适合团队的开发. js采用mvc后必定会带来一个问题,如何高效的加载各个js小文件?(源码) 官方的例子是统一采用了一个Ext.Application入口: Ext.application({ name: 'WMS', appFolder: 'ExtJs/App…

angularJS+requireJS实现controller及directive的按需加载

最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需加载控制器js文件及指令js文件的效果:思路如下,1.借助ui-router里面的resolve属性来实现预加载,2.需要借助$controllerProvider动态去注册控制器,$compileProvider动态去注册指令,3.需要借助$q来帮助我们实现异步加载,具体步骤如下所示: 1.在我们定义的app(在定义app.config…

webpack css模块化和ant-design按需加载冲突

其实具体出现了什么问题,我也记得不清楚了,今天突然回想起来必须记录一下,一个思想就是用exclude将node_module目录下的文件排除,网上有很多相关例子,但不知是不是因为时间久远,都不生效,无奈,又只好啃回官方文档,我的解决方式如下 webpack正常打包的话,所有的css都会被打包在一起,造成css的全局污染,我们可以采用模块化的方式,其实就是借用hash改变类或id名 webpack.config.js module: { rules: [ { test: /\.(js|jsx)$/…