Node.js应用之静态文件分发器

简介:

我不久之前翻译过一篇文章:

asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度

采用打包并压缩和在浏览器与客户端同时构建缓存的技术,来对页面的加载进行优化。最近在学习Node.js,下面我们来看看Node.js在这方面能做些什么。

Node.js的优势是网络通信、I/O不阻塞,可见它是高并发需求的有效解决方案。在Web开发中有许多文件是静态文件,例如CSS文件、JS文件。对它们的请求,通常是页面加载到客户端后,浏览器重新发出的异步请求。通常Web服务器能处理的并发请求是有限的,对于大的应用来讲,动态页面的并发请求可能已经足够多了。何不利用好Node.js的服务端优势,给Web服务器减轻一点负担呢?

下面,我通过测试来,验证该方案是否可行。

首先,我们构建网站(asp.net)。

文件列表:

一个测试页面

Default.aspx

一个样式表文件

StyleSheet.css

一个Javascript文件

Jscript.js(实现动态改变节点文本内容

页面内容:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!--通常的请求方式-->
    <link rel="Stylesheet" href="StyleSheet.css" />
    <script type="text/javascript" src="JScript.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p class="a">This is a test Page.</p>
        <p class="b" id="hw">Hello world!</p>
        <input type="button" id="testBtn" onclick="test.change();" value="change innerText" />
    </div>
    </form>
</body>
</html>

上面是我们通常的做法,这些请求通常也是被Web服务器首先接管,然后进一步处理(这里不做讨论)。

运行效果:

CSS效果:


JS效果,点击按钮之后:


点击按钮,可以切换第二个P标签内容(这里也主要是说明JS文件是有效并能被访问的)

而,采用Node.js我们就可以不必将这些静态文件的请求交给Web服务器来处理,可以让其交给另外一个Node.js创建的http服务器来处理(通过将请求该Http服务器正在监听的那个端口)。

采用Node.js文件的请求方式:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!--通常的请求方式-->
    <%--<link rel="Stylesheet" href="StyleSheet.css" />
    <script type="text/javascript" src="JScript.js"></script>--%>
    
    <!--Node.js的请求方式-->
    <link rel="Stylesheet" href="http://localhost:8080/StyleSheet.css" />
    <script type="text/javascript" src="http://localhost:8080/JScript.js"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p class="a">This is a test Page.</p>
        <p class="b" id="hw">Hello world!</p>
        <input type="button" id="testBtn" onclick="test.change();" value="change innerText" />
    </div>
    </form>
</body>
</html>

当然,这只是客户端的请求方式,光有这些是不够的。下面我们需要构建服务端的处理逻辑:

(1) 在Cygwin根目录下创建一个test.js文件;

(2) 里面键入如下JS:

var sys=require("sys"),
	http=require("http"),
	url=require("url"),
	path=require("path"),
	fs=require("fs");
http.createServer(function(request,response){
	var uri=url.parse(request.url).pathname;
	var filename=path.join(__dirname,uri);
	path.exists(filename,function(exists){
		if(!exists){
			response.writeHead(404,{"Content-Type":"text/plain"});
			response.write("404 Not Found\n");
			response.end();
			return;
		}
		
		fs.readFile(filename,"binary",function(err,file){
			if(err){
				response.writeHead(500,{"Content-Type":"text/plain"});
				response.write(err+"\n");
				response.end();
				return;
			}
			
				
			response.writeHead(200);
			response.write(file,"binary");
			response.end();
		});
	});
}).listen(8080);

sys.puts("Server running at http://localhost:8080/");

(3) 运行Cygwin,键入命令:node /test.js

可以看到,http服务器已经构建完成:


接下来,我们就可以让它处理客户端请求了。它会根据,请求的文件结合路径,到文件系统中查找文件并响应到客户端。

页面效果:



可以看到效果和普通做法是一样的。

很显然,Node.js能够很轻松地完成这些事情,I/O与通信无阻塞是它的优势。并且它对文件的读取可以是异步的。异步与基于事件驱动一直都是JS的优势。

该例子只是列举了获取JS、CSS这些文件,其实只要是那些静态文件,都可以切换成这种请求方式。当然这个例子并不能作为商业应用的部署方案,这只是一种可行性验证,但很明显它确实是一种方案,只是还有很多问题需要考虑,例如,构建缓存以提高效率,文件压缩问题,加密问题,分布式架构下文件结构访问,Node.js服务端安全的问题等等。

但作为一个兴起的技术,我相信它会慢慢完善的。

最近正在学习Node.js有兴趣的童鞋可以多多交流~

mailto:yanghua1127@gmail.com




原文发布时间为:2011-10-16


本文作者:vinoYang


本文来自云栖社区合作伙伴CSDN博客,了解相关信息可以关注CSDN博客。

目录
相关文章
|
3天前
|
JavaScript API 数据库
深入理解Node.js事件循环及其在后端开发中的应用
【9月更文挑战第3天】本文将深入浅出地介绍Node.js的事件循环机制,探讨其非阻塞I/O模型和如何在后端开发中利用这一特性来处理高并发请求。通过实际的代码示例,我们将看到如何有效地使用异步操作来优化应用性能。文章旨在为读者揭示Node.js在后端开发中的核心优势和应用场景,帮助开发者更好地理解和运用事件循环来构建高性能的后端服务。
|
4天前
|
缓存 JavaScript 前端开发
JavaScript模块化开发:ES6模块与CommonJs的对比与应用
JavaScript模块化开发:ES6模块与CommonJs的对比与应用
11 2
|
8天前
|
JavaScript 前端开发 API
揭秘现代前端开发秘籍:Vue.js与ES6如何联手打造惊艳应用?
【8月更文挑战第30天】本文介绍如何从零开始使用Vue.js与ES6创建现代前端应用。首先,通过简要介绍Vue.js和ES6的新特性,使读者了解这两者为何能有效提升开发效率。接着,指导读者使用Vue CLI初始化项目,并展示如何运用ES6语法编写Vue组件。最后,通过运行项目验证组件功能,为后续开发打下基础。适用于希望快速入门Vue.js与ES6的前端开发者。
21 3
|
7天前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
18 1
|
7天前
|
JavaScript 前端开发 开发者
|
7天前
|
C# 开发者 测试技术
震惊!Xamarin 竟能如此构建跨平台应用程序,代码共享、界面设计与性能优化全攻略大揭秘!
【8月更文挑战第31天】在移动应用开发领域,跨平台工具日益受到青睐。Xamarin 是一款强大的工具,支持使用 C# 开发适用于 iOS、Android 和 Windows 的应用。通过安装 Visual Studio 或 Visual Studio for Mac,并创建 Xamarin 项目,开发者可以利用丰富的功能和工具进行开发。Xamarin 的主要优势在于代码共享,能够显著提高开发效率。
18 0
|
7天前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
13 0
|
7天前
|
JavaScript 开发者
深入理解Node.js事件循环及其在后端开发中的应用
【8月更文挑战第31天】 本文将带你走进Node.js的事件循环机制,通过浅显易懂的语言和实例代码,揭示其背后的工作原理。我们将一起探索如何高效利用事件循环进行异步编程,提升后端应用的性能和响应速度。无论你是Node.js新手还是有一定经验的开发者,这篇文章都能给你带来新的启发和思考。
|
7天前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
26 0
|
7天前
|
自然语言处理 JavaScript 前端开发
下一篇
DDNS