众所周知,一个web页面通常会包括HTML(XHTML、XML)、CSS、Javascript,而其中HTML(XHTML、XML)为结构化语言,用于构建页面结构和相关数据;CSS则负责页面的样式,即页面的表现形式;Javascript则负责页面的行为,即完成页面的各种交互。

页面的这三个部分是相辅相成的,在构建web页面的过程中,要尽量保持三者松耦合的关系,从而实现对一个部分的改动而不影响另外两个部分。

要实现三者的松耦合,首先必然是从文件级别上隔离三个部分,即在HTML页面中引入相关的CSS文件和Javascript文件,但同时在实际的开发过程中要注意尽量做到以下几点:

  • HTML代码中不包含CSS
  • HTML代码中不包含Javascript
  • Javascript代码中不包含HTML
  • CSS代码中不包含Javascript
  • Javascript代码中不包含CSS

1、HTML代码中不包含CSS,指的是在HTML代码中尽量不包含CSS代码,即嵌入到HTML元素中的样式设置以及嵌入到<head>中的CSS代码,使整个HTML页面中只包括页面的结构元素。

2、HTML代码中不要包含Javascript,如以下代码所示:

<input type="button" value="click me" id="mybutton" onclick="do()"/>

推荐使用下面的代码:

var btn = document.getElementById('mybutton');
btn.addEventListener("click", do);

3、Javascript代码中不包含HTML,如下代码所示:

var div = document.getElementById("my-div");
div.innerHTML = "<h3>Error</h3><p>Invalid e-mail address.</p>";

当然,在Javascript代码中完全隔绝HTML很难,所以我们可以根据实际情况来权衡使用。同时,我看到过一种有效隔离HTML和Javascript代码的手段,就是Javascript 模版技术,以下是jQuery Template的用法:

// HTML
<script id="bookTemplate" type="text/x-jQuery-tmpl">
<div>
<img src="BookPictures/${picture}" alt="" />
<h2>${title}</h2>
price: ${formatPrice(price)}
</div>
</script>
// Javascript
// Create an array of books
var books = [{ title: "ASP.NET 4 Unleashed", price: 37.79, picture: "AspNet4Unleashed.jpg" }];
// Render the books using the template
$("#bookTemplate").tmpl(books).appendTo("#bookContainer"); function formatPrice(price) {
return "$" + price.toFixed(2);
}

4、CSS代码中不包含Javascript,指的是在CSS代码中要慎用可计算的样式,如IE 8的 expression,CSS3的calc等等,从使用角度来讲全是很强大,从代码维护的角度来看,不推荐使用。出现了Bug的时候,需要同时Check Javascript和CSS代码。

5、Javascript代码中不要包含CSS,我们经常需要在Javascript中去动态改变某一个Dom元素的样式,经常写出如下代码:

element.style.color = 'red';

这样的代码会导致当需求改变的时候,需要在Javascript代码中全文检索 red 关键字,深怕漏掉一点。推荐的做法是在Javascript中操纵Dom对象的Class来改变样式,需求改变的时候,只需要调整CSS文件就可以了,如以下代码所示:

//在CSS文件中定义样式类型
.red-class{
color: red;
}
//Javascript中改变样式
element.className += " red-class";
// jQuery
$(element).addClass("red-class");

另外,为了提高web页面的响应速度,尽量避免在HTML页面中引入大量的外部CSS文件和Javascript文件,我们知道每引用一个.css或者.js文件都会引起一个HTTP请求,而一个HTTP请求的代价是很大的,了解具体的信息请参照http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocolhttp://en.wikipedia.org/wiki/Transmission_Control_Protocol

同时,浏览器对于HTTP请求的并发数量是有限制的,每个浏览器不等,基本在4个左右。

当HTML页面中引用了大量的外部Javascript文件和CSS文件,我们可以考虑通过合并以及压缩Javascript,CSS文件来达到减少HTTP请求数量,以及HTTP结果的目的。

Grunt是一个基于任务的JavaScript项目命令行构建工具,通过Grunt可以将多个文件合并成一个文件,并且进行压缩处理。Grunt没有开发平台的限制,只要是前端项目,都可以使用Grunt来配置任务。

另外如果你是ASP.NET的项目的话,ASP.NET 4.5加入了Bundle,通过Bundle技术合并压缩Javascript和CSS。关于Bundle技术可以参考 http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

另外一个会影响web页面响应速度的是Javascript的全局变量数。JavaScript全局变量在很小的程序中可能会带来方便,但随着程序越来越大,它很快变得难以处理。因为一个全局变量可以被程序的任何部分在任意时间改变,使得程序的行为被极大地复杂化。在程序中使用全局变量降低了程序的可靠性,所以我们应该尽量少的引入全局变量。

定义Javascript的方式有三种:

//  在所有函数外部使用var定义变量
var foo = 10;
// 没有使用var,直接声明变量
foo = 10;
window.foo = 10;

通过立即执行函数可以达到减少Javascript的全局变量数,参见下面的代码:

(function(win) {
"use strict";
var doc = win.document;
// declare other variables here
// other code goes here
}(window));

如果你需要将该对象返回,可以使用如下的方式:

var module1 = (function(){
    var _count = 0;
    var m1 = function(){
      //...
    };
    var m2 = function(){
      //...
    };
    return {
      m1 : m1,
      m2 : m2
    };
})();

这样的话只会引入一个全局变量 module1,而且该对象具有很好的封装性,其内部变量“_count”,在外部是无法访问的。

web页面的优化是一个长久的问题,在这列举了一些改进方法,但还有很多,需要慢慢探究和添加。

web页面的优化的更多相关文章

  1. 隔壁老主精讲web页面性能优化。

    首先说一下为什么要进行web页面性能优化,在同样的网络环境下,两个同样能满足你的需求的网站,一个“Biu”的一下就加载出来了,一个卡--卡--卡--卡--卡--才出来,你会选择哪个?研究表明:用户最满 ...

  2. web页面内容优化管理与性能技巧

    来源:GBin1.com 回 想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片 ...

  3. Web页面性能优化(YSlow)

    YSlow(解析为Why Slow)是雅虎基于网站优化规则推出的工具,帮助你分析并优化网站性能.旧版Yslow 有13条规则,新版Yslow有23项规则,YSlow会根据这些规则分析你的网站,并给出评 ...

  4. base64:URL背景图片与web页面性能优化

    一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...

  5. 小tip: base64:URL背景图片与web页面性能优化——张鑫旭

    一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...

  6. 小tip: base64:URL背景图片与web页面性能优化

    转自:http://www.zhangxinxu.com/wordpress/?p=2341 一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP ...

  7. web页面性能优化

    web前端页面性能优化 网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢? 其实应该是属于功能的表现.并且影响用户访问 ...

  8. web 页面内容优化管理与性能技巧

    回想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪存文件,里面包含的有视频或者图片.然而,随着移动开发的兴起,我 ...

  9. 知名网站内部资料:WEB页面内容优化管理与性能技巧

    回想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片.然而,随着移动开发的兴起, ...

随机推荐

  1. EXP-00056: ORACLE error 6550 encountered报错;

    SQL> exp sys/sys file=/home/oracle/sys.dmp full=y Export: Release 11.2.0.3.0 - Production on Wed ...

  2. CG&Game资源(转)

    cg教程下载: http://cgpeers.com http://cgpersia.com http://bbs.ideasr.com/forum-328-1.html http://bbs.ide ...

  3. POJ 3616 Milking Time (字符串DP)

    题意:找元素关于对角线左或右对称的最大矩阵 思路:左右对角线只需要遍历一条就可以了.只要当前点往上遍历和往后遍历一样就可以. #include<iostream> #include< ...

  4. Bzoj 1609: [Usaco2008 Feb]Eating Together麻烦的聚餐 二分

    1609: [Usaco2008 Feb]Eating Together麻烦的聚餐 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1272  Solve ...

  5. android camera(二):摄像头工作原理、s5PV310 摄像头接口(CAMIF)

    一.摄像头工作原理 上一篇我们讲了摄像头模组的组成,工作原理,做为一种了解.下面我们析摄像头从寄存器角度是怎么工作的.如何阅读摄像头规格书(针对驱动调节时用到关键参数,以GT2005为例). 规格书, ...

  6. mysql left( right ) join 使用on 与where的差异

    之前一直很困扰为什么left join要么一查没有数据,要么出现很多条重复数据. 百思不得其解,后来在网上到处找资料,总算明白了. 一定要理解下面几点:  (1)主表条件在on后面时附表只取满足主表筛 ...

  7. 命令 "sudo -H" 中的这个 "H" 什么作用?

    脚本中使用$HOME变量 问题描述:某些同事原来写的脚本中包含如下内容. BIN_DIR=${HOME}/tools TAIR_BIN_DIR=${HOME}/tair_bin TAIR_SRC_DI ...

  8. Android解析qq聊天记录表情

    偶然在一个需求中需要解析qq聊天记录表情,表情的格式是以/开始,比如:你好啊?/微笑,在网上找了半天,也没能找到一个比较合适的,所以准备自己实现一下,首先要将表情图片和表情字符对上号,我想了几种解决方 ...

  9. FM笔记

    1.获取生产订单状态 CALL FUNCTION 'STATUS_TEXT_EDIT' EXPORTING client = sy-mandt objnr = p_objnr spras = sy-l ...

  10. 深入了解当前ETL中用到的一些基本技术

    数据集成是把不同来源.格式和特点的数据在逻辑上或物理上有机地集中,从而为企业提供全面的数据共享,是企业商务智能.数据仓库系统的重要组成部分.ETL是企业数据集成的概念出发,简要分析了当前ETL中用到的 ...