YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » JavaScript » DOM » 为什么要用JavaScript 动态创建样式表link标签?

为什么要用JavaScript 动态创建样式表link标签?

我前面的文章《如何用JavaScript动态创建link标签到head里》只是一笔带过,发现论坛里有朋友问到了这个问题,我这里就花些篇幅来解释一下。为什么要用JavaScript 动态创建样式表标签?为什么不直接用JavaScript来修改样式?

简单的说,这么做有3个目的:

  1. 为了提高页面的加载速度。只在需要的时候才加载相应的样式,减少页面初次加载时(CSS样式)的数据量,从而提交页面的加载数度。
  2. 为了提高代码的可维护性和稳定性。将CSS代码和JavaScript代码分离,是我们前端开发一直推荐的编码规范之一。将CSSJavaScript写在一起,代码的可维护性和稳定性都会受到影响。
  3. 为了提高JavaScript代码的性能。通过给DOM添加某个class样式,可以同时修改一组CSS属性,不但代码清晰,而且可以减少JavaScript多次改变CSS,浏览器重新渲染的性能损耗。

举个世纪的例子,就拿我为 www.hubei.gov.cn 开发的无障碍阅读功能来说,我就使用动态添加link标签的处理方式。

首页,无障碍阅读并不是大多数朋友需要使用的功能,所以这部分功能需要的CSS样式,对一般的朋友来说,也是没有比较加载的。而这部分的CSS样式大小有1.5K左右,这个就是在页面初始加载时非必须的流量。只在用户点击了无障碍阅读链接后,才动态加载样式。

#web-access-toolbar {
    position: fixed;
    _position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 30px;
    background-color: #FFF;
    padding: 10px 0;
    text-align: center;
    overflow: hidden;
    }
	
    #web-access-toolbar button {
    font-size: 18px;
    margin:0 5px;
    }
	
    .webacc-container{
    margin:0 auto;
    width:960px;
    }
	
    .text-mode,
    .text-mode .text-mode,
    .text-mode .text-mode .text-mode,
    .text-mode .text-mode .text-mode ,text-mode,
    .text-mode .text-mode .text-mode .text-mode .text-mode,
    .text-mode .text-mode .text-mode .text-mode .text-mode .text-mode,
    .text-mode .text-mode .text-mode .text-mode .text-mode .text-mode .text-mode{
    margin: 0 auto;
    background-image: none;
    background-color: #FFF;
    padding:0;
    text-align:left;
    text-indent:0;
    float:none;
    overflow: visible;
    color: 000;
    width: 958px;
    border: 1px solid #000;
    }
	
    .first-wrap {
    margin-top: 52px;
    }
	
    .highlight, 
	.highlight .highlight, 
	.highlight .highlight .highlight, 
	.highlight .highlight .highlight .highlight, 
	.highlight .highlight .highlight .highlight .highlight {
    background: none;
    background-color: #000;
    color: #FFF;
    border-color: #FFF;
    text-indent: 0;
    }
	
    .line-x,.line-y{
    position: absolute;
    background-color:#C80000;
    overflow:hidden;
    }
	
    .line-x{
    z-index:1000;
    left:0;
    width:100%;
    height:5px;
    }
	
    .line-y{
    z-index:1001;
    top:0;
    width:5px;
    height:100%;
    }

这些CSS样式中,.text-mode.highlight中的CSS属性是我JavaScript中经常改动的,看看这么处理:

	// 添加起来容易,如果要回复原来的值,恐怕就欲哭无泪了
	// 更加欲哭无泪的是,我还要把这些样式值存到cookie里,同时还要能从cookie里抹掉
	// CSSJSON对象值的写法是容易出错的
	$(".wrap").css({
    margin: "0 auto",
    background-image: "none",
    background-color: "FFF",
    padding:0,
    text-align:"left"
    text-indent:0,
    float:"none",
    overflow: "visible",
    color: "000",
    width: "958px",
    border: "1px solid #000"
    })

和这么写:

// 代码简洁,稳定性高,而且很容易就removeClass("text-mode")
    $(".wrap").addClass("text-mode")

在上面代码的注释中我说过了,我要把CSS样式值存到cookie里,同时还要能从cookie里抹掉。很显然一个一个的直接把CSS属性和值存到cookie里是反人类的做法。而存一个CSS class的名称到cookie则非常的容易。

置于效率,很多关于JavaScript书中都介绍过,处理CSS时,推荐把CSS样式打包一次修改,而不要一个一个值的反复修改。因为前者效率要更高。

这里不是介绍JavaScript性能的文章,所以也就不过多的介绍了。不过为什么要动态创建CSS样式标签,我想应该有了一个比较直观的了解了吧。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:为什么要用JavaScript 动态创建样式表link标签?

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)