4)浏览器显示一个网页

Web开发 Node.js HTML CSS 请求处理 实验学习
本章探讨了浏览器如何显示网页的过程,重点在于如何通过代码处理不同的请求并返回相应的资源。文章首先强调了查阅官方文档的重要性,类比于查字典的能力。接着,通过示例代码展示了如何返回HTML字符串、CSS样式以及网页图标,并指出在处理不同请求时,可以通过判断URL路径来返回不同的内容。文章还强调了实验和观察的重要性,鼓励通过打印和数据分析来解决问题。最后,虽然代码实现了基本功能,但浏览器的复杂性仍存在一些未解之谜,留待后续探讨。
文章内容
思维导图
常见问题
社交分享

上一章,我们了解到,如何通过第二章的极简Web的例子来演示如何查看官方文档。为什么要把查阅官方文档放在前面的章节说明呢?因为查看文档是一个很重要的能力,就跟查字典一样。

回想一下,我们读小学,初中的时候,老师是不是专门教过如何查阅字典呢?不知道现在还是不是这样,笔者以前读小学,初中,新华字典是每个人书桌必备的。

所以,如果你在学习Node.js的过程中,或者学习其他技术,都可以用此方法来对语言,技术等进行学习和了解。

那么本章呢,我们继续在代码方面做一些推进,当浏览器发起请求的时候,返回一个网页并正确渲染网页中涉及到的CSS、JS脚本等资源。

简单直接一点,直接把HTML字符串返回,哈哈。

不要忘记启动Web服务哦,然后到浏览器访问,可以看到正确地显示了HTML效果。继续,加点料,把CSS写进去。

很简单的效果,让body中的文字变成红色。

不出所料,尽在掌控,是不是很简单?来,加点难度。

把头部的样式单独放到一个文件中,用link标签引用。

怎么回事?文字怎么没变色?还有,index.css文件怎么返回的是html内容呢?

不仅如此,浏览器一共发送了3个请求,返回的内容也都是一模一样的,有蹊跷。

我们再回过头去看看代码,可以发现,我们每次请求,都返回了同样的内容。那么我们要怎么做,才能让不同的请求返回不同的内容?

很简单,if判断就完事了。但是,怎么判断?判断什么参数呢?

也很简单,打印就完事了,打印谁呢?打印req参数。

知道笔者的这个课程为什么叫做“实验指南”了吗?这个就是笔者的学习方式,哪里不懂,打印出来看,不要去猜,要用眼睛去观察,要不断地做实验,用数据说话。

打印的参数很多,我们抽丝剥茧,找到这个关键的地方,恰好是那3个请求内容。现在知道怎么判断,判断谁了吗?没错,就是url。

我们约定以下规则:

1,如果url=/,则返回HTML页面。

2,如果url=/index.css,则返回CSS样式。

3,如果url=/favicon.ico,则返回网页标题栏的收藏图标。

很简单的判断,不同的路径返回不同的内容。另外,收藏图标用到了文件读取方法,很简单,看下官方文档,搜索下资料就懂了,不多赘述。

可以看到,收藏图标有了,CSS样式也生效了,3个请求返回也不一样了。

好像一切都完美了?其实不然,由于浏览器的包容性,一些玄机还暗藏其中,且听下回分解。

思维导图生成中,请稍候...

问题 1: 为什么查阅官方文档在学习技术时如此重要?
回答: 查阅官方文档就像查字典一样,是学习和理解技术的基础能力,能够帮助快速掌握语言和技术的核心内容。

问题 2: 浏览器如何正确渲染网页中的CSS和JS脚本?
回答: 浏览器通过请求获取HTML、CSS和JS等资源,并根据这些资源的内容正确渲染网页。

问题 3: 为什么在示例中CSS样式没有生效?
回答: 因为所有请求都返回了相同的HTML内容,导致CSS文件未能正确加载。

问题 4: 如何让不同的请求返回不同的内容?
回答: 通过判断请求的URL路径,使用if语句返回对应的HTML、CSS或收藏图标等内容。

问题 5: 为什么需要打印req参数?
回答: 打印req参数可以帮助观察请求的详细信息,从而理解如何根据URL路径返回不同的内容。

问题 6: 如何处理网页的收藏图标(favicon.ico)请求?
回答: 通过文件读取方法,根据URL路径返回收藏图标文件。

问题 7: 示例中提到的“实验指南”学习方法是什么?
回答: 这是一种通过打印、观察和实验来学习和解决问题的实践方法,强调用数据说话而非猜测。

问题 8: 示例中最终解决了哪些问题?
回答: 解决了不同请求返回相同内容的问题,实现了HTML、CSS和收藏图标的正确加载和显示。

问题 9: 示例中提到的“浏览器的包容性”是什么意思?
回答: 浏览器在处理网页时可能会对一些错误或异常情况进行自动修正或忽略,这可能导致一些隐藏的问题未被发现。

问题 10: 如何进一步优化网页的加载和渲染?
回答: 可以通过更细致的URL路径判断、资源压缩和缓存策略等方式进一步优化网页的加载和渲染性能。