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博客。

目录
相关文章
|
10月前
|
JavaScript 前端开发
如何减少Node.js应用中的全局变量?
如何减少Node.js应用中的全局变量?
486 133
|
10月前
|
监控 负载均衡 JavaScript
有哪些有效的方法可以优化Node.js应用的性能?
有哪些有效的方法可以优化Node.js应用的性能?
487 69
|
7月前
|
存储 监控 JavaScript
基于布隆过滤器的 Node.js 算法在局域网电脑桌面监控设备快速校验中的应用研究
本文探讨了布隆过滤器在局域网电脑桌面监控中的应用,分析其高效空间利用率、快速查询性能及动态扩容优势,并设计了基于MAC地址的校验模型,提供Node.js实现代码,适用于设备准入控制与重复数据过滤场景。
274 0
|
6月前
|
运维 监控 JavaScript
基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
本文探讨图结构在局域网监控系统中的应用,通过Node.js实现设备拓扑建模、路径分析与故障定位,提升网络可视化、可追溯性与运维效率,结合模拟实验验证其高效性与准确性。
368 3
|
11月前
|
前端开发 搜索推荐 JavaScript
如何通过DIY.JS快速构建出一个DIY手机壳、T恤的应用?
DIY.JS 是一款基于原生 Canvas 的业务级图形库,专注于商品定制的图形交互功能,帮助开发者轻松实现个性化设计。适用于 T 恤、手机壳等多种商品场景。它自带丰富功能,无需从零构建,快速集成到项目中。通过创建舞台、添加模型、定义 DIY 区域和添加素材四个步骤即可完成基础用法。支持在线演示体验,文档详细,易上手。
519 57
|
7月前
|
资源调度 负载均衡 JavaScript
使用PM2工具部署Vue.js应用于服务器
以上步骤完成之后,你就成功利⽤ PM⼆工具将 Vuejs 应⽰程序部署至服 务 器,并且配合反向代理实现了高效稳定访问及负载均衡功能。
281 0
|
10月前
|
监控 算法 JavaScript
公司局域网管理视域下 Node.js 图算法的深度应用研究:拓扑结构建模与流量优化策略探析
本文探讨了图论算法在公司局域网管理中的应用,针对设备互联复杂、流量调度低效及安全监控困难等问题,提出基于图论的解决方案。通过节点与边建模局域网拓扑结构,利用DFS/BFS实现设备快速发现,Dijkstra算法优化流量路径,社区检测算法识别安全风险。结合WorkWin软件实例,展示了算法在设备管理、流量调度与安全监控中的价值,为智能化局域网管理提供了理论与实践指导。
257 3
|
11月前
|
存储 JavaScript 前端开发
|
12月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
12月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~