分开的清单

菜单
一个年轻的渔夫从码头往下看水的插图,拿着钓鱼竿

插图的Dougal麦克弗森

从URL到Interactive

想象一下,如果你愿意,你驾驶着一辆华丽的1957年雪佛兰贝尔空气敞篷车,在一条宽阔的公路上穿越沙漠。太阳落山了,你已经把上面写下来了,当然。微风轻抚着你的脸颊,就像温暖的手抚摸着你的脸颊,你的鼻子也会闻到一丝……那是什么?

继续下面的条

这辆车在失去动力之前突然熄火并熄火。你的海岸,再慢一点,停下来。有蒸汽从引擎盖冒出来。哦,天哪。刚才到底发生了什么?

你伸手去打开引擎盖,打开门。得到了,你绕到车的前面去。当你松开锁闩并提起引擎盖时,你会被更多的蒸汽喷到脸上。你希望只是水。

环顾四周,很明显引擎过热了,但是你不知道你在看什么。回到家,你会发现一个人对这些旧引擎非常在行,但你爱上了奢华的曲线,鳍片,豪华的内部,公路的魅力。

一棵风滚草滚了过去。远处有只秃鹰尖叫。

引擎盖下面发生了什么?

年前,我的同事MollyHolzschlag用这个故事的一个变体来解释理解我们工具的重要性。当涉及到像汽车这样的复杂机器时,知道他们是如何工作的,真的可以让你摆脱困境。如果你不理解它们是如何工作的,好吧,秃鹰的食物

当时,莫莉和我试图说服人们学习HTML,CSS,Javascript比学习Dreamweaver更重要。像许多类似的工具一样,Dreamweaver允许您专注于网站的外观和感觉,而无需为了解HTML,CSS,它产生的javascript实际上起了作用。这种类比在今天仍然适用,尽管对框架来说可能比所见即所得设计工具更重要。

如果你仔细想想,我们整个行业都依赖于我们对少数人完全理解的“黑盒”的信念:浏览器。我们交出HTML,CSS,JavaScript,图像,等等,然后祈祷他们能将我们的经历呈现在我们的脑海中。但是浏览器是如何实现它们的功能的呢?它们如何将我们的用户从一个URL带到一个完全呈现和交互的页面?

要从URL访问Interactive,我们召集了几位知识渊博的作家作为我们的向导。这次旅行将分四段进行,在几个星期的过程中交付。每个人都会向你提供细节,帮助你更好地完成工作。

第一阶段:服务器到客户端

Ali Alabbas了解网络的出入,他首先讨论了我们的代码是如何到达浏览器的。他讨论了如何建立服务器连接,缓存,以及服务人员如何将其纳入请求和响应过程中。他还讨论了“起源模型”以及如何使用HTTP2提高性能,客户端提示,和更多。了解浏览器如何工作的这一方面无疑会帮助您更快地下载页面。

阅读文章

第2段:标记到DOM

在第二部分中,Travis leithead是W3C HTML规范的前任编辑,他带领我们完成了解析HTML的过程。他介绍了浏览器如何创建树(如DOM树)以及这些树如何成为可以通过JavaScript访问的元素集合。说到JavaScript,他甚至会讲到DOM对操纵和事件的响应,必威官网网址多少包括触摸和点击。有了这些信息,您将能够更明智地决定触摸DOM的方式和时间,如何缩短互动时间(TTI)以及如何消除意外回流。

阅读文章

支腿3:从大括号到像素

Greg Whitworth的大部分职业生涯都花在了浏览器CSS机制的研究上,他来告诉我们他们是怎么做的。他解释了如何解析CSS,如何计算值,以及级联的实际工作原理。然后他深入讨论了布局,绘画,和组成。他用有关如何管理命中测试和输入的详细信息来概括事情。了解CSS在引擎盖下的工作方式对构建弹性至关重要,性能,和漂亮的网站。

阅读文章

腿4:var对JIT

JavaScript的语言设计者之一,凯文•史密斯与我们一起讨论本系列的最后一部分,讨论浏览器如何编译和执行我们的javascript。例如,当用户离开时,浏览器会在拆掉一个页面时做什么?他们如何优化我们编写的JavaScript以使其运行得更快?他还处理了一些主题,比如使用wobetway必威体育平台rker编写在多线程中工作的代码。了解浏览器用于优化和运行JavaScript的内部进程可以帮助您编写性能和内存消耗方面更高效的代码。

阅读文章

我们走

我真诚地希望您能加入我们的网络之旅,进入浏览器将代码转化为体验的迷雾谷。

没有评论