404 Not Found
404 Not Found
The requested URL was not found on this server.
您要找的内容已被删除暂无话题描述关注话题分享阅读全文14K562 条评论分享收藏感谢阅读全文8.5K439 条评论分享收藏感谢阅读全文2.4K254 条评论分享收藏阅读全文1.6K43 条评论分享收藏阅读全文1.6K110 条评论分享收藏感谢27,021&p&作者：暮色lucas&/p&&p&链接：&a href=&https://link.zhihu.com/?target=https%3A//www.nowcoder.com/discuss/38031%3Ftype%3D0%26order%3D4%26pos%3D6%26page%3D1& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://www.&/span&&span class=&visible&&nowcoder.com/discuss/38&/span&&span class=&invisible&&031?type=0&order=4&pos=6&page=1&/span&&span class=&ellipsis&&&/span&&/a&&/p&&p&&br&&/p&&p&昨天收到了猪场的offer，华为优招问题应该不大，支付宝和IEG还在流程中，拿到一个保底就好了，把之前的面试经历总结一下回馈下牛客。搜狐、拼多多和华为就不贴了。&/p&&p&985渣硕，实验室不让实习，所以也没有实习经历。&/p&&p&&br&&/p&&h2&&b&阿里蚂蚁金服：&/b&&/h2&&p&&b&一面：&/b&&/p&&p&阿里是非常喜欢问源码的公司，一面的时候面试官说他对基础不感兴趣，所以讲了下下面几个模块的源码和主要流程。&br&React、React-Router、Redux、Vue的大致的实现原理，然后比较了下Vue和React的性能的优势和劣势。&br&一面很快，也就是十几分钟，最后和面试官聊了下RxJS拖了些时间。&/p&&p&&br&&/p&&p&&b&二面：&/b&&/p&&p&二面在差不多一周之后，还是技术面，一上来也是各种框架和框架派生的一些技术的源代码和实现原理，之后问了点基础问题。&/p&&p&git的一些命令，git pull和git fetch的区别。&/p&&p&ES6中箭头运算符this指向问题。&/p&&p&CSS中伪类选择器选择列表最后一个元素。&/p&&p&JavaScript原型链，以及如何实现继承。&/p&&p&对于现在的前端有什么看法，未来的发展方向是什么。&/p&&p&大概问了不到30分钟。&/p&&p&&br&&/p&&p&&b&三面HR：&/b&&/p&&p&阿里的HR小姐姐真的超级可爱，告诉我说她是一个懂技术的HR。QAQ。&/p&&p&问了些项目，项目中遇到的问题，自己的缺点，项目中的问题是怎么解决的等等。&/p&&p&真的是一个懂技术的HR小姐姐。。&/p&&p&说后面可能还有一轮技术面试。&/p&&p&&br&&/p&&p&&b&四面leader&/b&&/p&&p&HTTPS的原理&/p&&p&端口号的作用&/p&&p&n个元素的数组，求出一个数字最少的组合，使得这个组合的和为m，使用动态规划。&/p&&p&一个proxy服务器上有一个很大的域名黑名单，如果快速对于通过proxy的请求进行过滤。&/p&&p&和上面的类似，一个进阶问题，如果有一个很大的关键词黑名单，如何快速地对通过proxy的请求进行过滤。&/p&&p&最后等消息等到了现在，之前一面的面试官加了微信，说因为HC问题不一定能给offer，所以感觉没有交叉的我GG了，问了下自己存在的问题，面试官说一个面试官给了数据结构和算法一般，应该是leader的时候，最后一个问题没有答好导致的。&/p&&p&&br&&/p&&h2&&b&腾讯IEG&/b&&/h2&&p&腾讯IEG的面试对于前端非常不友好。也可能是部门的关系吧，最后查了下自己的简历评级是A+，能在最后被捞起来面一下也是蛮幸运的。&/p&&p&&br&&/p&&p&&b&电话一面：&/b&&/p&&p&MySQL的引擎有哪几种。&br&代理服务器的负载均衡，KeepAlive和lvs。&br&实验室项目的负载均衡是怎么实现的。&br&MySQL如何查出当天所有登录超过10次的用户，数据库里面存储的有登录日志，字段类型为时间戳。&br&主要聊得是实验室的项目和PHP、MySQL相关的东西。&/p&&p&&br&&/p&&p&&b&电话二面：&/b&&/p&&p&上来也是聊项目。。Orz&br&然后揪着PHP如何进行高并发请求处理问了大概十几分钟。&br&包括代理，负载均衡，缓存层的实现这些问题以及Apache和Nginx的区别和PHP本身对于阻塞的处理。&br&然后问了PHP的内存泄漏问题。&br&最后扯到了五面里面唯一的纯前端问题：闭包。。&/p&&p&&br&&/p&&p&&b&现场一面：&/b&&/p&&p&首先做了一套本科计算机综合试卷。。。里面有操作系统、数据结构、算法、计算机网络、C、C++等各种内容的卷子。。做的我是心神荡漾。。&/p&&p&然后面试官问你对C还是C++更熟悉一点，我支支吾吾说了C。。然后就让我写了一个C语言的字符串转INT的函数。。。&/p&&p&然后问了如何使用PHP对于TCP请求进行格式化。&/p&&p&之后问了很多和海量数据请求处理的算法和数据结构的题目，都是一些很经典的题目。&/p&&p&最后做了个智力题，让用抛硬币模拟随机数1、2、3。这个还好之前看到过。。&/p&&p&&br&&/p&&p&&b&现场GM面 + HR面&/b&&/p&&p&GM和HR基本聊得差不多。。都是一些HR常问的问题，GM基本在聊人生。。也不知道是什么情况，现在也走完了面试流程，最后等通知。&/p&&p&&br&&/p&&h2&&b&网易云音乐&/b&&/h2&&p&杭州现场面试，前一天早晨起来面了华为，下午在机场做了滴滴笔试，晚上航班延误到4点多才到杭州，早晨8点起来赶赴网易，也是为了offer拼了老命。&/p&&p&&br&&/p&&p&&b&一面&/b&&/p&&p&一面，是一个看起来就很厉害的大佬。。也是我面试的所有的最紧张的一面。。大佬给的压力太大了。。&/p&&p&首先让分析一个dropdown的效果，根据服务器返回的数据来更新dropdown列表的内容，如何实现，并且对于请求是否需要进行延迟操作，也就是debounce，然后手写了debounce的代码。&/p&&p&然后一个大量图片的轮播图怎么实现和优化，说了lazy-load的具体实现，然后动画切换的实现，使用三个元素就可以实现了。两个用于动画效果，一个用于预加载图片，在进行一次移动之后，将移出视口的元素卸载然后挂载到三个元素的最后。&/p&&p&然后还问了Vue和React源码的一些相关的东西，最后做了一个和函数调用的this对象绑定相关的题目。&/p&&p&&br&&/p&&p&&b&二面&/b&&/p&&p&二面总结一下就是deep into React，基本React能想到的东西都被问到了，组件更新过程，源码内部的一些实现细节包括Transaction等等，Vue更新过程和React的区别，Vue和React的设计思想有什么区别和优劣，甚至antd相关的也被问到了。。。HOC实现组件的封装，antd是如何实现组件的封装的，React-Redux的HOC的实现，connect函数的实现，感觉自己还是不够深入。&/p&&p&&br&&/p&&p&&b&HR面&/b&&/p&&p&HR面其实都是老一套了。。实习，生活，家庭各种问题。。最后面完了让我再等10分钟，然后查结果，被额外加了一面，带我去见总监的HR小姐姐真的好可爱。给小姐姐打call。&/p&&p&&br&&/p&&p&&b&GM面&/b&&/p&&p&其实就是对于思想方面的一轮面试，抛开技术和实现主要谈思想，对于前端整个技术栈以及web的技术栈的理解，随手问到了一些CSRF,XSS,浏览器线程模型这样的基础知识，想加入一个什么样的团队等等。&/p&&p&由于最近面试的太多了，能记得的就这么多了。希望能够帮助到大家，自己也可以复习一下之前没有理解好的知识。&/p&&p&&br&&/p&&p&&b&点击查看&/b&：&b&&a href=&https://link.zhihu.com/?target=https%3A//www.nowcoder.com/discuss%3Forder%3D4%26type%3D0& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&更多最新校招面经&/a&&/b&&/p&
作者：暮色lucas链接： 昨天收到了猪场的offer，华为优招问题应该不大，支付宝和IEG还在流程中，拿到一个保底就好了，把之前的面试经历总结一下回馈下牛客。搜狐、拼多多和华为就不贴了。985渣硕，实验室不让实习，所以也没有实习经历。 …
&figure&&img src=&https://pic4.zhimg.com/v2-ea7e8a0d8afae4dc96c41_b.jpg& data-rawwidth=&480& data-rawheight=&360& class=&origin_image zh-lightbox-thumb& width=&480& data-original=&https://pic4.zhimg.com/v2-ea7e8a0d8afae4dc96c41_r.jpg&&&/figure&&p&本交互式教程循序渐进地教您在 Chrome DevTools 中调试 JavaScript 的基本工作流程。 虽然教程介绍的是如何调试一种具体问题，但您学到的一般工作流程对调试各种类型的 JavaScript 错误均有帮助。&/p&&p&如果您使用 &code&console.log()&/code& 来查找和修正代码中的错误，可以考虑改用本教程介绍的工作流程。 其速度快得多，也更有效。&/p&&a class=&video-box& href=&https://link.zhihu.com/?target=https%3A//www.zhihu.com/video/657600& target=&_blank& data-video-id=&& data-video-playable=&true& data-name=&& data-poster=&https://pic4.zhimg.com/80/v2-29ae36ef594f94a78577_b.jpg& data-lens-id=&657600&&
&img class=&thumbnail& src=&https://pic4.zhimg.com/80/v2-29ae36ef594f94a78577_b.jpg&&&span class=&content&&
&span class=&title&&&span class=&z-ico-extern-gray&&&/span&&span class=&z-ico-extern-blue&&&/span&&/span&
&span class=&url&&&span class=&z-ico-video&&&/span&https://www.zhihu.com/video/657600&/span&
&p&视频中提到的链接：&/p&&ul&&li&Demo：&a href=&https://link.zhihu.com/?target=https%3A//git.io/vNT4A& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&git.io/vNT4A&/span&&span class=&invisible&&&/span&&/a&&/li&&li&本教程的文字版本：&a href=&https://link.zhihu.com/?target=https%3A//goo.gl/NZxQdD& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&goo.gl/NZxQdD&/span&&span class=&invisible&&&/span&&/a&&/li&&li&Breakpoints Guide: &a href=&https://link.zhihu.com/?target=https%3A//goo.gl/9XYhhF& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&goo.gl/9XYhhF&/span&&span class=&invisible&&&/span&&/a&&/li&&li&JavaScript Debugging Reference: &a href=&https://link.zhihu.com/?target=https%3A//goo.gl/osaf2& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&goo.gl/osaf2&/span&&span class=&invisible&&&/span&&/a&&/li&&/ul&&p&“Chrome DevTools 101”是个系列视频， 欢迎在 B 站订阅：&a href=&https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/av/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Chrome DevTools 101- Debugging JavaScript&/a&&/p&&p&也可以通过搜索“&b&代码之声&/b&”或“&b&codefm&/b&”关注我的公众号。或者扫描二维码关注。&/p&&p&二维码地址：&a href=&https://link.zhihu.com/?target=http%3A//7te8oy.com1.z0.glb.clouddn.com/qrcode_for_codefm_258.jpg& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&7te8oy.com1.z0.glb.clouddn.com&/span&&span class=&invisible&&/qrcode_for_codefm_258.jpg&/span&&span class=&ellipsis&&&/span&&/a&&/p&
本交互式教程循序渐进地教您在 Chrome DevTools 中调试 JavaScript 的基本工作流程。 虽然教程介绍的是如何调试一种具体问题，但您学到的一般工作流程对调试各种类型的 JavaScript 错误均有帮助。如果您使用 console.log() 来查找和修正代码中的错误，可以…
&figure&&img src=&https://pic2.zhimg.com/v2-dffb353ffd30f5b6dd88fe_b.jpg& data-rawwidth=&2864& data-rawheight=&1152& class=&origin_image zh-lightbox-thumb& width=&2864& data-original=&https://pic2.zhimg.com/v2-dffb353ffd30f5b6dd88fe_r.jpg&&&/figure&&p&上周六参加了咱们首届蚂蚁体验科技大会，并且有幸成为第一个开场的主讲人。在会后感受到了很多设计师和工程师同学对于设计体系以及 3.0 设计语言的兴趣以及热情，深受感动。说实话在过去有蛮久一段时间，因为这类产品不太容易被太多人所感知，因此也常常会被大家误解成是比较枯燥且单一的领域。体验技术部 UED 从 14 年底成立到现在已经 3 年多了，期间我们的设计师和工程师一直默默的耕耘在企业级产品这片土壤上，在潜心积累经验的同时也让我们逐渐的沉下心去探索设计最本源的东西。希望通过这一次的对外发声，可以让企业级产品的这一个领域被更多人所关注，当然如果你来自其他的领域，也希望这样的内容可以对你有所启发。:)&/p&&p&1 月 6 日当天，我们还对外正式发布了 Ant Design 3.0，正式将 Ant Design 从 UI 组件库的概念升级至&b&面向企业级的设计体系&/b&的概念。这篇文章也会分成两个部分，依次为大家介绍我们的设计体系以及设计语言 3.0 的『自然之美』。&/p&&p&顺手，附上发布会当天演讲视频，请各位品尝～&/p&&p&&br&&/p&&p&～～～～～～～～～～～～视频地址在此～～～～～～～～～～～～&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//v.youku.com/v_show/id_XMzMwMTI4NjIyNA%3D%3D.html%3Fspm%3Da2h3j.6059.1& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Ant Design 3.0 背后的故事 — 它山&/a&&/p&&p&～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～&/p&&p& &/p&&p&&br&&/p&&h2&&b&设计体系&/b&&/h2&&p&说起设计体系的前身我想大家应该都不陌生，英文叫 style guide，通常我们称之为设计规范。一个团队或是产品的主设计师常常会基于团队当下的设计习惯产出这类的文档。内容通常包含了字体、颜色、按钮、图标、常用的组件、甚至是页面框架，交互原则等。在过去很长一段时间里，我们用它来解决产出物的一致性，提升设计的效率。&/p&&p&然而这种形式并不能实质性的解决问题。当产品开始不断的迭代更新、团队人员的加入或者离开、外部技术的变革、用户使用习惯的变化等等这些情况发生的时候，基于当下设计现状以及习惯的静态内容就难以应对。随着时间的推移，设计产出的不确定性就会越来越高。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-e8bed85dae74edbf59e1cf3_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&2880& data-rawheight=&1176& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic4.zhimg.com/v2-e8bed85dae74edbf59e1cf3_r.jpg&&&/figure&&p&因此我们需要一种新的更具包容性和多元化的思路，可以帮助我们将不确定性控制在一定范围内，从而真正的释放重复劳动，让更多的设计者有机会去触及更好的产品体验，这就是设计体系。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-eb30c6d6df13019adc3b30b7c8650b98_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&2880& data-rawheight=&1176& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic1.zhimg.com/v2-eb30c6d6df13019adc3b30b7c8650b98_r.jpg&&&/figure&&p&那么，什么是设计体系呢？我个人最早接触到设计体系的概念来自 Brad Frost 的一本书，书名叫 &a href=&http://link.zhihu.com/?target=http%3A//atomicdesign.bradfrost.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Atomic Design&/a&（作者很 open，这本电子书可以在线直接阅读）。他提出的模块化思路以及原子级的模块抽象的方法启发了后来非常多的设计师以及团队（比如 GE 的 predix design system）。目前在网络上关于这个概念的解释也是非常多的，其中有一种类型的解释是我个人比较认同的，提出者认为设计体系是一个具包容性且充满生命力的东西。包容性指的是从组件库到设计语言到设计方法等所有和产品设计相关的方面。而生命力指的是它并非静态的内容，而是可以应对不断变化的环境，是一个不断进化的过程。&/p&&p&当然，设计体系的最终极目标依然是为了实现更好的用户体验。而为了这一目标，我们需要先建立起一个强大的基础设施来解决可控性以及效率的问题。目前在网络上的多数有关于设计体系的专题文章基本上也都是集中在这两块做解读，而在蚂蚁我们的设计体系已经往前探出了一小步。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-74fcf96dfb00e096ddce0f0a_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&2880& data-rawheight=&1176& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic3.zhimg.com/v2-74fcf96dfb00e096ddce0f0a_r.jpg&&&/figure&&p&&br&&/p&&h2&&b&关于蚂蚁企业级产品&/b&&/h2&&p&在开始进一步介绍我们的设计体系之前我想先介绍一下我们所服务的产品，冰山图大家应该脑子里都能联想的起来（我这里就不贴了）。一说起蚂蚁金服，相信很多人对支付宝钱包、芝麻信用、网商银行、春节红包、蚂蚁森林这些应用并不陌生。这些在我们蚂蚁的整个产品体系中，属于水面以上的部分。而 Ant Design 所服务的企业级产品更多的是属于水面以下的部分，这是一个非常庞大且复杂的产品网。功能囊括了资金、运维、研发、安全、风控、效能管理、渠道管理等所有维持我们前台业务快速高效安全稳定运行的模块。&/p&&p&总结一下，我们的企业级产品有这样几个特点：&/p&&ul&&li&首先，这类产品往往量级非常大且功能复杂，咱们整个蚂蚁的企业级产品加起来有上千个之多。&/li&&li&其次，这类产品项目变动非常频繁，且并发很多，需要设计师甚至开发们随时快速的做出响应。&/li&&li&第三，产品间往往有较高的关联性，因此对于一致性的要求也较高。&/li&&li&第四、这类产品往往存在蛮多共性，可以通过抽象，提取出一些非常有价值的模式。这对于我们从事这一领域的设计师而言是无疑一片巨大的沃土。&/li&&li&第五、这类产品的使用者大多具备很强的专业性，设计师在设计的时候比较难快速的建立起用户同理心，并且在市面上可以参照的竞品以及用户心智模型都是非常少见的。因此，了解用户的诉求就变得格外的重要。&/li&&li&最后、开放的趋势。随着越来越多的企业级产品成熟并对外开放（比如：蚂蚁金融云），我们坚信在未来在这一个领域对于产品体验的要求会越来越高。&/li&&/ul&&p&面对这样一个庞大且复杂的产品背景，我们 30 几个人的设计团队要实现 better UX 的终极目标就必须依靠设计体系的思路。当然也是借助设计体系，我们的团队目前已经支撑了蚂蚁内部大约 800 个以上的企业级产品（这个数字不包括开源项目服务的那一部分集团以及外部的数字），其中有大约 10% 的产品正在通过我们体验策略逐渐地提升用户体验。&/p&&h2&&b&Ant Design System&/b&&/h2&&p&那么我们的设计体系是怎样构成的呢？让我们一起来看一下这一张大图。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-2bf335c0f701f4b4c517fc6cc1dea840_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&2880& data-rawheight=&1176& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic1.zhimg.com/v2-2bf335c0f701f4b4c517fc6cc1dea840_r.jpg&&&/figure&&ul&&li&&b&Efficiency -- 高效&/b& 这部分对应的是我们的设计资产。设计资产除了基础组件库以及 pro 组件库（UI 资产）之外，还包涵设计资源、技术文档以及我们的设计资源。这部分是我们整个设计体系的起点同时也是基础。&/li&&li&&b&Consistency -- 可控性&/b& &b&C&/b&onsistency 是将不确定性控制在一定范围内的思路，这一部分交给我们的设计语言。&/li&&li&&b&Better UX -- 更好的体验&/b& 与之对应的是体验策略，包涵了设计流程方法、度量体系、体验运营等等。&/li&&/ul&&p&设计语言、设计资产以及体验策略是我们设计体系最核心的三块内容，分别对应的解决设计体系中的 Consistency、Efficiency 以及 Better UX 的目标。当然这还是不够的，我们还需要一个多元化并且具备活力的团队来维持系统的健康运作，并且在过程中又可能进一步迸发出提升效率的产品概念，这就是工具化。（这一块目前我们正在发力中，所以我要暂时先买个关子。）&/p&&h2&&b&团队模型&/b&&/h2&&p&前面我们有提到过一个设计体系对应的需要有一个团队去维持它的运作。大家都知道，我们的体验技术部本身就是是一个集合了工程师和设计师的多元化的大团队。针对设计体系，我们有一个大约十几个人的核心团队（System Operation Team），由工程师和设计师组成，合力维护着整个体系最为核心的三块内容。在这过程中我们还兼顾着 PD 以及运营的职责。&/p&&p&核心小组并不是完全脱离业务线的工作的。绝多数的设计师和工程师同时还会有有一半以上的经历参与在具体的产品设计中，这样的方式可以保证我们所沉淀的设计模式始终来自于实际的场景，同时新产生的内容可以快速的在实际场景中的得以验证。&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-598cceeb8d29bd37d69056fd32fec1a2_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&2433& data-rawheight=&1272& class=&origin_image zh-lightbox-thumb& width=&2433& data-original=&https://pic3.zhimg.com/v2-598cceeb8d29bd37d69056fd32fec1a2_r.jpg&&&/figure&&p&&br&&/p&&p&此外，在核心团队之外，所有业务线的设计师也会组成一个一个的分舵，我们有定期的团队沟通机制，内部开放的设计资产池以及小组间的合作项目来保证核心团队同业务团队的紧密性。核心团队的成员也并非是固定不变的，除了几个关键人员之外，定期会有人员的流入和流出，目的是保证团队的活性，这也是维持设计体系生命力的一种方式。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-90c6e3d1eccd4f85e5e7e52f_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&2433& data-rawheight=&1272& class=&origin_image zh-lightbox-thumb& width=&2433& data-original=&https://pic1.zhimg.com/v2-90c6e3d1eccd4f85e5e7e52f_r.jpg&&&/figure&&p&&br&&/p&&h2&&b&设计资产&/b&&/h2&&p&设计资产是我们整个设计体系的起点，也是设计和技术结合最为紧密的一个部分。除了 design+coding 的 UI 资产之外，还包涵了与之对应的设计文档、技术文档，以及助力设计提效的各类资源包。设计资产是以 『模块化』为核心思路展开的。 在过去的一年里，我们在 Atomic Design 以及 GE predix design 的启发上，形成了符合我们自己特点的 E (examples)、T (template)、C（components）、G（global styles） 的抽象思路。&/p&&p&目前大家在 Ant Design 网站上所感知到的基础组件以及 Ant Design Pro 这两块内容都是基于 ETCG 的思路一步一步抽象出来的，这些内容是我们团队在企业级业务场景中抽象出来的最为稳定以及复用程度最高的部分。然而这只是我们的设计体系对外的内容，在内部从产品层到业务层，我们都不断在积累稳定且高复用的模块, 通过开放的内部资产池以及灵活的沟通机制确保和开方的内容之间的紧密联系，于此同时在外部借由开源社区的力量，令整个 UI 资产的小生态始终保持活力。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-ee4afcc765dbf_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&2433& data-rawheight=&1272& class=&origin_image zh-lightbox-thumb& width=&2433& data-original=&https://pic4.zhimg.com/v2-ee4afcc765dbf_r.jpg&&&/figure&&p&&br&&/p&&h2&&b&体验策略&/b&&/h2&&p&体验策略是我们在设计资产的基础之上往前走的一小步，体验策略的核心思路是以任务为导向的。在这一思路的带领下，我们主要通过四个方面去构建体验策略。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-0fef870bfafb70d68e789bd52955fade_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&2433& data-rawheight=&1272& class=&origin_image zh-lightbox-thumb& width=&2433& data-original=&https://pic3.zhimg.com/v2-0fef870bfafb70d68e789bd52955fade_r.jpg&&&/figure&&p&&br&&/p&&ul&&li&&b&流程与方法&/b&：在产品前期就开始大量的推行用户体验地图，确保用户需求能够在产品前期就明确被整个团队所感知。&/li&&li&&b&度量体系&/b&：着重于 task sucess 核心任务进行度量。&/li&&li&&b&运营活动&/b&：当然体验不是设计师一种角色的事，我们还会通过 &b&体验一起造&/b& 活动将产品的各方人员 involve 进来，共同关注产品体验发掘产品问题。&/li&&li&&b&最佳实践&/b&：是体验策略的最终目标，过程中产出模块化的解决方案可以反哺给 UI 资产，而核心流程与方法再沉淀之后又可以帮助到更多的产品。&/li&&/ul&&p&&br&&/p&&h2&&b&设计语言&/b&&/h2&&p&服务可控性的设计语言，在理想情况下应该和设计资产以及体验策略都有很密切的关联性。在目前这个阶段，由于我们的设计资产跑的相对更快，因此 3.0 的设计语言和设计资产的关系会显得更为紧密。&/p&&p&&br&&/p&&h2&&b&自然之美&/b&&/h2&&p&Ant Design 设计语言的核心是设计价值观，设计价值观影响到设计的各类场景，产生与之对应的原则、视觉呈现方式、交互模式等内容。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-18e32aebedc09fc4b5e5f_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&3234& data-rawheight=&1224& class=&origin_image zh-lightbox-thumb& width=&3234& data-original=&https://pic2.zhimg.com/v2-18e32aebedc09fc4b5e5f_r.jpg&&&/figure&&p&Ant Design 的设计价值观，从 1.0 版本的时候就已经有开始提及，最初的版本是微小、确定以及幸福感，分别指代我们的细节微创新、模块化思路以及在研发体验上的追求。随着体系的成型，3.0 我们在保留 『确定』的基础上，又发掘出了『自然』。新的这一个价值对 web 界面的视觉基础有很大的启发，可以说 3.0 的整个视觉呈现都是基于『自然』而来的。&/p&&p&Ant Design 认为，一切看似自然的事物在背后都是有数学/物理规律可循的。映射到我们的设计中，从自然的数理规律中寻找启发，理性的看待我们设计决策的过程，将设计结果、影响结果的变量、以及他们之间的规律发掘出来，就是我们的方向。而这个理性思考，感性表达的过程和我们团队的技术基因也是非常匹配的。&/p&&a class=&video-box& href=&http://link.zhihu.com/?target=https%3A//www.zhihu.com/video/420160& target=&_blank& data-video-id=&& data-video-playable=&true& data-name=&& data-poster=&https://pic3.zhimg.com/80/v2-27b88bc679afc5b260aa93f11bfaf392_b.jpg& data-lens-id=&420160&&
&img class=&thumbnail& src=&https://pic3.zhimg.com/80/v2-27b88bc679afc5b260aa93f11bfaf392_b.jpg&&&span class=&content&&
&span class=&title&&&span class=&z-ico-extern-gray&&&/span&&span class=&z-ico-extern-blue&&&/span&&/span&
&span class=&url&&&span class=&z-ico-video&&&/span&https://www.zhihu.com/video/420160&/span&
&p&在『自然』这个新的价值观的驱动下，3.0 我们一共开展了字体、布局以及色彩三方面的探索。由于篇幅的关系，我会着重为大家展示我们在字体设计上的一整个推导过程，并在最后对另外两个课题做简单的介绍。&/p&&p&&br&&/p&&h2&&b&主字号、字阶和行高&/b&&/h2&&p&字体是 UI 设计中一个非常基础的话题。设计师在字体设计过程中需要关注非常多的方面，比如字体家族、主字体、字阶、行高、字重、行间距、字间距等等。3.0 在字体领域上我们着重解决的是三个问题：主字体、字阶段以及行高。这三者之间在设计决策时还存在一个递进关系。接下来就让我们一起用提问的方式来看一下我们的推导过程。&/p&&p&&b&我们的第一个问题是：多大的主字号是自然的？&/b&&/p&&p&在 3.0 之前的设计中，我们的主字体定义的是 12px，这个决策基本上是基于我们在企业级设计场景中的经验来定的。那么 3.0 我们是怎样做的呢 ？让我们来看一下这张图。&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-0b5e31c6e085ba4cc453bc4b690e0489_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&2880& data-rawheight=&828& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic2.zhimg.com/v2-0b5e31c6e085ba4cc453bc4b690e0489_r.jpg&&&/figure&&p&肉眼到物体之间的距离，物体的高度以及这个三角形的角度，构成了一个三角函数的关系。而公式中的 h 的值和我们要解决的核心问题『主字号』有着很大的关系。关于这个 a 的角度，有机构和团队做过研究，当大于 0.3 度时的阅读效率是最好的。同时我们在操作电脑时，一般来说眼睛距离电脑屏幕的平均值大概会在 50 厘米左右。然而，公式中的距离和高度的单位都是厘米，字体的单位是 pixel。因此我们还需要将二者之间做一轮转换，完成转换所需的两个数值分别是 2.45（cm 到 inch）和 PPI（inch 到 pixel）。&/p&&p&我们假定 PPI 为 120。通过计算便可以得出在显示器的 PPI 为 120 的情况下，理论上大于 12px 的字体能够满足用户的最佳阅读效率。基于这样的思路，确定主流 PPI 的范围，就很容易锁定主字体的大小了。根据网络上的数据来源，我们发现只有大约 37.6% 的显示器 PPI 是小于 120 的，而 PPI 在 120－140 的显示器的占比大约为 40%。换句话说 12px 的字体只能满足 37.6% 用户的阅读体验，但如果我们将字体放大到 14px，就可以保证大约 77% 的显示器用户处于比较好的阅读体验。因此在 3.0 我们将主字号进行了升级，从原本的 12px 调整至 14px。&/p&&p&在这个问题的解答过程中，我们遵循的规律是一个三角函数，决定这个三角函数结果的变量分别是 a 角度、d 距离、以及显示设备的 PPI。 根据这样的思路我们同样可以非常简单的推导出手机客户端的主字体大小。&/p&&p&&b&我们现在有了一颗 14px 的字体种子，把它种到土里，是否能像豆苗一样发芽并长出一系列自然的字阶呢？这就是我们接下来的第二个问题（听起来很天马行空，但我们决定挑战下）。&/b&&/p&&p&Robet Bringhurst 在他的字体样式元素一书中有提出过，定义有规律的字阶是构建设计秩序感的基础。同时他又提出经典的字阶和古典音阶具备韵律上的相似性。在这个思想的基础之上，有个叫做 Spencer 的人提出了一个幂函数的字体计算公式。用图形化来表达就是这样的。有了这一个公式，让一粒 14px 的字体种子种发芽的想法就变得不是那么的天马行空了。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-aadae4e805ceabb39d4b9cc_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&2880& data-rawheight=&900& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic1.zhimg.com/v2-aadae4e805ceabb39d4b9cc_r.jpg&&&/figure&&p&f0 我们可以理解成为起始字号，也就是主字体，我们前面有推导出来为 14px。r 的值决定了这条曲线的趋势，可以理解成字阶的生长一个趋势。这个数值的启发来源于自然常数 e，这是一个无理数，大约等于 2.71828。n 则代表了我们如何在曲线上取对应的数字，决定这个数值大小的关键在于我们希望相邻的两个字号之间的差距是大还是小。Spencer 在他的文章中有提到过，建议 n 在选择上可以参考音律的规则，比如说 3 音阶、4 音阶、5 音阶、7音阶等等，这样可以令字阶呈现出一种自然的节奏感。在做了大量的页面落地试验之后我们将这个数值定成 5。映射到音乐的世界中，正好是 5 音阶。5 声音阶是很多古典乐遵循的规律，比如我国古代的宫商角徵羽。&/p&&p&我们将三个数值代入到前面公式之后，可以得到一组关于字阶的原始数组。它们是基于 14px 的字体，以自然常数的生长律，同时用 5 声音阶的单元切分方式得出来的。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-b81bcba7e1d4b4baa83b4b1fb54b2bbe_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&2880& data-rawheight=&969& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic3.zhimg.com/v2-b81bcba7e1d4b4baa83b4b1fb54b2bbe_r.jpg&&&/figure&&p&在第二个问题的解决过程，字阶的规律是一个幂函数。决定这个幂函数结果的变量是起始字号、生长律以及单元等分的次数。目前我们只取了曲线上的 10 个字号作为默认的字阶，当设计对字体有更大的要求的时候，同样可以基于这个规律快速锁定我们想要的字号。&/p&&p&&b&OK，有了字阶，我们就可以进一步推导第三个问题：多大的行高是自然的？&/b&&/p&&p&行高大家都知道指的是一个字体外框的肉眼不可见的部分。在 Ant Design 的第一版行高计算思路中，我们用字体乘一个固定的倍数去定义行高。但在实际设计中，我们发现这样的方式会有一个问题，当字体越大，行高也会越来越大。在字体 2.0 的时候，我们在字阶上做了一个分水岭，超过某一个字号的字体行高一律乘以一倍。但以上这两种做法会增加我们在排版布局层面的规则复杂度，同时不便于计算和记忆。在 3.0 这个阶段，我们决定尝试用『自然』来解决这一问题。首先，我们需要定义出行高的计算规律，除了字阶的计算公式之外，我们还有另外两个信息的输入：&/p&&ul&&li&设计师希望字体高度和行高之间能从静态黄金比出发。&/li&&li&但是基于设计经验，同时不给布局造成压力，我们希望行高的增长速度能够随着字体的增长逐渐趋向于缓慢，并且最终不要超过 1 倍。&/li&&/ul&&p&借由这样的思路。我们在字号的基础之上将增长率做了一个自然律反相的负增长，从而定义了行高的计算公式。根据这一公式，同样的我们得到了一组原始的行高数组。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-999e1ddfbbbc44fcf83e10ab64c5667b_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&2880& data-rawheight=&900& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic4.zhimg.com/v2-999e1ddfbbbc44fcf83e10ab64c5667b_r.jpg&&&/figure&&p&现在我们拥有了两组基于 14px 的原始字号。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-6fd23bfedd6ca1c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&920& data-rawheight=&313& class=&origin_image zh-lightbox-thumb& width=&920& data-original=&https://pic1.zhimg.com/v2-6fd23bfedd6ca1c_r.jpg&&&/figure&&p&基于上面这两组字号，我们还需要微调让它们可以进一步落地应用，这两个原则分别为：偶数原则和简化记忆原则。经过调整之后，右边这一组字号就是这一次的字体 3.0。所有的字体以及行高都符合偶数原则，并且行高和字体之间都相差 8，更加便于记忆。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-493aabaac7f63d5dca319_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&2880& data-rawheight=&1176& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic2.zhimg.com/v2-493aabaac7f63d5dca319_r.jpg&&&/figure&&p&现在，我们将这 10 个字号带行高从小到大依次进行排列，每一个字号之间的间隔都为 16px。然后，我们将之前两个版本的字号带行高按照同样的间隔排列。让我们看一下三个版本之间的差别。可以明显的感受到第三个版本的字体排列起来更为自然，同时更有秩序感。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-947d966fc39500b06eada9_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&2880& data-rawheight=&1176& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic2.zhimg.com/v2-947d966fc39500b06eada9_r.jpg&&&/figure&&p&当然，新的字号还需要进一步落地到实际页面中进行可行性验证。大家都知道实际的设计过程中有非常多的因素会影响我们设计对于一个页面结果的判断，为了让字体更好的被感知，我们通过去色去图形的方式来加强字体的被感知度。设计师用这样的方式一共反复尝试了近 200 多张页面的设计，覆盖了后台大部分类型的场景。得到的结果是：&/p&&ul&&li&新的字阶在落地中可以实现更为和谐的界面结果。&/li&&li&设计师在使用这一套字阶的时候明显感觉到设计决策的过程变的轻松很多。&/li&&li&不同的设计师产出页面一致性都比以前有了明显的提升。&/li&&/ul&&p&总结一下：整个字体的推导过程就是发掘结果和变量间的规律的过程，并且自然的数理规律在这当中起到了很大的作用。借由这样的过程，我们将原本感性的设计思考通过理性的方式呈现出来，让设计者可以更为自信的去应对不断发生的变化，这就是可控性。&/p&&h2&&b&布局与色彩&/b&&/h2&&p&同样，布局 3.0 也是基于和字体相似的思路完成的。启发来自法国建筑大师柯布西耶的模度一书。柯布西耶受到斐波那契双数组的启发通过对人体黄金比例关系的拿捏定义出红蓝表双数组用于建筑领域的空间布局。同样的，我们将斐波那契双数组的思路映射到 web 布局研究中，得到了布局设计的双数组，帮助我们的设计师在布局设计决策中更好的实现动态的秩序感。这一次发布的 pro 的空间布局设计，就是基于这部分的结论产出的。进一步了解 3.0 的布局可以到 &a href=&http://link.zhihu.com/?target=https%3A//ant.design/docs/spec/layout-cn& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&这里&/a&。&/p&&p&色彩 3.0 的思路和字体以及布局略微有些许不同。因为色彩相对于字体以及布局来说更加会偏向与感性，但色彩的背后也是有数理规律可循的。定义 3.0 的色彩我们主要分成了两个部分。在第一阶段，我们的设计师从自然中去选择 12 个主色，进一步定义了 3.0 的色环。第二阶段是基于主色去进一步的定义色彩的明暗变化，在这一个过程中，我们通过搭建三维模拟空间的方式，通过大量观察和调试，掌握了不同颜色在自然光照下对应的 HSB 的变化规律，最终形成了我们 3.0 的色板。我们的工程师将设计师发现的数理规律通过代码的方式实现出来，让设计师可以跳出12色的框架进行色彩的决策，只需定义合理的主色便可以得到一系列自然的色彩变化，从而简化了传统的色彩决策过程。和之前两个版本的色板相比较，3.0 的色板更加符合我们肉眼对色彩变化的自然认知，并且能够令界面整体更为明亮和愉悦。进一步了解我们的色板可以到 &a href=&http://link.zhihu.com/?target=https%3A//ant.design/docs/spec/colors-cn& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&这里&/a&。&/p&&p&最后想说的是，设计语言服务的可控性并不等于限制。基于可控性这一目标，我们将原本设计团队中核心设计师的个人经验理性的释放出来，形成易理解、可传承的知识，再反哺回团队的时候就能在很大程度上批量的提升设计产出的质量，同时也能让不同程度的设计者在设计决策的时候能更加自信，继而保证我们的设计下限不断的被提升。但是在一个充满生命力且不断进化的设计体系中，好的设计永远是没有上限的。不论是字体、布局还是颜色，甚至是未来的图形化、动效等领域，Ant Design 始终会坚持往前探索的态度，努力的越做越好。&/p&&h2&&b&结语&/b&&/h2&&p&Ant Design 3.0 的发布推出了全面升级的设计体系的概念。但对于我们来说，在追求企业级产品的 Better UX 这一终极目标上才刚刚迈出了第一步。未来还有很长的路要走，我们的设计资产在未来能否真正的敲开行业解决方案的大门从而服务更多的人，企业级体验策略是否可以沉淀出越来越多的最佳实践，在反哺设计资产的同时又能够推动设计语言的进一步升级，此外还有前面我们提到的产品化等等……&/p&&p&嗯，我想一切才刚刚开始。但想起来总觉得有那么一点小激动。&/p&&p&&br&&/p&&p&视频地址再来一次：&a href=&http://link.zhihu.com/?target=http%3A//v.youku.com/v_show/id_XMzMwMTI4NjIyNA%3D%3D.html%3Fspm%3Da2h3j.6059.1& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Ant Design 3.0 背后的故事 — 它山&/a&&/p&&p&&br&&/p&&p&最后，演讲 PPT 已精心整理并转换为 PDF 上传至 &a href=&http://link.zhihu.com/?target=http%3A//yuque.com/seeconf& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&SEE Conf 语雀在线知识库&/a&，欢迎下载（请 &a href=&http://link.zhihu.com/?target=http%3A//yuque.com/register/trial& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&注册语雀&/a&，个人描述内注明 #知乎seeconf# 便可快速申请邀请码，登录后即可下载）：&/p&&p&&br&&/p&&p&&b&&a href=&http://link.zhihu.com/?target=http%3A//yuque.com/seeconf/see-01/highlights%23%25E8%25B5%%E4%25B8%258B%25E8%25BD%25BD& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&点此前往语雀下载&/a&&/b&&/p&&p&&/p&
上周六参加了咱们首届蚂蚁体验科技大会，并且有幸成为第一个开场的主讲人。在会后感受到了很多设计师和工程师同学对于设计体系以及 3.0 设计语言的兴趣以及热情，深受感动。说实话在过去有蛮久一段时间，因为这类产品不太容易被太多人所感知，因此也常常会…
&figure&&img src=&https://pic4.zhimg.com/v2-deb863dbfd22c1acc2865e_b.jpg& data-rawwidth=&720& data-rawheight=&405& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic4.zhimg.com/v2-deb863dbfd22c1acc2865e_r.jpg&&&/figure&&p&本文的目标是以“输入 URL 后发生了什么”这个经典面试题为引子，写一篇既能够涵盖面试中大部分网络试题，又能够将“输入 URL 后发生什么”讲得有深度的文章。以前写过一篇类似的&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&文章&/a&，但实在过于简单。另外，HTTPS 逐渐普及，文章中没有这部分过程也说不过去。不想修改原来的文章，就重新写一篇吧。文中以我所在的项目“兴趣部落”的官网 &a href=&https://link.zhihu.com/?target=https%3A//buluo.qq.com/index.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&buluo.qq.com/index.html&/span&&span class=&invisible&&&/span&&/a& 为例子。&/p&&h2&生成 HTTP 请求消息&/h2&&p&解析完要访问的目标服务器是啥了，接下来浏览器就会用 HTTP 协议生成请求消息去 web服务器请求资源，消息格式如下：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-fc59c19b7e6758fb3fdef_b.jpg& data-rawwidth=&440& data-rawheight=&213& class=&origin_image zh-lightbox-thumb& width=&440& data-original=&https://pic1.zhimg.com/v2-fc59c19b7e6758fb3fdef_r.jpg&&&/figure&&p&&br&&/p&&p&请求信息主要包括：&/p&&ul&&li&请求行：请求的方法（POST/GET/…）、URL、HTTP版本（1.1/2）；&/li&&li&消息头：请求的附加信息，以空行结束；&/li&&li&消息体：数据，比如 POST 请求时的表单数据。&/li&&/ul&&p&对应的，响应消息也有 3 个部分组成：&/p&&ul&&li&状态行：HTTP版本、状态码（200/304/404/…）、解释状态的响应短语；&/li&&li&消息头&/li&&li&消息体：返回的数据。&/li&&/ul&&p&用图表示：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-bdaf24f6cbe6e754ef395f_b.jpg& data-rawwidth=&492& data-rawheight=&213& class=&origin_image zh-lightbox-thumb& width=&492& data-original=&https://pic4.zhimg.com/v2-bdaf24f6cbe6e754ef395f_r.jpg&&&/figure&&p&&br&&/p&&h2&DNS&/h2&&p&生成 HTTP 消息后，浏览器委托操作系统将消息发送给 web服务器。而通过 web服务器的名称是没法找到服务器在哪的，好比知道一个人的名字没法找到他家在哪一样，网络中的地址是用 IP 地址表示的，所以要想跟服务器通信，得先找到它的 IP 地址，使用 DNS（Domain Name System，域名服务系统） 服务器可以将 web服务器名称转换成 IP 地址。那这个过程是怎样的呢？&/p&&p&操作系统有一个 Socket 库，这个库中的程序主要是让应用程序调用操作系统的网络功能，而在这些功能中，浏览器需要调取操作系统的 DNS 解析功能。DNS 解析器生成一条表示“告诉我 &a href=&https://link.zhihu.com/?target=https%3A//buluo.qq.com/index.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&buluo.qq.com/index.html&/span&&span class=&invisible&&&/span&&/a& 的 IP 地址”的消息，然后委托操作系统的协议栈发送 UDP 消息到 DNS 服务器。那这条消息是如何发送到 DNS 服务器又是如何将 IP 地址返回的呢？&/p&&p&首先介绍下操作系统中 DNS 解析器发送给 DNS 服务器的消息内容，消息中包含 1）域名：&a href=&https://link.zhihu.com/?target=http%3A//buluo.qq.com& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&buluo.qq.com&/span&&span class=&invisible&&&/span&&/a&；2）Class: IN，代表当前的网络是因特网，DNS 设计之初还考虑了其他网络，虽然现在只有互联网，但这个字段还是保留了下来；3）记录类型：A，表示域名对应的是 IP 地址，因为 DNS 还能解析其他地址，比如类型为 MX 时 DNS 服务器会查询邮件服务器地址。DNS 服务器中维护一张表，表的每一项包含上面三个字段还有服务器地址，当域名、Class、记录类型全部匹配时，DNS 服务器返回地址，在例子中会返回兴趣部落首页的 IP 地址。&/p&&p&但这个时候问题来了，世界上有不计其数的服务器，将这些所有的服务器信息都保存在一个 DNS 的表中肯定是不现实的，所以肯定有很多台 DNS 服务器一起配合完成这个域名解析过程的，那具体过程是什么样的呢？&/p&&p&首先，DNS 服务器中的所有信息都是按照域名来划分层次的，这个层次是用 . 来分隔的，越靠右层次越高，比如 “buluo.qq.com” 中 “com” 层次最高，“qq” 次之，“buluo” 最后，其中每一层都被称为“域”，比如 “com 域”下是 “qq” 域，再下是 “buluo” 域，域的层次划分是为了更好地分配给不同国家、公司和组织等，典型的例子像南京市政府的官网：“www.nanjing.gov.cn”，“cn” 代表中国这个国家的域，“gov” 代表这个国家下的政府组织，“nanjing” 代表南京市政府。域有层次之分，那 DNS 服务器呢？规定将管理下级域的 DNS 服务器的 IP地址注册到上级的 DNS 服务器中，比如管理 “buluo.qq.com” 这个域的 DNS 服务器的 IP地址需要注册到 “qq.com” 域的 DNS 服务器中，以此类推，一直到“根域”，就是 “cn”、“com” 这类域的上一层次，根域中就保存了 “cn”、“com” 等域名的 DNS 服务器信息。此外，还需要将根域的 DNS 服务器信息保存在所有的 DNS 服务器中，这样只要找到一台 DNS 服务器就可以顺藤摸瓜找到下层任何一个 DNS 服务器。知道了域的层次划分以及 DNS 服务器的分布，下面就正式介绍如何寻找到相应的 DNS 服务器并获取 IP 地址。&/p&&p&首先，客户端会访问最近的一台 DNS 服务器，但由于这台 DNS 服务器上没有 “buluo.qq.com” 这个域名的对应的信息，所以就向根域 DNS 服务器发请求询问，但根域中也没有，但判定这个域名是属于 “com” 域的，所以就返回其管理的 “com” 域的 DNS 服务器的 IP 地址，意思是“虽然我不知道，但你可以去某某处问问，他应该知道”。然后 最近的那个 DNS 服务器又向 “com” 域的 DNS 服务器发请求，同理，也不知道，然后返回 “qq.com” 域的 DNS 服务器，然后这台最近的 DNS 服务器又向 “qq.com” 域 DNS 服务器发请求，仍然没有，直到最后，向 “buluo.qq.com” 这个域下的 DNS 服务器发请求才拿到 IP 地址。接着，这台最近的 DNS 服务器将获得的 “buluo.qq.com” 的 IP 地址返回给客户端，客户端再拿着这个 IP 地址去请求资源。以上的过程用图表示如下：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-bae352cba9_b.jpg& data-rawwidth=&768& data-rawheight=&456& class=&origin_image zh-lightbox-thumb& width=&768& data-original=&https://pic3.zhimg.com/v2-bae352cba9_r.jpg&&&/figure&&p&&br&&/p&&p&以上就是通过 DNS 服务获取目标服务器 IP 地址的过程，可以说是非常耗时，为了优化性能，DNS 服务器会对中间的查询结果做个缓存，为了保存缓存的实时性，每隔一段时间就会将缓存设为过期。&/p&&p&&br&&/p&&h2&委托协议栈发送消息&/h2&&p&现在客户端拿到了目标服务器的 IP 地址，下面就要与其连接并发送消息了，这个过程同样不是浏览器做的，而是委托协议栈来完成的，具体过程是：&/p&&ol&&li&操作系统创建一个套接字，协议栈返回一个描述符，浏览器存储起来，这个描述符是套接字的 ID，用于识别套接字，原因是同一个客户端可能跟很多服务器同时连接；&/li&&li&客户端的套接字与服务端的套接字进行连接，连接成功后，协议栈将目标服务器的 IP 地址和端口号保存在套接字中，下面就可以收发数据；&/li&&li&发送的数据是 HTTP 请求消息，发送的过程是：浏览器通过描述符查找到指定的套接字，并向套接字发送数据，数据便会通过网络传输到服务端的套接字，服务器接收到消息后处理然后返回响应消息；&/li&&li&消息返回后会被放入一块内存缓冲区内，浏览器可以直接读取这段消息。之后，操作系统断开套接字连接，本地的套接字也会被删除。&/li&&/ol&&p&&br&&/p&&h2&TCP 连接&/h2&&p&在“委托协议栈发送消息”部分简单地提了下客户端和服务端利用套接字进行连接，那这个连接具体是什么样的呢？&/p&&p&首先什么是套接字？套接字其实就是个放在内存的备忘录，协议栈在发送数据时先看一眼备忘录，了解这个数据是发到哪个端口，当数据发送出去后，这个备忘录还得记录什么时间收到响应、什么时候断开等控制信息，协议栈需要根据这些信息来决定下一步做什么。&/p&&p&客户端和服务端的连接是通过套接字连接的，那“连接”又是什么意思呢？连接实际上是客户端和服务端互相交换控制信息的过程，控制信息主要包含两种，一种是上面提到的套接字里要来帮助协议栈进行下一步操作的信息，另一种是客户端和服务端通信时交换的控制信息，这种控制信息就是我们俗称的 TCP 头部。 那连接的过程是怎样的呢？&/p&&p&这个连接过程就是我们平时经常听到的三次握手。&/p&&ul&&li&首先客户端创建 TCP 头部，头部包含目标服务器的端口号等，同时将头部的 SYN 设为 1，表示开始请求连接。TCP 头部创建好了之后，TCP 模块便将信息传递给 IP 模块并委托它发送，然后信息经过网络到达服务器的 IP 模块再到 TCP 模块，TCP 模块则会根据 TCP 头部的信息找到端口号对应的套接字，套接字则会写入相应的信息，然后将状态改为“正在连接”；&/li&&li&服务端的 TCP 模块收到连接请求后就要回应，与客户端一样， 需要在 TCP 头部设置发送方和接收方的端口号，以及将 SYN 设为 1，同时，返回响应时还要将 ACK 设为 1，表示已经接收到相应的包。接着，将信息打包好，发送给客户端；&/li&&li&客户端收到消息后，发现 SYN 为 1，则表示连接成功，所以在套接字中写入服务器的端口号，同时将状态改为连接完毕。为了告诉服务器收到消息，客户端也要将 ACK 设为 1，接着发送给服务端。&/li&&/ul&&p&整个过程用图表示如下：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-1e857f60fa24ae978c1fe744acdcb44f_b.jpg& data-rawwidth=&598& data-rawheight=&391& class=&origin_image zh-lightbox-thumb& width=&598& data-original=&https://pic2.zhimg.com/v2-1e857f60fa24ae978c1fe744acdcb44f_r.jpg&&&/figure&&p&&br&&/p&&h2&HTTPS 的握手过程&/h2&&p&上面的过程是最简单的 HTTP 三次握手，但现在越来越多的网站使用了 HTTPS 协议，那与 HTTP 连接有什么不同呢？&/p&&p&先介绍一下什么是 HTTPS。HTTPS 正如其名字，HTTP 代表其并不是自己创建一个新的协议，而是建立在 HTTP 的基础之上，S 代表其是安全的，如何保证安全？利用 SSL/TLS。SSL（Secure Sockets Layer，安全套接层）是网景设计的安全传输协议，经历了 1.0、2.0 和 3.0 版本，但因为 1.0 有严重安全缺陷，所以从未公布。后来 IETF 将 SSL &a href=&https://link.zhihu.com/?target=https%3A//tools.ietf.org/html/rfc2246& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&标准化&/a&，称为 TLS（Transport Layer Security， 传输层安全协议） ，TLS 1.0 与 SSL 3.0 差别很小。TLS 经历了 1.0、1.1 到现在最新的 1.2。在 HTTPS 通信中具体使用哪一种还要看客户端和服务端的支持程度。那 SSL/TLS 在网络模型中属于哪一层呢？直接上图：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-fd39cf396abe6daa208ced98_b.jpg& data-rawwidth=&640& data-rawheight=&368& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic2.zhimg.com/v2-fd39cf396abe6daa208ced98_r.jpg&&&/figure&&p&&br&&/p&&p&在客户端和服务端通过 HTTPS 连接的过程中，除了正常的 HTTP 连接中的事情，还有身份验证和加密信息两件事，下面看看具体过程（更详细内容可以查看标准：&a href=&https://link.zhihu.com/?target=https%3A//tools.ietf.org/html/rfc5246& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&RFC5246&/a&）。&/p&&ul&&li&Client Hello：这次握手是客户端向服务端发起加密通信请求，请求中包含以下关键信息：&/li&&ul&&li&Version：客户端支持的协议版本，比如 TLS 1.2；&/li&&li&Random：第一个随机数，作用在后面的握手步骤中介绍；&/li&&li&Session ID：“空”表示这是一次新的连接，“不为空”表示维持前面的连接；&/li&&li&Cipher Suites：&a href=&https://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Cipher_suite& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&密码套件&/a&；&/li&&li&Compression：客户端支持的压缩方法；&/li&&li&Extensions：扩展。&/li&&/ul&&li&Server Hello：服务端收到客户端消息后返回响应，响应信息跟 ClientHello 类似，只不过每个字段都是一个确定的值，是服务端根据客户端传过来的候选值的最终选择结果，如果服务端没有在候选值中找到合适的，那么将会返回错误提示，需要提一下的是，这次的响应信息中包含第二个随机数。&/li&&li&Server Certificate：服务端紧接着向客户端发送证书；&/li&&li&Server Key Exchange Message：当上一条证书消息中的信息不全时，服务端会再次发送一些额外数据到客户端；&/li&&li&Certificate Request：如果服务端要求客户端提供证书，会发出这样一个请求；&/li&&li&Server Hello Done：这条消息表示服务端这阶段数据发送完毕，下面就是等待客户端的响应；&/li&&li&Client Certificate：如果服务端要求客户端提供证书，那么客户端会返回自己的证书；&/li&&li&Client Key Exchange Message：这一步非常关键，客户端会生成 premaster secret（预主密钥），为什么叫 premaster secret？因为后面客户端和服务端会根据 premaster secret 和前面过程中两个随机数共同生成一个 master secret（主密钥，48字节），后面通信的安全全靠这个 master secret。前两个随机数客户端和服务端都知道了，这个步骤最主要的就是协商一个 premaster secret，这个过程叫做“密钥交换”，这里介绍两个方法：&/li&&ul&&li&RSA 密钥交换：客户端生成 46 字节的随机数，使用服务器的公钥加密，然后发送出去，服务器便可以用私钥解密。但这种方式不太安全，所以现在逐渐使用 DH 密钥交换；&/li&&li&Diffie-Hellman 密钥交换：DH 的精髓就是正向计算简单，反向计算困难，好比两种颜色的颜料，混在一起你知道什么颜色，但就给你一种颜色，你几乎没法说出其是由哪两种颜色混合而来。具体生成 premaster secret 的方式可以看&a href=&https://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Diffie%25E2%Hellman_key_exchange& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Diffie–Hellman key exchange&/a&，这里简单提一下，密钥交换需要 6 个参数，其中 2 个叫“域参数”，由服务器选取，交换过程中客户端和服务器各自生成 2 个参数，但是只相互发送 1 个，所以客户端和服务器各自知道 5 个参数，根据这 5 个参数，双方计算得到一个同样的 premaster secret。&/li&&/ul&&li&Certificate Verify：验证客户端的私钥和之前发送的客户端证书中的公钥是对应的；&/li&&li&Finished：客户端的握手已经完成，消息内容加密，并且包含 verify_data 字段，值是整个握手过程中所有消息的摘要，供服务端验证消息完整性；&/li&&li&Finished：表示服务端握手结束，同时也发送前面过程的消息的摘要。&/li&&/ul&&p&用图表示一下就是：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-82a85b57f323cf941a4a15b13ee68b91_b.jpg& data-rawwidth=&447& data-rawheight=&823& class=&origin_image zh-lightbox-thumb& width=&447& data-original=&https://pic1.zhimg.com/v2-82a85b57f323cf941a4a15b13ee68b91_r.jpg&&&/figure&&p&&br&&/p&&p&整个握手过程总结一下就是：&/p&&ul&&li&客户端提出 HTTPS 连接请求；&/li&&li&服务器表明身份，表示自己是李逵而不是李鬼；&/li&&li&客户端生成一个用于以后通信的密钥，并把密钥也告诉了服务器；&/li&&li&客户端和服务器结束握手。&/li&&/ul&&p&以上就是握手的整个通信细节，但细心的同学可能会发现少了一个重要步骤，客户端收到服务器发来的证书时是如何判定对方就是自己想要找的服务器呢？这时候就要验证证书的有效性，证书就像现实中的身份证，可以确认某个网站的确是我要访问的网站。那怎么验证证书的有效性呢？首先，数字证书和身份证一样由权威机构签发，不同的是身份证只能由政府签发，而数字证书由 CA（Certification Authorities，数字证书认证机构）签发，Mac 用户可以通过“文件-应用程序-实用工具-钥匙串访问”来查看根 CA，根 CA 可以签发其他 CA，所以一个网站的签发者不是根 CA 也没关系，只要这个 CA 的签发者是根 CA 也行。了解了 CA，下面看一下证书包含什么，先看图：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-c5d3ce52f5e6b7b0720833bbe4add9c4_b.jpg& data-rawwidth=&418& data-rawheight=&511& class=&content_image& width=&418&&&/figure&&p&&br&&/p&&p&证书中包含：网站的基本信息、网站的公钥、CA 的名字等信息（详细请看 &a href=&https://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/X.509& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&X.509&/a&），然后 CA 根据这几个内容生成摘要（digest），再对摘要用 CA 的私钥加密，加密后的结果即数字签名，最后将数字签名也放入到证书中。那么当系统收到一个证书后，先用公钥解密，解得开说明对方是由权威 CA 签发的，然后再根据证书的信息生成摘要，跟解密出来的摘要对比。&/p&&p&&br&&/p&&h2&数据传输&/h2&&p&建立连接之后，客户端和服务端便可以开始进行数据传输。同样，浏览器委托协议栈来帮忙收发消息，协议栈收到消息后不会立即发送出去，而是先放入到缓存区中，因为向协议栈发送的数据长度由浏览器控制，如果协议栈一收到数据就发送出去，那么可能会发送大量小包，导致网络效率降低，所以协议栈一般会等数据量积累到一定程度再发送出去，那这个程度具体是啥样？&/p&&p&首先，在以太网中，一个包的MTU（Maximum Transmission Unit，最大传输单元）是 1500 字节，除去 TCP、IP 头部的 40字节，MSS（Maximum Segment Size，最大分段大小）就是 1460 字节，但因为加密需要，头部可能会增加，相对的 MSS 就会减少。当缓存区内的数据接近 MSS 时再发送，可以避免发送小包。但是如果数据量本来就很小，或者应用程序发送数据的频率很小，那协议栈就不得不等很长时间，所以协议栈内部还有一个定时器，一定时间之后就会将包发送出去。如果数据较小，那就几个拼个车，放在一个包里发出去，如果数据很大，就要进行拆分。大概是下面这样：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-8f879d45d9d152a67e44_b.jpg& data-rawwidth=&995& data-rawheight=&365& class=&origin_image zh-lightbox-thumb& width=&995& data-original=&https://pic2.zhimg.com/v2-8f879d45d9d152a67e44_r.jpg&&&/figure&&p&&br&&/p&&p&本地一切就绪之后，协议栈就会将消息发送出去，这时还没完，客户端还要确保服务器收到了消息。我们一直都说 TCP 是面向连接的协议，因为它可以纠正丢包错误、连接失败提示等等，使得传输更加可靠。那具体又是怎么样的呢？&/p&&p&首先 TCP 模块在拆分数据时会先算好每一块数据相当于从头开始是第几个字节，然后将这个数字写入到 TCP 头部的“序号”字段中，通过这个字段，接收方就能知道包有没有丢失，比如一个消息长度为
* 3），那么这条消息就被拆分到三个数据块中，三个数据块的 TCP 头部的“序号”依次是 0、1460 和 2920，所以接收方先收到一个序号为 0 的包，再收到一个序号为 2920 的包，但是没收到序号为 1460 的包，说明这个包丢失了，现实中的序号为了安全不会从 0 开始，而是以一个随机数作为初始值。如果确认没有遗漏，那么接收方会将到目前为止收到的数据长度加起来，写入 TCP 的 “ACK 号”中发送给对方，注意 “ACK 号”与 ACK 标记位不是一回事，前者是数字，后者就是一个比特的标记位，但是 “ACK 号”只有在 ACK 标记位为 1 是才有效。&/p&&p&&br&&/p&&h2&断开连接&/h2&&p&当数据发送完毕后，一方（可能是客户端，可能是服务端）就会发起断开连接过程。这个过程也是大家很熟悉的，即四次挥手。下面以客户端发起断开请求为例：&/p&&ul&&li&浏览器调用 Socket 库关闭连接程序，客户端的协议栈生成 TCP 头部，将 FIN 标记位设为 1，告诉服务器打算断开连接，后面不会再发送数据，同时套接字也记录断开连接操作；&/li&&li&服务器收到 FIN 为 1 的 TCP 头部时，协议栈将套接字记录为进入断开操作状态，同时向客户端发送一个 ACK 号，告诉客户端已经收到消息；&/li&&li&服务器收到断开连接信息时，可能还有数据没有传完，所以等待数据全部传输结束后，再发送一条 FIN 为 1 的信息，告诉对方也做了断开连接的准备，但没有断开；&/li&&li&一段时间后，客户端返回确认信号，到此，连接结束。&/li&&/ul&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-2094afcf2c9cc9aef2f6e_b.jpg& data-rawwidth=&598& data-rawheight=&276& class=&origin_image zh-lightbox-thumb& width=&598& data-original=&https://pic2.zhimg.com/v2-2094afcf2c9cc9aef2f6e_r.jpg&&&/figure&&p&&br&&/p&&p&以上就是输入 URL 后大概发生的一些事情，但是从面试角度看，仍然还有很多部分没有涉及。后续还会继续更新这篇文章，添加一些重要内容，这里先挖个坑：&/p&&ul&&li&常见状态码解析；&/li&&li&HTTP 缓存；&/li&&li&滑动窗口；&/li&&li&握手与挥手过程中的异常处理。&/li&&/ul&&p&好，坑就挖这么多，再多怕自己不想填，等填完再继续挖。&/p&
本文的目标是以“输入 URL 后发生了什么”这个经典面试题为引子，写一篇既能够涵盖面试中大部分网络试题，又能够将“输入 URL 后发生什么”讲得有深度的文章。以前写过一篇类似的，但实在过于简单。另外，HTTPS 逐渐普及，文章中没有这部分过程也说不过…
&figure&&img src=&https://pic2.zhimg.com/v2-b1deb6e63b391fd9ad430e_b.jpg& data-rawwidth=&900& data-rawheight=&500& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&https://pic2.zhimg.com/v2-b1deb6e63b391fd9ad430e_r.jpg&&&/figure&&p&&b&前置前驱&/b&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-0e3c05b135c758b14022_b.jpg& data-rawwidth=&720& data-rawheight=&362& data-thumbnail=&https://pic3.zhimg.com/v2-0e3c05b135c758b14022_b.jpg& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic3.zhimg.com/v2-0e3c05b135c758b14022_r.jpg&&&/figure&&p&&br&&/p&&p&&b&前置后驱&/b&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-0e10025edad382cd34c1ae6e_b.jpg& data-rawwidth=&720& data-rawheight=&354& data-thumbnail=&https://pic2.zhimg.com/v2-0e10025edad382cd34c1ae6e_b.jpg& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic2.zhimg.com/v2-0e10025edad382cd34c1ae6e_r.jpg&&&/figure&&p&&br&&/p&&p&&b&前置四驱&/b&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-b521bee1e3abb_b.jpg& data-rawwidth=&720& data-rawheight=&338& data-thumbnail=&https://pic4.zhimg.com/v2-b521bee1e3abb_b.jpg& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic4.zhimg.com/v2-b521bee1e3abb_r.jpg&&&/figure&&p&&br&&/p&&p&&b&鼓刹&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-baa92bd4eee37a35ce62fd41dc5ce877_b.jpg& data-rawwidth=&678& data-rawheight=&480& data-thumbnail=&https://pic4.zhimg.com/v2-baa92bd4eee37a35ce62fd41dc5ce877_b.jpg& class=&origin_image zh-lightbox-thumb& width=&678& data-original=&https://pic4.zhimg.com/v2-baa92bd4eee37a35ce62fd41dc5ce877_r.jpg&&&/figure&&p&&br&&/p&&p&&b&碟刹&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-a1dae99da16be88f710d575_b.jpg& data-rawwidth=&450& data-rawheight=&321& data-thumbnail=&https://pic2.zhimg.com/v2-a1dae99da16be88f710d575_b.jpg& class=&origin_image zh-lightbox-thumb& width=&450& data-original=&https://pic2.zhimg.com/v2-a1dae99da16be88f710d575_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&b&差速锁&/b&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-ec06bc6eb80bb_b.jpg& data-rawwidth=&281& data-rawheight=&275& data-thumbnail=&https://pic4.zhimg.com/v2-ec06bc6eb80bb_b.jpg& class=&content_image& width=&281&&&/figure&&p&&br&&/p&&p&&b&CVT无级变速器&/b&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-357fef3baeb4e0e_b.jpg& data-rawwidth=&161& data-rawheight=&241& data-thumbnail=&https://pic3.zhimg.com/v2-357fef3baeb4e0e_b.jpg& class=&content_image& width=&161&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&b&双离合变速器&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-a39e1dfe88b_b.jpg& data-rawwidth=&320& data-rawheight=&209& data-thumbnail=&https://pic4.zhimg.com/v2-a39e1dfe88b_b.jpg& class=&content_image& width=&320&&&/figure&&p&&br&&/p&&p&&b&阿克曼转向设计&/b&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-9d743f4c046ce63b4b49f_b.jpg& data-rawwidth=&596& data-rawheight=&416& data-thumbnail=&https://pic4.zhimg.com/v2-9d743f4c046ce63b4b49f_b.jpg& class=&origin_image zh-lightbox-thumb& width=&596& data-original=&https://pic4.zhimg.com/v2-9d743f4c046ce63b4b49f_r.jpg&&&/figure&&p&&br&&/p&&p&&b&缸径、冲程、排气量与压缩比&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-5c906e97d5be374ad301b_b.jpg& data-rawwidth=&344& data-rawheight=&480& data-thumbnail=&https://pic4.zhimg.com/v2-5c906e97d5be374ad301b_b.jpg& class=&content_image& width=&344&&&/figure&&p&&br&&/p&&p&&b&SOHC单凸轮轴引擎&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-b568c1dc93b4fdd1b0f13_b.jpg& data-rawwidth=&270& data-rawheight=&480& data-thumbnail=&https://pic4.zhimg.com/v2-b568c1dc93b4fdd1b0f13_b.jpg& class=&content_image& width=&270&&&/figure&&p&&br&&/p&&p&&b&直压式气门&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-9e322b6e5eef2ccd309a71_b.jpg& data-rawwidth=&666& data-rawheight=&480& data-thumbnail=&https://pic2.zhimg.com/v2-9e322b6e5eef2ccd309a71_b.jpg& class=&origin_image zh-lightbox-thumb& width=&666& data-original=&https://pic2.zhimg.com/v2-9e322b6e5eef2ccd309a71_r.jpg&&&/figure&&p&&br&&/p&&p&&b&摇臂式气门&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-ec04a9d443ffc4c295b8a_b.jpg& data-rawwidth=&640& data-rawheight=&480& data-thumbnail=&https://pic3.zhimg.com/v2-ec04a9d443ffc4c295b8a_b.jpg& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic3.zhimg.com/v2-ec04a9d443ffc4c295b8a_r.jpg&&&/figure&&p&&br&&/p&&p&&b&爆震&/b&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-c174b98b98c0f9c23db1b_b.jpg& data-rawwidth=&720& data-rawheight=&356& data-thumbnail=&https://pic4.zhimg.com/v2-c174b98b98c0f9c23db1b_b.jpg& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic4.zhimg.com/v2-c174b98b98c0f9c23db1b_r.jpg&&&/figure&&p&&br&&/p&&p&&b&扭力转换器&/b&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-dfeb10e8ffd7931e4dfa9ed445fdaddf_b.jpg& data-rawwidth=&604& data-rawheight=&480& data-thumbnail=&https://pic4.zhimg.com/v2-dfeb10e8ffd7931e4dfa9ed445fdaddf_b.jpg& class=&origin_image zh-lightbox-thumb& width=&604& data-original=&https://pic4.zhimg.com/v2-dfeb10e8ffd7931e4dfa9ed445fdaddf_r.jpg&&&/figure&&p&&br&&/p&&p&&b&差速器&/b&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-f26aa34d1dbd672b1edbf_b.jpg& data-rawwidth=&720& data-rawheight=&456& data-thumbnail=&https://pic4.zhimg.com/v2-f26aa34d1dbd672b1edbf_b.jpg& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic4.zhimg.com/v2-f26aa34d1dbd672b1edbf_r.jpg&&&/figure&&p&&br&&/p&&p&&b&离合器&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-cdeada_b.jpg& data-rawwidth=&644& data-rawheight=&480& data-thumbnail=&https://pic1.zhimg.com/v2-cdeada_b.jpg& class=&origin_image zh-lightbox-thumb& width=&644& data-original=&https://pic1.zhimg.com/v2-cdeada_r.jpg&&&/figure&&p&&br&&/p&&p&&b&避震器对于抑制弹簧谈跳的效果&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-8c67b6fe6997cff5c9f7fbb0_b.jpg& data-rawwidth=&720& data-rawheight=&436& data-thumbnail=&https://pic1.zhimg.com/v2-8c67b6fe6997cff5c9f7fbb0_b.jpg& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic1.zhimg.com/v2-8c67b6fe6997cff5c9f7fbb0_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&b&阻尼&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-7a929bd5b97_b.jpg& data-rawwidth=&318& data-rawheight=&470& data-thumbnail=&https://pic4.zhimg.com/v2-7a929bd5b97_b.jpg& class=&content_image& width=&318&&&/figure&&p&&br&&/p&&p&&b&汽车悬挂的工作图&/b&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-d750a11bbdab0ce648c2c7dcb32eb15f_b.jpg& data-rawwidth=&640& data-rawheight=&480& data-thumbnail=&https://pic4.zhimg.com/v2-d750a11bbdab0ce648c2c7dcb32eb15f_b.jpg& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic4.zhimg.com/v2-d750a11bbdab0ce648c2c7dcb32eb15f_r.jpg&&&/figure&&p&&b&回转半径&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-ead563d6b6eed6b485ee7c_b.jpg& data-rawwidth=&472& data-rawheight=&480& data-thumbnail=&https://pic1.zhimg.com/v2-ead563d6b6eed6b485ee7c_b.jpg& class=&origin_image zh-lightbox-thumb& width=&472& data-original=&https://pic1.zhimg.com/v2-ead563d6b6eed6b485ee7c_r.jpg&&&/figure&&p&&br&&/p&&p&&b&发动机&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-0cb7ac7f887ae6fcfada1c4_b.jpg& data-rawwidth=&500& data-rawheight=&485& data-thumbnail=&https://pic1.zhimg.com/v2-0cb7ac7f887ae6fcfada1c4_b.jpg& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/v2-0cb7ac7f887ae6fcfada1c4_r.jpg&&&/figure&&p&&br&&/p&&p&&b&进气系统&/b&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-1db6f36ff_b.jpg& data-rawwidth=&1000& data-rawheight=&890& data-thumbnail=&https://pic4.zhimg.com/v2-1db6f36ff_b.jpg& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&https://pic4.zhimg.com/v2-1db6f36ff_r.jpg&&&/figure&&p&&br&&/p&&p&&b&火花塞&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-eb32ec7cf6ba46deecd20af255d6a918_b.jpg& data-rawwidth=&1000& data-rawheight=&640& data-thumbnail=&https://pic1.zhimg.com/v2-eb32ec7cf6ba46deecd20af255d6a918_b.jpg& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&https://pic1.zhimg.com/v2-eb32ec7cf6ba46deecd20af255d6a918_r.jpg&&&/figure&&p&&br&&/p&&p&&b&正时系统&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-fb425be454def5d0b75a4_b.jpg& data-rawwidth=&500& data-rawheight=&530& data-thumbnail=&https://pic1.zhimg.com/v2-fb425be454def5d0b75a4_b.jpg& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/v2-fb425be454def5d0b75a4_r.jpg&&&/figure&&p&&br&&/p&&p&&b&燃油&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-84df1aba120f6da92a252f_b.jpg& data-rawwidth=&1000& data-rawheight=&470& data-thumbnail=&https://pic4.zhimg.com/v2-84df1aba120f6da92a252f_b.jpg& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&https://pic4.zhimg.com/v2-84df1aba120f6da92a252f_r.jpg&&&/figure&&p&&br&&/p&&p&&b&冷却系统&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-0b4bd7d82ae0be22e7a742d384e9d3fd_b.jpg& data-rawwidth=&1000& data-rawheight=&610& data-thumbnail=&https://pic2.zhimg.com/v2-0b4bd7d82ae0be22e7a742d384e9d3fd_b.jpg& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&https://pic2.zhimg.com/v2-0b4bd7d82ae0be22e7a742d384e9d3fd_r.jpg&&&/figure&&p&&br&&/p&&p&&b&排气系统&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-57e118a21ac50ba913e69bde8db2cf32_b.jpg& data-rawwidth=&1000& data-rawheight=&360& data-thumbnail=&https://pic3.zhimg.com/v2-57e118a21ac50ba913e69bde8db2cf32_b.jpg& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&https://pic3.zhimg.com/v2-57e118a21ac50ba913e69bde8db2cf32_r.jpg&&&/figure&&p&&br&&/p&&p&&b&转子发动机&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-bc96f21d373ec_b.jpg& data-rawwidth=&205& data-rawheight=&165& data-thumbnail=&https://pic1.zhimg.com/v2-bc96f21d373ec_b.jpg& class=&content_image& width=&205&&&/figure&&p&&br&&/p&&p&&b&直列式发动机——它的汽缸肩并肩地排成一排，L4发动机&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-fb45c9e1d640e366ebcd3_b.jpg& data-rawwidth=&320& data-rawheight=&240& data-thumbnail=&https://pic4.zhimg.com/v2-fb45c9e1d640e366ebcd3_b.jpg& class=&content_image& width=&320&&&/figure&&p&&br&&/p&&p&&b&水平对置式发动机——汽缸排列在发动机相对的两个平面上&/b&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-7ba6cd632e296dc42974_b.jpg& data-rawwidth=&320& data-rawheight=&240& data-thumbnail=&https://pic1.zhimg.com/v2-7ba6cd632e296dc42974_b.jpg& class=&content_image& width=&320&&&/figure&&p&&br&&/p&&p&&b&涡轮增压发动机&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-99ceff00f9_b.jpg& data-rawwidth=&500& data-rawheight=&227& data-thumbnail=&https://pic2.zhimg.com/v2-99ceff00f9_b.jpg& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic2.zhimg.com/v2-99ceff00f9_r.jpg&&&/figure&&p&&br&&/p&&p&&b&变压缩比发动机&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-141b6f29f8a7fb5a745091bfaa53ee33_b.jpg& data-rawwidth=&411& data-rawheight=&433& data-thumbnail=&https://pic4.zhimg.com/v2-141b6f29f8a7fb5a745091bfaa53ee33_b.jpg& class=&content_image& width=&411&&&/figure&&p&&br&&/p&&p&&b&V型发动机——汽缸排列在成一定角度的两个平面上，V6发动机&/b&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-e4f5fe7ac31d01dcb39008c7bddfe5dd_b.jpg& data-rawwidth=&320& data-rawheight=&240& data-thumbnail=&https://pic2.zhimg.com/v2-e4f5fe7ac31d01dcb39008c7bddfe5dd_b.jpg& class=&content_image& width=&320&&&/figure&&p&&br&&/p&&p&&b&汽车换挡&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-8f04186a04edb86eec4b_b.jpg& data-rawwidth=&400& data-rawheight=&330& data-thumbnail=&https://pic4.zhimg.com/v2-8f04186a04edb86eec4b_b.jpg& class=&content_image& width=&400&&&/figure&&p&&br&&/p&&p&&b&转子发动机&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-8d42fe48f6b2ba2ee0bbba_b.jpg& data-rawwidth=&177& data-rawheight=&170& data-thumbnail=&https://pic3.zhimg.com/v2-8d42fe48f6b2ba2ee0bbba_b.jpg& class=&content_image& width=&177&&&/figure&&p&&br&&/p&&p&&b&涡轮式发动机工作原理图解&/b&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-bbabeb23ff5ef657618d_b.jpg& data-rawwidth=&435& data-rawheight=&307& data-thumbnail=&https://pic2.zhimg.com/v2-bbabeb23ff5ef657618d_b.jpg& class=&origin_image zh-lightbox-thumb& width=&435& data-original=&https://pic2.zhimg.com/v2-bbabeb23ff5ef657618d_r.jpg&&&/figure&&p&&br&&/p&&p&&b&缸内直喷发动机做功过程&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-ae4f1ea16524adf2b4d1416_b.jpg& data-rawwidth=&720& data-rawheight=&576& data-thumbnail=&https://pic3.zhimg.com/v2-ae4f1ea16524adf2b4d1416_b.jpg& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic3.zhimg.com/v2-ae4f1ea16524adf2b4d1416_r.jpg&&&/figure&&p&&br&&/p&&p&&b&四冲程发动机做功过程&/b&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-38ccd163be76c9b6b8c3ead08ceee384_b.jpg& data-rawwidth=&250& data-rawheight=&170& data-thumbnail=&https://pic1.zhimg.com/v2-38ccd163be76c9b6b8c3ead08ceee384_b.jpg& class=&content_image& width=&250&&&/figure&&p&&br&&/p&&p&&b&复杂版&/b&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-24aacbead2ced1bb802ab6_b.jpg& data-rawwidth=&320& data-rawheight=&240& data-thumbnail=&https://pic3.zhimg.com/v2-24aacbead2ced1bb802ab6_b.jpg& class=&content_image& width=&320&&&/figure&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-a98dde1c12e6_b.jpg& data-rawwidth=&360& data-rawheight=&287& data-thumbnail=&https://pic3.zhimg.com/v2-a98dde1c12e6_b.jpg& class=&content_image& width=&360&&&/figure&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-b875cbec313d933bd83bc8a_b.jpg& data-rawwidth=&268& data-rawheight=&300& data-thumbnail=&https://pic3.zhimg.com/v2-b875cbec313d933bd83bc8a_b.jpg& class=&content_image& width=&268&&&/figure&&p&&br&&/p&&p&&b&变压缩比发动机&/b&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-dab8b9c1b073ab8c97e4b782e4f92d79_b.jpg& data-rawwidth=&411& data-rawheight=&433& data-thumbnail=&https://pic2.zhimg.com/v2-dab8b9c1b073ab8c97e4b782e4f92d79_b.jpg& class=&content_image& width=&411&&&/figure&&p&&br&&/p&&p&&b&二程发动机--奎西发动机&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-6f08e4d8d08d9ff7bc0549caf41c56ce_b.jpg& data-rawwidth=&400& data-rawheight=&250& data-thumbnail=&https://pic3.zhimg.com/v2-6f08e4d8d08d9ff7bc0549caf41c56ce_b.jpg& class=&content_image& width=&400&&&/figure&&p&&br&&/p&&p&&b&二冲程发动机&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f7dcebb217dfc_b.jpg& data-rawwidth=&200& data-rawheight=&202& data-thumbnail=&https://pic1.zhimg.com/v2-f7dcebb217dfc_b.jpg& class=&content_image& width=&200&&&/figure&&p&&br&&/p&&p&&b&四冲程发动机&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-5bd8e959cec}