JS和CSS加载(渲染)机制不同
一、结论
CSS可以在页面加载完成后随时渲染。举个例子:通过js给某个元素加一个id或者css,只要这个id或者css有对应的样式,此元素的样式就会自动生效。
JS不可以在页面加载完成后生效。最明显的例子就是使用EasyUI的时候,iframe中哪些样式无效(EasyUi是依靠JS进行样式处理的,所以无法运行JS,那么样式也就无法设置。简单点说:EasyUi是一个JS的前端框架,Bootstrap是一个CSS的前端框架,二者不同)。
JS默认是不可以在页面加载完成后生效的。
二、现象
对于EasyUi那样的js核心的框架我没有想到办法,但是对于一些简单的时间还是可以处理的。
以下是我实际开发遇到的一个问题,我将其抽象出来:
某个按钮class为"tt"不是原生的HTML存在页面中的,而是通过页面加载过程中的JS生成的.
在最初我有如下语句:
$(".tt").click(function(){
alert("xxx");
});
但是这个方法死活触发不了,根据上述第一点我的结论可知,这个是因为页面的JS已经加载完了,此时元素还没有生成。自然而言的无法有效的绑定事件。
那么怎么处理了?
<button onclick="mc-alert()">TELL</button>
将alert()放在方法mc-alert()中,即可。
三、深度剖析
留待以后懂得时候补充,现在不太清楚啊。。。
JS和CSS加载(渲染)机制不同的更多相关文章
- css加载是否会阻塞dom树渲染
这里说的是头部引入css的情况 首先,我们都知道:css是由单独的下载线程异步下载的. 咱们先分析下css加载会影响什么,刚才的问题太笼统了,咱们需要细化一下. 会影响什么呢? 一个就是DOM树解析, ...
- 定时器详解和应用、js加载阻塞、css加载阻塞
1.setTimeout().setInterval()详解和应用 1.1 详解: setTimeout.setInterval执行时机 1.2 存在问题: setInterval重复定时器可能存在的 ...
- 浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结
页面响应加载的顺序: 1.域名解析->加载html->加载js和css->加载图片等其他信息 DOM详细的步骤如下: 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚 ...
- 性能优化之html、css、js三者的加载顺序
前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...
- nginx实现动态分离,解决css和js等图片加载问题
改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...
- js插件动态加载js、css解决方案
最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...
- SpringMvc架构下css、js、jpg加载失败问题
SpringMvc架构下css.js.jpg加载失败问题 springMvc搭建成功后,页面出现一些错误,jsp.js等静态资源加载失败.导致页面没有显示任何样式以及 此处原因很简单,是因为相对路径在 ...
- 关于html,css,js三者的加载顺序问题
<head lang="en"> <meta charset="utf-8"> <title></title> ...
- 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析
来自 https://blog.csdn.net/u011088260/article/details/79563315 最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...
随机推荐
- hdu_5676_ztr loves lucky numbers
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=5676 在这%一下安神,用了我没见过的黑科技next_permutation,至少我是今天才知道的 #i ...
- hdu_1254_推箱子(双BFS)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1254 题解:以箱子为主体,第一层BFS,然后用第二层BFS来判断人是否可以到达,这里细节比较多,要注意 ...
- 安装lnmp(linux nginx mysql php)
下载或者在云盘里找lnmp1.2-full.tar.gz 用 tar -zxvf lnmp1.2-full.tar.gz解压 进入 ,运行./install.sh安装.根据提示. 如果出现yum锁定, ...
- Fibonacci 数列第 N项 O(logN)算法
时间复杂度为O( log n )的方法: 该算法使用矩阵乘法操作,使得算法时间复杂度为 O(logN) long long Fibonacci( unsigned n ) { ] = {, }; ) ...
- rebar
www.cnblogs.com/panfeng412/archive/2011/08/14/2137990.html
- Java学习笔记之类和对象
1.类是对象的抽象,对象是类的实例. 2.一个.java 文件,只能有一个公有类. 3.Java的默认访问权限是:default,即不加任何访问修饰符,该权限设置只能在同一包访问. 当前类 同一包 ...
- (转)Tomcat内存设置详解
Java内存溢出详解 一.常见的Java内存溢出有以下三种: 1. java.lang.OutOfMemoryError: Java heap space ----JVM Heap(堆)溢出JVM在启 ...
- Win32 SDK Combo Box
如下图所示,显示了三种不同风格的Combo Box样式.当然,现在这样看不出第一种与第三种之间的区别,但是第二种与其他两种的区别是明显的,第二种的列表框始终是出于现实状态的. Combo Box: 一 ...
- centos7如何关闭防火墙
1.centos7自带了firewall,而不是iptables: 关闭firewall: service firewalld stop 或者: systemctl stop firewalld 禁止 ...
- eclipse提升注解提示速度
preference--输入content--java--editor--content Assist--aoto delay 选项 改为100或者更低 提示速度 --ao ...