前端筑基，步入仙路 - 浏览器篇

玩技术才是真谛
55 阅读8分钟

系列文章：

修仙界-Web

如果开发是一种修仙，那么Web就是开发者们的修仙界，先有Web，然后有开发。

Web，也可称为World Wide Web或者万维网，那么作为前端开发，同样也是Web开发的一种，也就如在Web的规则之下，使用天地间的规则，塑造新的事物。

如今的Web正处于语义网，Web3.0的时代，在这个时代，通过向Web的文档（HTML）传递计算机能够读懂的语义（MetaData），那么整个互联网都是一个信息交互的介质，无数的服务端（Server）等待着来自客户端（Client）的请求（request），并进行回复（response），将信息传递给客户端，呈现给每个人。 而整个修仙界（Web）就由三个部分构成：

  • 存储资源的后端 ——（地蕴万物）
  • 显示资源的前端 ——（显化世间）
  • 传输资源的网络协议 ——（天地规则）

修炼处-浏览器

在Web上的一切，都需要有一个载体，而这个载体，使用最多的，就是浏览器，比如Google的Chorme，又比如微软的Edge，还有FireFox等等，或许随着技术的发展，很多小程序，打包的桌面应用脱离了浏览器的载体，但支持显示浏览器的页面，但浏览器自始至终都是互联网的最主要展示途径之一。

同样，前端的开发，大多都依赖浏览器来显示开发内容的效果和查找开发的问题。 而浏览器的工作原理，更是经典中的经典，如同修仙中的炼气法门，不知便不能入开发之门，是无法绕开的存在。

  1. 输入URL
  2. 查找缓存（浏览器的缓存协议）
  3. DNS域名解析（DNS优化，OSI模型、网络安全）
  4. 建立TCP连接（三次握手）
  5. 发送HTTP请求（TCP/IP协议，HTTPS加密）
  6. 服务器响应请求并返回结果（）
  7. 关闭TCP连接（四次挥手）
  8. 浏览器渲染（DOM tree，Css rule tree，render tree，Layout，Painting ）
  9. JS引擎解析

每一个网址的跳转都需要经历上述步骤，同时，也可能有一些连接不会关闭TCP连接，被称为长连接，比如通过WebSocket实现客户端和服务端的双向通讯，用于实时通讯，数据实时更新。

其中的每个步骤都有其独特的知识所在，值得去深入学习，每个步骤也与Web的性能优化息息相关，被无数前辈们反复打磨，不断迭代，也成为了筑基之初，入门之始的经典之问。

而修习前端，在Web所解决的主要问题，首先是实现网页功能需求，包括跳转，请求数据等，比如使用HTML和CSS先在页面渲染出一个按钮，然后使用JS给定其点击后触发的功能；其次是Web的性能优化，加快页面的加载时间，或者优化用户的交互体验，最后是Web的安全，比如XSS（跨站点脚本攻击）、CSRF（跨站点请求伪造）等多种攻击手段。除此之外，无障碍，兼容性等内容则需要看具体的应用场景，起到锦上添花的作用。

沟通灵气-HTTP

上文中说，Web浏览器想要展示前端内容，就需要发出请求(request)，Web服务器则进行响应（response），就像是天地蕴育灵气，而修仙者汲取灵气，但汲取灵气需要一定的方法，在Web中，叫做HTTP，超文本传输协议，Web之上一切的数据交换的都建立在HTTP的基础之上。

来自客户端的请求，和来自服务端的响应，是HTTP协议结构中的关键。

请求

HTTP 请求由下面的元素组成

  1. HTTP 方法，如GET,POST。
  2. 资源路径，不含协议，域名，TCP端口的URL
  3. HTTP 协议版本号
  4. 为服务端表达其他信息的可选标头
  5. 请求体

响应

HTTP响应由下面的元素组成

  1. HTTP 协议版本号
  2. 状态码
  3. 状态信息
  4. HTTP 标头
  5. 可选项，一个包含了被获取资源的主体。

API

Fetch API是目前HTTP最常用的API，取代了原本的XMLHttpRequest。

HTTP的标头，请求方法和响应状态码

HTTP 标头（header）允许客户端和服务器通过 HTTP 请求（request）或者响应（response）传递附加信息。 根据上下文消息不同，分为

  • 请求表头 包含请求的资源
  • 响应表头 包含有关响应的额外信息
  • 表示表头 包含资源体的信息
  • 负载表头 包含与负载数据的形式无关的表示信息

请求方法是HTTP定义的一组方法，以表明要对给定资源执行的操作。

最常见的方法是GET和POST，GET只用于获取数据，POST则可以提交数据，比如上传数据的增删改查操作。 除此之外，还有HEAD ,PUT ,DELETE ,CONNECT ,OPTIONS ,TRACE ,PATCH方法。

HTTP 响应状态码用来表明特定HTTP请求是否成功完成。 主要包含

  1. 信息响应
  2. 成功响应 200就表示响应成功
  3. 重定向响应
  4. 客户端错误响应 最常见的404 not found 就是响应之一
  5. 服务端错误响应

HTTPS

HTTPS（超文本传输安全协议）是 HTTP 协议的加密版本。使用SSL 或 TLS 协议来加密客户端和服务器之间所有的通信。

HTTPS 工作原理

当客户端的url包含https时，会要求Web服务器建立SSL链接，Web服务器会将包含公钥的证书传输给客户端，进行加密等级协商并加密会话密钥，客户端回传会话密钥由服务端解密，开始加密通信。

HTTP 跨域

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。

同源策略,是浏览器对 JavaScript 实施的安全限制，只要协议、域名、端口有任何一个不同，都被当作是不同的域。

跨域原理，即是通过各种方式，避开浏览器的安全限制。

小结

HTTP是前端开发中关键的一环，请求方法的在JS中的不可或缺使用，而响应状态码则在Debug中起到很大的作用，同时，还有如404页面的开发和设计，以及敏感信息的加密传输，都涉及着HTTP的相关知识。

TCP/IP

如果说HTTP规定了客户端和服务器之间的相应方式和传输内容，TCP则是规定了网络所遵守的一种网络规则，TCP为传输控制协议（Transmission Control Protocol），IP为网际协议（Internet Protocol）。

TCP/IP一共有四个层次，分别为

  • 应用层-直接为应用进程提供服务
  • 传输层-负责对报文进行分组和重组
  • 网络层-负责路由以及把分组报文发送给目标网络或主机
  • 网络接口层-负责封装和解封装IP报文，发送和接收ARP/RARP报文等

根据TCP协议进行网络连接和断开的三次握手和四次挥手，也是常见的问题。

万物法则-浏览器开发者工具

在使用任何一个编程工具前，浏览器本身就具有解析代码的强大功能，根据HTTP协议，服务器发送的响应是一个文档，由本地的客户端进行解读和渲染，浏览器本身就具备了对文档进行修改和调试的能力。

这里首先了解浏览器渲染的流程，然后再看浏览器的开发者工具如何实现修改网页的功能。

浏览器渲染

在获取到服务器传递的文档后，浏览器会进行以下渲染：

  1. 解析构建DOM树，由dom节点和属性节点组成，树根是document文档对象。
  2. 构建CSS规则树，对CSS样式进行解析。
  3. 构建Render树，浏览器将DOM树和CSS树进行结合，构建出渲染树
  4. 布局(layout)，计算出每个节点在屏幕的位置和大小
  5. 绘制(paint),遍历整个render树，对每个节点进行绘制。

在完成渲染后，浏览器会根据JS引擎来对js代码进行解析，实现js代码的功能。

浏览器可以通过开发者工具对接收的文档进行修改，在windos的浏览器中，一般使用F12打开开发者工具.

检查器（Inspector）：DOM 浏览器和 CSS 编辑器

这个工具可以看到网页的 HTML 运行时的状态，以及哪些 CSS 规则被应用到了页面上元素。它还允许你立即修改 HTML 和 CSS 并在浏览器中实时观察修改的结果。

JavaScript 调试器

JavaScript 调试器中可以查看变量的值，或者设置断点。断点的作用是让程序在指定的位置暂停，以便调试程序并确定问题所在。

JavaScript 控制台

JavaScript 控制台用于调试没有按预期运行的 JavaScript。它允许针对浏览器当前加载的页面运行 JavaScript 行，并报告浏览器尝试执行代码时遇到的错误。

小结

浏览器的渲染允许对文档中的HTML，CSS和Javascript语言进行操作和编写，这些编写都是本地的，不会向服务端上传，刷新页面会重置页面状态，通过了解浏览器，可以对前端开发所需的内容进行大致的了解，即由HTML和CSS构建的render树，以及实现功能的JavaScript代码，下一篇文章，会对这前端仙路的这三大法门进行详细解读。

avatar
文章
阅读
粉丝