众所周知，一个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_Protocol，http://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. [App]华为P6设置与Xamarin Studio连通测试

    使用模拟器进行调试十分麻烦,而且速度很慢,手头上有手机一台正好做测试机器,不过一直无法连通电脑. 百度了一番才知道,首先要在连接时候选择: PC 助手(HiSuite) 这样会加载一个类似驱动盘的资源 ...

  2. 洛谷1377 M国王 （SCOI2005互不侵犯King）

    洛谷1377 M国王 (SCOI2005互不侵犯King) 本题地址:http://www.luogu.org/problem/show?pid=1377 题目描述 天天都是n皇后,多么无聊啊.我们来 ...

  3. .net常見面試題(三)

    1, 请你说说.NET中类和结构的区别? 答:结构和类具有大体的语法,但是结构受到的限制比类要多.结构不能申明有默认的构造函数,为结构的副本是又编译器创建和销毁的,所以不需要默认的构造函数和析构函数. ...

  4. 主流智能手机屏幕材质介绍 及 LCD闪屏现象分析

    TN            TN(Twisted Nematic) 即扭曲向列型面板,属于有源矩阵液晶显示器中的一种.由于TFT是主动式矩阵LCD可让液晶的排列方式具有记忆性,不会在电流消失后马上恢复 ...

  5. 个人推荐，比较好的MySQL客户端工具

    关于啊,MySQL客户端,实在是太多了.本人也是正在摸索中. MySQL Workbench phpMyAdmin SQLyog Navicat for MySQL MySQL Server MySQ ...

  6. 使用OpenXML将Excel内容读取到DataTable中

    前言:前面的几篇文章简单的介绍了如何使用OpenXML创建Excel文档.由于在平时的工作中需要经常使用到Excel的读写操作,简单的介绍下使用 OpenXML读取Excel中得数据.当然使用Open ...

  7. linux kernel （proc文件系统）参数

    http://blog.csdn.net/guowake/article/details/3279796 Linux Proc文件系统,通过对Proc文件系统进行调整,达到性能优化的目的. 二./pr ...

  8. SCADESuite嵌入式软件基于模型的开发

    SCADE Suite®产品是针对高安全性嵌入式软件的基于模型的开发环境 SCADE Suite是高安全性嵌入式软件的开发标准,其应用领域涵盖航空.国防.轨道交通.能源和重工业.专为最高等级的质量和安 ...

  9. 基于HTML5的SLG游戏开发( 三）：认识PureMVC

    在游戏开发中,对于一般网络游戏,由于需要多人协同开发,每个人负责不同的模块开发,为了减少耦合,需要用来一些MVC框架,减少模块之间的耦合.我们现在使用的mvc框架是pureMVC.pureMVC的官网 ...

  10. WS_CLIPCHILDREN和WS_CLIPSIBLINGS的理解(转载)

    1.1 WS_CLIPCHILDREN WS_CLIPCHILDREN样式从字面上可以理解成ClipChildren,裁减子窗口. MSDN里的E文解释:Excludes the area occup ...