关于Web标准与前端规范化 | 青训营笔记

Canivores
137 阅读6分钟

关于Web标准与前端规范化 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第4天。

重点内容：

  • 只读时代———原生三件套发展史
  • 体验时代：Ajax、UGC、Jquery、WebApi
  • 敏捷时代——Node.js、Webpackage、React等常见框架，
  • 前端应用场景。

  • 只读时代

    1989-2004 HTML/CSS/JavaScript

    特点：获取服务器的信息就要发送一次请求，获得一个网页。更新页面需要再发一次请求来替换。

    • 单向发布
    • 静态只读
    • 链接跳转
    • 刷新页面
    • 表格对齐元素
    • CGI

  • 体验时代

    2005-2010 Ajax/Web API/jQuery

    特点：ajax，httprequest，修改dom树

    • 动态交互
    • 社交媒体
    • 用户生成内容(UGC)
    • 单页应用(SPA)
    • jQuery
    • YUI

  • 敏捷时代

    2010-2021 Fetch/Node.js/Webpack

    • 模块化
    • 组件化
    • 转译(transpiling)
    • 打包(bundling)
    • React.js
    • Vue.js

  • 前端应用场景

    前端应用场景大致分为：桌面端和移动端,移动端又细分出大屏设备、手机浏览器。

    • To Business 企业级应用
    • To Customer 通过网站/手机端展示给客户
    • To Developer 开发工具给开发者

  • 从输入url到页面展示发生了什么(面试)

    作者：Twinkle_

    链接：juejin.im/post/686927…

    来源：掘金

    更详细见：经典面试题！从输入URL到页面展示你还不赶紧学起来？ - 掘金 (juejin.cn)

    浏览器的多进程架构

    从浏览器输入 URL 到页面渲染的整个过程都是由 浏览器架构中的各个进程之间的配合完成。

    1. 浏览器主进程: 管理子进程、提供服务功能
    2. 渲染进程： 将HTML、CSS、JS渲染成界面，js引擎v8和排版引擎Blink就在上面，他会为每一个tab页面创建一个渲染进程
    3. GPU进程： 本来是负责处理3Dcss的，后来慢慢的UI界面也交给GPU来绘制
    4. 网络进程： 就是负责网络请求，网络资源加载的进程
    5. 插件进程： 负责插件的运行的，因为插件很容易崩溃，把它放到独立的进程里不要让它影响别人

    从用户输入信息到页面展示的不同阶段，是不同的进程在发挥作用，示意图如下：

image.png

从图中可以看出，整个过程是需要各个进程之间相互配合完成的，过程大致可以描述为：

1.  用户输入url,处理输入信息，主进程开始导航，交给网络进程干活
2.  网络进程发起网络请求，其中有可能会发生重定向
3.  服务器响应URL之后，主进程就要通知渲染进程，你要开始干活了
4.  渲染进程准备好了，要想渲染进程提交数据，这个时间叫做提交文档
5.  渲染进程接受到数据，完成页面渲染。

** 具体过程**

1.  输入url

-   用户输入url，处理输入信息：
-   如果为非url结构的字符串，交给浏览器**默认引擎**去搜索改字符串；
-   若为url结构的字符串，浏览器主进程会交给 **网络进程** ,开始干活。

2.1 查找浏览器缓存

-   网络进程会先看看是否存在本地缓存，如果有就直接返回资源给浏览器进程，无则下一步 DNS-> IP -> TCP

2.2 DNS解析

-   网络进程拿到url后，先会进行DNS域名解析得到 **IP地址**。如果请求协议是HTTPS，那么还需要建立TLS连接。

2.2 建立TCP连接，三次握手

-   接下来就是利用IP地址和服务器建立TCP连接。连接建立之后，向服务器发送请求。

3.  服务器响应

    -   服务器收到请求信息后，会根据请求信息生成响应行、响应头、响应体，并发给网络进程。网络进程接受了响应信息之后，就开始解析响应头的内容。

    -   **网络进程解析响应行和响应头信息的过程：**

        3.1 重定向

        -   如果响应行状态码为301（永久重定向）和302（临时），那么说明需要重定向到其他url。这时候网络进程会从响应头中的Location字段里读取重定向的地址，并重新发起网络请求。

        3.2 响应数据处理

        -   导航会通过请求头的 **Content-type** 字段判断响应体数据的类型。浏览器通过这个来决定如何显示响应体的内容。比如：若为application/octet-stream，则会按照下载类型来处理这个请求，导航结束。若为text/html，这就告诉浏览器服务器返回的是html格式，浏览器会通知渲染进程，你要干活了。

3.  准备渲染进程

    -   默认情况，每个页面一个渲染进程。但若处于**同一站点**（同根域名+协议），那么渲染进程就会复用。

3.  提交文档

    -   渲染进程准备好后，浏览器进程发出 **“提交文档的消息”** ，渲染进程接受了消息之后，会跟网络进程简历传输数据的管道。
    -   等数据传输完成了，渲染进程会告诉浏览器进程，**确认文档提交**，这时候浏览器会更新页面，安全状态，url，前进后退的历史。
    -   到这里导航结束，进入渲染阶段。

注：当浏览器刚开始加载一个地址之后，标签页上的图标便进入了加载状态。但此时图中页面显示的依然是之前打开的页面内容，并没立即替换为百度首页的页面。因为需要等待提交文档阶段，页面内容才会被替换。

三、参考文献:

avatar
文章
阅读
粉丝