程序猿说的 『直出』是什么?

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

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

开玩笑吧,难道还有不是服务器「直接输出」的网页吗?我们先从你点开某个网页的那一刻发生了什么说起。举个例子,假如你点开了手机腾讯网,浏览器首先会通过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,然后买了个显示器,等把东西买全准备自己组装,发现运费花了好几百。后来你终于想通了,一拍脑袋,直接把配件都选好,让店家帮忙组装起,一次性发过来,多省事啊。「直出」就是这个道理。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,868评论 18 139
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,540评论 1 19
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 人生如梦,但没人能够把他过成梦的形式。因为我们有太多的身不由己和无能为力。 庄子是一个理想的人,而往往理想的人,总...
    灯布阅读 313评论 0 7
  • 夜读,一些聪明的先行者,几乎把所有我关心/思考的事情都思考过一遍并执行了。真是inspiring又让人有点frus...
    jenjenzhong阅读 172评论 0 0