本系列其他译文请看[JS工作机制 - 小白1991的专栏 - 掘金 (juejin.cn)] (juejin.cn/column/6988…

本文阅读指数:2 本文介绍了一些历史趣闻，以及当前图形处理的几种方式。都比较浅。但是webgl其实是值得深挖的，这也是前端可能发力的一个大方向。

概览

make our way to the vast graphics offerings of modern browsers. 这一章我们会回顾一下浏览器中的图形学历史。我们会看到一些老朋友，比如Java Applets 和 ActiveX ，还有一些新朋友SVG, HTML 5 Canvas, 和 WebGL。先从历史看起

浏览器的1990到现在

1989年，[Tim Berners-Lee]结合了DNS和TCP等技术，发明了WWW。

从那以后，诞生了很多浏览器。其中有一个[Mosaic]，在1993年发布。它引入了两个革命性的特性，引入了图像并支持windows。这让它从一个可研性质的工具，变成了大众市场的应用。

1995年，网景浏览器发布了0.9版本，然后迅速占有了75%的市场。最重要的，[Brendam Eich] 发明的JS被植入到网景2.0版本。 1995年，微软也分发布了IE1.0。开启了网景和微软的浏览器大战。最终IE4主宰了市场。 2001年，IE6 已经占有了96%的浏览器市场，成为第一个赢家。

然而，3年之后就开始了新的大战。 Firefox 从网景的灰烬中崛起，在2004年发布了第一个版本。Google在2008年发布了Chrome。到了2010年， IE的份额被降低到50%以下。2012年，Chrome超越了IE。手机浏览器也变得越来越重要。

同时还有其他的玩家，比如Opera和Safari，但是他们不超过10%的市场。

These days Chrome dominates the desktop with 77%, all others are below 10%. 如今。Chrome已经超越了77%，而其他的不足10%

微软最近的浏览器Edge，也从2020年开始基于Chromium内核。

好了，来看看图形和图像吧

浏览器中的图像

德高望重的<img>标签，在1993年被Mosaic引入，然后被纳入HTML2.0的标准中，成为web的重要部分。

早期的web中，我们只有这些。但是开发者依然非常具有创造性，他们用JS和图像结合，让图像动来动去，甚至可以玩游戏。

当然，性能会有问题。有很多小技巧来解决性能问题，比如图像映射，后台懒加载，详图降级等等。但是无论如何当时的图像工具还是非常简陋的。

Java Applets

进入Java时代。Java是互联网语言。 1995--2017年期间，Java applets是浏览器世界一个强劲的力量，直到浏览器因为严重的安全问题而不再支持。 Java applets 可以跨平台，被所有操作系统的所有浏览器支持。它可以访问3D硬件加速，比JS快得多。在早期， Java applets是具有富交互和可视化应用的首选。直到浏览器厂商逐渐的将其踢出。在页面中使用Java applets，需要<applet>标签：

<html>  
  <body>  
    <applet code="CoolApplet.class" width="500" height="500">  
    </applet>  
  </body>  
</html>

你需要像使用Java类那样使用applet 代码。这个类必须继承java.applet。

我们使用Java applet 画个圆：

import java.awt.Graphics;
import java.applet.Applet;    

public class CoolApplet extends Applet
{
  public void paint (Graphics g)
  {                 
    g.drawOval(250, 250, 100, 100);
  }
}

ActiveX 控件

IE 始终支持Java applets，但是微软使用了自己的技术栈，基于COM/OLE。也就是ActiveX 控件。在IE3 到IE11中，你都可以嵌入ActiveX 控件。但现在的Edge不支持。

ActiveX 控件有一个GUID标识符，叫 clsid。使用<object> 标签嵌入到网页中。

<html>  
  <body>  
    <object id="CoolActiveX" width="300" height="100"
       classid="B5612DAA-2EEF-1173-85DF-00105AC8B715">
    </object>
  </body>  
</html>

Macromedia/Adobe Shockwave 和 Flash

Macromedia (1992–2005)是一个web工具和开发的强力军。 Macromedia Shockwave 播放器是一个网景的插件，可以发布web多媒体，图像和动画。Shockwave获得了很多成就，直到2019年还占有市场。1996年，Macromedia发布了Flash Player 1.0. Flash具有自己的编辑器。 Shockwave 和 Flash 可以让开发者开发出丰富的应用，游戏，和视觉效果。在2000年，Flash 5 发布，很快就遍及互联网的角落。Adobe同样致力于开源组件，像SWF文件格式，以及给Mozilla基金会捐赠了ActionScript VM。

在那些年里，Flash获取了极大地成功，同时伴随着危机。2010年，乔布斯给Adobe写了一个公开信，指责其安全问题。

2017年，Adobe声明在2020年结束Flash的一生。2021年，浏览器已经完全不再支持flash内容了

HTML 5 和现代web

W3C在2008年发布了H5。它支持多媒体应用，同时兼容低等级设备比如手机。H5引入了一个现代的区域，可以不用任何插件开发出完善的富web应用。它带了一个全新的黄金时代。

HTML标准现在被 [WHATWG]维护，它是一个浏览器厂商组成的团体，维护现行的HTML标准。

但是，这一切都起源于H5，它包含了多个web标准比如H4,XHTML 1.0, 和 DOM Level 2。另外，又增加了一些新的元素来管理页面结构，比如 <main>, <section>, <article>, <header>, <footer>, <aside>, <menu>, 和 <nav>. 当然，更重要的是为图像和多媒体提供的 <canvas>, <video>, 和 <audio>，以及为矢量图和数学公式提供的 <svg> and <mathml> .

浏览器厂商对H5的支持，使得开发者可以只使用标准的web技术，就能开发出跨浏览器和跨平台的应用。

H5和富web应用的标准API的支持，把JS推到了最前面。曾经，web程序使用过很多编程语言，JS主要用来增加一些交互。

来看看现代浏览器在图形上的支持吧：

SVG (Scalable Vector Graphics)

SVG是一个复杂的XML语言，用来描述矢量图和更多内容的。所有的现代浏览器都支持。SVG内容可以像HTML元素那样被嵌入到web页面中：

比如我们画一个金色的矩形:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="120" height="120">
  <rect x="10" y="10" width="200" height="100"
        fill="gold" stroke="black"
  />
</svg>

嵌入页面时，就不需要XML元数据了。画同样一个矩形，可以这么做：

<html>
  <body>
    <p>SVG example</p>
    <svg width="500" height="220">
      <rect x="10" y="10" width="300" height="100"
            fill="gold" stroke="black"
      />
    </svg>    
  </body>
</html>

SVG 有这些属性:

标准 (像VML)
可缩放
在标签中埋置
像DOM其他的元素一样可编程

Canvas 2D API

Canvas 2D API 是H5中争论最多的特性。它可以让开发者在浏览器中渲染2D图像，并使用JS编程2D图像，而不用借助外部的插件或者工具。它的出现，也让众多插件形式的渲染工具过时了。一切都从<canvas>元素开始，它声明了一个区域，你可以在里面绘制图像。一旦有了<canvas>元素，你可以获得一个2d上下文，它暴露了一些方法让你渲染各种文本和形状。

我们看一个例子：

<html>
  <body>
    <canvas id="canvas"></canvas>
  </body>  
</html>

我们使用JS获取文档中的canvas，然后请求它的上下文。返回的上下文是一个对象，实现了CanvasRenderingContext2D 接口。这是canvas渲染的网关。然后，我们再画一个金色的矩形：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'gold';
ctx.strokeStyle = 'black';
ctx.fillRect(10, 10, 200, 100);
ctx.strokeRect(10, 10, 200, 100);

其实和SVG类似，我们提供了一样的信息：位置，尺寸，颜色等。但是，这是通过编码的方式。canvas上下文支持这些特性：

线样式
文字样式
阴影
倾斜度
模型
变换
混合
图像
像素操作
状态
点击热区
过滤器

总的来说，Canvas提供了2D所有的能力。很多库和框架都是基于Canvas API的。我最喜欢的是Phaser游戏框架。

WebGL

WebGL给浏览器带来了高性能的3D和2D API---它是收到OpenGL的启发，OpenGL是与GPU交互的行业领头的API协议。 WebGL可以让我们享受硬件加速渲染的快感。和Canvas 2D API一样，它也是H5的一部分。会有点让人疑惑的是，它也使用了<canvas> 元素。但它比Canvas 2D刺激多了，直接和WebGL API是一个艰巨的任务。我建议使用一些比较友好的库，比如 Three.js。Three.js 带来跟很多概念和能力，更加贴近3D开发者：

Scenes 场景
Cameras 相机
Geometry 几何体
3D Model Loaders
Lights 光源
Materials 材质
Shaders 阴影
Particles 粒子
Animations 动画
Math Utilities 计算单元

我们使用three.js 展示一个简单的例子

<html>
  <body>
    <script src="https://threejs.org/build/three.js"></script>
    <script>
      // Javascript will go here.
    </script>
  </body>
</html>

在JS块里，我们添加一个场景，一个相机，以及一个渲染器。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(100,
                                         window.innerWidth/window.innerHeight,
                                         0.1,
                                         1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

然后，添加一个金色的立方体:

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial({ color: "gold" });
var cube = new THREE.Mesh( geometry, material );
scene.add(cube);

camera.position.z = 2;

最后，让它动起来：

var render = function () {
  requestAnimationFrame(render);
  cube.rotation.x += 0.1;
  cube.rotation.y += 0.1;
  renderer.render(scene, camera);
};

render();

可以在这里查看效果: Edit fiddle - JSFiddle - Code Playground

边学边译JS工作机制--36. 浏览器可视化的历史

概览