web标准和前端开发|青训营笔记

summer瓜瓜
86 阅读6分钟

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

前端开发:起源，架构，变迁

只读时代

每进行一次操作，都需要发送一次请求

1989-2004

HTML/CSS/Javascript

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

体验时代

2005-2010

Ajax/Web API/Jquery

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

敏捷时代

2010-2021

fetch/Node.js/Webpack

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

前端开发:语言，框架，工具

HTML,CSS,Javascript

HTML:提供骨架

css：提供样式

JavaScript：提供动作

WebAssembly

WebAssembly:是一种可移植，体积小，加载快并且兼容web的全新格式

实际上，WebAssembly是一种新的字节码格式，旨在成为高级语言的编译目标。

我们可以使用C,C++,Rust等来创建一个Wasm模板，然后这个模板可以发送给浏览器，并且在专门的虚拟机上面运行，和JavaScript虚拟机共享内存和线程等

下面就是一段将C转换来创建wasm模块

WebAssembly.webp

wasm模块总是与javascript“胶水”模块一起使用，在必要的时候，可以执行一些操作。

WebAssembly可以看作是javascript的一种加强

WebAssembly可以将现有的用C，C++编写的库直接编译成WebAssembly运行到浏览器上, 并且可以作为库被JavaScript引用

wasm和JavaScript结合.webp

补充

  1. 要理解JavaScript为什么运行慢

    传统的javascript在V8引擎中：首先会JavaScript会被编译为AST,V8引擎的pipeline结构会进一步将AST转化为一种中间代码，再对中间代码再次优化为机器语言交给底层

    WebAssembly会直接将parser,optimize省略，直接编译为机器码，此外，WebAssembly他有特殊的方法处理二进制，这可以减少包的大小

参考链接

["WebAssembly是什么？"](WebAssembly是什么？_语言 & 开发_Paul_InfoQ精选文章)

ps:具体等后续补充

前端开发:浏览器，网络，服务器

架构(以chrome为例)

浏览器进程负责协调承担各项工作，比如实用程序进程，渲染器进程，GPU进程，插件进程等

浏览器每新开一个标签页，就会创建一个新的渲染器进程

浏览器进程：负责的是主标签页，地址栏，back之类的，还有一些发送网络请求等

  • UI线程：将绘制浏览器的按钮和地址栏
  • 网络线程：负责处理网络请求，并接收数据
  • 存储线程：负责访问文件和存储数据

渲染进程：负责在标签页中显示网站及处理时间

插件进程：负责网站中用到的插件

GPU进程：在独立的进程中处理GPU任务，因为一般GPU要处理多个应用同时发来的请求，但是都需要显示在一个页面上

优点

  1. 互相独立，不受影响

    一个标签页就是一个进程，进程之间不受影响。

    假如打开3个标签页，3个标签页就是3个渲染器进程。这时候，如果有一个渲染器崩溃了，只要把它关掉即可，不会影响其他标签页。

    如果所有标签页都运行在一个进程中，那只要有一个标签页卡住，所有标签页都会卡住

  2. 安全和隔离

    因为操作系统有限制进程特权的机制，浏览器就可以限制进程

    比如：就是输入网址但是不允许你访问

Chrome架构进化的目标是将整个浏览器程序的不同部分服务化，便于分割或合并。基本思路是在高配设备中，每个服务独立开进程，保证稳定；在低配设备中，多个服务合并为一个进程，节约资源

站点隔离

每个跨站点iframe都运行一个独立的渲染器进程，但是允许每个跨站点iframe运行在同一个浏览器进程并共享内存空间

导航

定义：从请求网页到浏览器准备渲染网页的过程

  1. 处理输入

    UI线程会去判断用户输入的是url还是段字符串,因为地址栏本来就有搜索的功能

  2. 开始导航

    • 如果输入的是url，那么UI线程会去通知网络线程，让他发起请求获取网站内容
    • 这时候会进行DNS查询，建立TSL连接(对于HTTPS)
    • 如果网络线程收到了一个重定向(301之类的)，那么网络线程就会告诉UI线程，让他重定向
    • 然后再次向另一个服务器发送请求

  3. 读取响应

    服务器返回的实体回来以后，网络进程会检查之前收到的几个字节

    响应的Content-Type头部应该包含数据类型，如果没有这个字段，则需要MIME类型嗅探

    • 如果响应是HTML文件，那么就需要渲染进程
    • 如果是一个ZIP文件之类的，那么就需要进行下载，需要将数据传给下载管理器

  4. 联系渲染进程

    • 网络线程确认浏览器可以导航到用户请求的网站
    • 那么**UI线程会将数据准备好的同时去通知渲染器进程**，来渲染页面

  5. 提交导航

    • 数据和渲染器进程都已经有了，通过IPC(进程间通信)从浏览器进程到渲染器进程提交导航
    • 渲染器进程同时也会不断地接受HTML数据流
    • 当浏览器进程收到渲染器进程的确认消息时，导航完成，文档加载

  6. 初始加载完成

    • 渲染器进程将负责加载资源和渲染页面
    • 在完成渲染以后，渲染进程会通过IPC发送消息给浏览器进程
    • UI进程旋转按钮停止

渲染

渲染是渲染器进程内部做的事情

合成器进程和栅格化进程负责高效的平滑的渲染页面

渲染器进程的核心

将HTML，CSS，Javascript转化为用户可以交互的部分

解析HTML

  • 渲染器进程收到导航的提交消息，就是开始接收HTML

  • 解析HTML并将它转化为DOM

  • 当我们遇到一些链接或者图片资源时，chrome将会并发进行“预加载扫描器”，预处理器会将请求交给网络进程

  • 假如我们遇到JavaScript，那么可能他会阻塞解析，这边建议最好使用<script>标签上添加async或defer属性

计算样式

  • 线程会解析CSS并计算每一个节点的样式

布局

  • 进行布局，就是告诉元素间的几何关系

绘制

  • 绘制

合成

  • 合成（composite）是将页面不同部分先分层并分别栅格化，然后再通过独立的合成器线程合成页面。这样当用户滚动页面时，因为层都已经栅格化，所以浏览器唯一要做的就是合成一个新的帧。而动画也可以用同样的方式实现：先移动层，再合成帧。

交互

链接：[深入理解现代浏览器](w3c/20190603_cncuckoo_深入理解现代浏览器.md at master · 75team/w3c (github.com))

avatar
文章
阅读
粉丝