「直出」到底是个什么鬼？

大家好，果果又来扫盲了。今天要科普的这个技术，叫「直出」。听起来一愣一愣的是吧？这东西，跟「技术」八竿子打不着啊，反而像是某数字网站上的异国语言呢。程序员，你们确定是在上班时间讨论技术问题吗？

哈哈，是的。「直出」其实是「直接输出」的意思，讲的是在浏览器打开某个网页的时候，拿到的数据是服务器「直接输出」的，显示速度特别快，你看到很多「秒开」的网页，八成是用了「直出」的技术。

开玩笑吧，难道还有不是服务器「直接输出」的网页吗？我们先从你点开某个网页的那一刻发生了什么说起。举个例子，假如你点开了手机腾讯网，浏览器首先会通过DNS查到这个网站的真是ip地址，然后向该ip地址发起http协议的请求，请求拉取手机腾讯网的html页面。这时候你的手机和腾讯网的服务器悄悄的进行了数次握手，最终达成一致，服务器开始向你的手机传回html网页。

呼哧呼哧，经过无数个路由器和网关，html网页终于拉取到了。但是别高兴的太早，这个时候浏览器还不能显示出这个网页，原因是网页上还有很多CSS资源（用来美化网页的，控制字体啊、颜色之类的，没有CSS的手机腾讯网长下面这个样子）需要拉取。于是浏览器找到写在html网页里的CSS资源地址，再次向服务器发起http协议。

呼哧呼哧，CSS资源拉回来了。但是浏览器一看，咦，还有javascript代码落下了呢，于是又去网站上拉取javascript代码。老套路，握手、协商、传数据。为什么必须要拉取javascript代码呢？原来，现在有很多网站，数据都是异步加载的，就像很多APP那样，先显示一个架子（由html描述），然后后台请求数据（由javascript发起），数据拿到了再贴上去，渲染出来。美其名曰用户体验，其实用户该等还是得等。

于是浏览器又呼哧呼哧跑去拉去真正的数据了。

于是当用户真正看到完整的网页的时候，时间已经过去好几秒了。等的时间越长，用户越容易流失。后来程序员想了个办法，那就是「直出」。

如果浏览器第一次请求html网页的时候，拿到的就是带有「经过javascript渲染好的数据」的html，那岂不是省去了拉取javascript、拉取数据的过程？虽然需要传输的数据量并没有减少（实际上省去了每次http请求的额外信息），但是最关键的是减少了http请求的次数，减少了浏览器与服务器之间握手、协商的次数，成了一锤子买卖。

没错，这就是「浏览器直接输出渲染好数据的html页面」，简称「直出」。直出没什么神秘的，只不过需要node.js的支持。我们之前讲过node.js，就是服务器和前端一样，也用javascript编写，相当于在服务器上也跑一个浏览器，服务器上的浏览器渲染好的东西，直接输出给客户端的浏览器，那速度肯定快。

简单来说，就好比你从某东上买电脑，先买了个主板，然后买了个CPU，然后买了个显示器，等把东西买全准备自己组装，发现运费花了好几百。后来你终于想通了，一拍脑袋，直接把配件都选好，让店家帮忙组装起，一次性发过来，多省事啊。「直出」就是这个道理。

#专栏作家#

给产品经理讲技术，微信公众号（pm_teacher），人人都是产品经理专栏作家。资深程序猿，专注客户端开发若干年，对前端、后台技术略懂，热衷于对新的科技领域的探索。

本文原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自PEXELS，基于CC0协议