教程介绍难度：中级预计完成时间：20分钟如果你的网站比较依赖向客户端发送数据，使用客户端模板和WebSocket可以显着提高其性能。在今天的教程中，让我们看看如何实现这一点。简介我们将以现有应用程序为起点，介绍如何使其在高流量环境中更具响应性和可靠性。我将向您展示如何从应用程序代码中查明相应的代码段以及如何对其进行修改以提高性能。但首先您需要下载我准备的示例应用程序。这个应用程序的内容非常简单，它的目的是显示来自服务器的随机帖子的内容——但是对于我们的指南文章来说，这已经足够了。第一步：准备解压我们下载的文件，选择一个文件夹或保存位置，然后运行它：现在我们去http://localhost:8080/查看它的内容。此时您应该只看到一个按钮。你还需要准备一个安装了各种开发者工具的浏览器，这样你就可以掌握HTTP请求的实际大小。打开开发人员工具，然后访问“网络”选项卡。接下来，点击几次按钮，注意/getpost请求的大小：这个请求只有830字节，对吧？好吧，想象一下，当我们的网站如火如荼时，可能有超过一百万的用户同时希望看到这篇文章，并且请求的数据总量将约为830MB。请注意，每个帖子830MB！这不是一个小数目。第2步：检查在第2步中，我将向您介绍如何在应用程序中找到可以提高性能的相应代码片段。在上一步中，你已经找到了获取帖子内容的请求，现在我们需要了解代码是如何实现这个过程的。你可以使用你熟悉的代码编辑器打开index.js文件，16到20行的内容如下：varpostTemplate=dot(fs.readFileSync('./post.dot'));app.get('/getpost',function(req,res){res.end(postTemplate(posts[Math.floor(Math.random()*3)]));});就是这样！首先，post模板被编译到postTemplate变量中。接下来，模板在/getpostGET请求中提交。这是一个非常典型的方案，可以说是乏善可陈。我们将对其进行更改以提高性能。第3步：设置Socket.IO要开始改进，首先，安装Socket.IO。在你的终端类型中：为了实现性能的提升，我们首先需要安装Socket.IO。需要在命令行终端输入：npminstallsocket.io，等待命令完成。通过将以下行添加到index.js中，将socket.io引入到您的代码中：varsio=require('socket.io');现在您必须更改您的Express设置以使其与Socket.IO协作。首先在appdefinition后添加如下内容：varserver=require('http').createServer(app);vario=require('socket.io').listen(server);server.listen(8080);除了此文件中的最后一行：这样做是因为Socket.IO与HTTP服务器密切合作，而不是Express应用程序。现在，如果您运行该应用程序，您应该会在终端中看到类似这样的内容：#p#Step4：客户端模板要开始提高应用程序性能，您需要将已编译的模板保存在客户端之中。JavaScript文件将驻留在缓存中，因此我们只需要下载一次。为了编译模板，我们需要访问http://olado.github.io/doT/index.html并向下滚动到Usage部分。由于我们不必在用户每次访问网站时都编译模板，您只需将编译后的函数添加到您的代码中即可。打开post.dot文件并将其内容粘贴到模板字段中，如下所示：现在将此字段的内容复制并粘贴到static/main.js文件的初始位置。更改或删除匿名函数名称并将其分配给postTemplate变量，如下所示：varpostTemplate=function(it){...}然后打开index.js文件并删除所有未使用的代码行，因为从现在开始，我们不再不再需要在服务器端编译模板：vardot=require('dot').template;varfs=require('fs');...varpostTemplate=dot(fs.readFileSync('./post.dot'));post.dot文件也可以删除，没关系。第5步：从AJAX到WebSocket我们现在不再使用AJAX与服务器通信，而是使用WebSocket。最好的办法是使用Socket.IO，因为WebSocketAPI本身不提供failover功能——原因是用户的浏览器不支持。服务器已设置，因此我们现在需要与其交互。首先，在static/index.html文件头部（main.js之前）添加如下代码：接下来，打开static/main.js文件并在模板定义后添加以下代码：varsocket=io.connect();它将连接到Socket.IO服务器（请注意，您必须提前在页面中添加Socket.IO脚本）。由于在我们的实验环境中，服务端和客户端运行在同一台主机上，所以这个函数不需要额外添加任何参数。我们现在要做的是给socket添加一个事件监听器，这样我们就可以在获取到帖子内容后及时得到提示。在上一行代码之后添加以下代码：socket.on('getpost',function(data){$('button').after(postTemplate(data));});可以看到，回调命令的内容和jQuery的$.ajax()方法中的success回调是一样的，只是会先运行data中的模板函数。现在，将$.ajax()调用替换为以下内容：socket.emit('getpost');这行代码通知服务器用户想要显示新帖子。当然，在实际应用程序中，服务器会在发布后立即发送帖子。第六步：这里发送帖子，客户端已经可以连接到服务器并请求帖子的内容，但是服务器无法正确响应随机的帖子。现在我们打开index.js文件并对内容进行更改。来自原文：app.get('/getpost',function(req,res){res.end(postTemplate(posts[Math.floor(Math.random()*3)]));});至：io.sockets.on('connection',function(socket){socket.on('getpost',function(){socket.emit('getpost',posts[Math.floor(Math.random()*3)]);});});这将使服务器将getPost句柄连接到所有客户端并以随机发布内容进行响应。现在您可以再次运行该应用程序以查看它的运行情况。接下来我们再打开浏览器中的开发者工具，找到网络选项卡，过滤一下，让大家只看到WebSocket。现在单击唯一可见的对象，您应该会看到浏览器和服务器之间传输的数据——是的，与文章开头的初始状态相比，请求大小已经显着减小。这是因为初始请求还包括服务器端模板和AJAX内容（长度单位是“字节”）：总结如您所见，使用WebSocket和客户端模板（几乎肯定）可以提高应用程序的性能和耐用性。我敢肯定，许多站点都使用这种方法来提高响应能力。当然，我也希望小伙伴们可以利用这个技术，为自己的移动端和桌面端用户带来更好的用户体验。原文链接：http://net.tutsplus.com/tutorials/javascript-ajax/node-js-better-performance-with-socket-io-and-dot/
