前端技术演化史

1995-2005 浏览器时代

Properties1
tags时代叙事, 浏览器战争, 蛮荒时代

10分钟阅读

🌅 1995–2005 浏览器时代

一句话定性

Web 从”会动的文档”开始,在浏览器厂商的军备竞赛中野蛮生长——先有了能力,后有了标准,最后留下满地碎玻璃。

一、背景:行业现状

1990 年 Tim Berners-Lee 发明 Web 时,它的设计目标只有一个:让科学家共享带链接的静态文档。HTML 是一种”文档标记语言”,不是”应用平台”。整个 Web 的世界观是:

  • 服务器存文档 → 浏览器请求 → 渲染成页面 → 用户点链接 → 整页刷新换下一篇文档。

这套模型叫 MPA(多页应用),它统治了第一个十年。1994 年 Netscape Navigator 发布,几个月内吃下 80%+ 市场。Web 第一次走进普通人的生活。

然后 1995 年发生了两件改变一切的事:

  1. Netscape 在 10 天内(Brendan Eich)赶制出 JavaScript,让网页第一次能”动”起来。
  2. 微软意识到 Web 是操作系统级威胁,推出 Internet Explorer,把它捆绑进 Windows。

第一次浏览器战争就此点燃。

二、核心痛点:开发者面临什么

这个时代的开发者活在地狱里

  • 没有标准:Netscape 有 document.layers,IE 有 document.all,同一段代码要写两遍甚至三遍。
  • 厂商私有 API 满天飞:IE 的 ActiveX、Netscape 的 LiveConnect,绑死在各自浏览器上。
  • JavaScript 被当玩具:最初只用来做表单校验、鼠标跟随特效、状态栏跑马灯。它性能差、设计仓促、被工程师鄙视。
  • CSS 支持稀烂:盒模型 IE 和标准各算各的(著名的 IE盒模型之争),布局靠 <table> 嵌套 <table>(这正是 布局演进史的起点)。
  • 调试基本靠 alert():没有开发者工具,没有断点,没有控制台。

核心矛盾:Web 想做的事(交互)远超它被设计的能力(展示),而唯一的执行环境——浏览器——还在彼此为敌。

三、代表技术

技术角色专题
Netscape NavigatorWeb 的开拓者,JS 的发源地Netscape Navigator
Internet Explorer 4–6战争胜利者,也是十年噩梦Internet Explorer
JavaScript (1995)网页的”动力”ECMAScript演进史
ECMAScript / ES3 (1999)第一次真正可用的语言标准化ES3
DHTML”动态 HTML”,JS+CSS+DOM 的早期统称—
XMLHttpRequest (1999, IE5)埋下了 Ajax 的种子(被严重低估)2005-2013 Ajax时代
W3C DOM试图统一文档操作模型的标准—

四、为什么诞生:技术出现的原因

  • JavaScript 为什么是 10 天产物? 因为 Netscape 商业上急需一个”能在网页里跑的脚本语言”来对抗即将到来的竞争。Eich 本想做 Scheme,管理层要求”长得像 Java”(蹭当时最火的 Java 热度),于是诞生了这个披着 C 语法、内核是 Scheme + Self 原型链的混血儿。它的很多缺陷(隐式类型转换、==、全局变量)都源于这场仓促。详见 为什么JavaScript有这么多坑。
  • ECMAScript 为什么出现? 因为微软抄了 JavaScript 做出 JScript,语言出现分叉。Netscape 把语言提交给 ECMA 国际标准化组织,1997 年 ES1 诞生,目的就是阻止语言被任一厂商私有化。ES3(1999)是这个时代真正广泛使用的版本。
  • IE 为什么能赢第一次战争? 不是因为技术更好,而是捆绑分发——它免费、预装在每台 Windows 上。这是”渠道战胜产品”的经典案例,也为后来埋下伏笔。

五、解决了什么:具体价值

  • JavaScript 让 Web 从静态走向交互,这是从”文档”到”应用”的第一块基石。
  • ECMAScript 标准化让语言核心至少有了一个共同基准,跨厂商代码有了理论可能。
  • XMLHttpRequest 虽然此时无人重视,但它让”不刷新整页就和服务器通信”成为可能——这颗种子在下一个时代爆炸。
  • IE 的胜利客观上统一了大部分市场(IE6 一度占 90%+),短期内反而减少了兼容性工作量(代价是后面十年的技术债)。

六、带来的新问题:技术债与缺陷

这个时代留下的债,前端还了二十年

  1. IE6 成为永恒的枷锁:微软赢了战争后停止创新(2001–2006 几乎没更新),但它的市场占有率又太高,无法抛弃。“兼容 IE6”成为一代前端工程师的集体创伤。
  2. JavaScript 的设计缺陷被冻结:为了不破坏现存网页,那些坑(typeof null === 'object'、自动分号插入、var 提升)永远无法移除,只能靠后续标准”打补丁”。
  3. DOM API 又慢又难用:直接操作 DOM 既啰嗦又容易出 bug,为 jQuery 的崛起准备了土壤。
  4. 没有模块系统:所有 JS 都是全局变量,大型项目几乎无法维护。这个空缺直接催生了 后来的模块化革命。

七、对下一代技术的影响:因果链

IE 在 IE5 里塞进了 XMLHttpRequest(本为 Outlook Web Access)
        │
        ↓
Google 用它做出了 Gmail(2004) 和 Google Maps(2005)
        │  "网页居然能像桌面软件一样不刷新就更新!"
        ↓
Jesse James Garrett 给这个模式起名:Ajax(2005)
        │
        ↓
        进入 ►► [[2005-2013 Ajax时代]]

同时:
DOM 太难用  ──►  jQuery(2006) 用 $ 抹平兼容性  ──►  统治下一个时代
IE6 的停滞  ──►  Firefox(2004) 借机崛起,第二次浏览器战争开始

📊 本时代技术因果图

这张图聚焦本时代内部:谁因为谁的什么痛点而出现 

flowchart TD
    js["JavaScript 1995"]
    dhtml["DHTML (JS+CSS+DOM)"]
    nn["Netscape Navigator"]
    ie["Internet Explorer"]
    win["捆绑进 Windows"]
    war["第一次浏览器战争<br/>NN vs IE"]
    compat["兼容性地狱<br/>document.all vs document.layers"]
    privapi["各家私有 API<br/>ActiveX / LiveConnect"]
    jscript["微软 JScript<br/>语言分叉"]
    es["ECMAScript 标准化<br/>ES1 1997 / ES3 1999"]
    ie6["IE6 垄断 (90%+)"]
    stall["停止创新 (2001-2006)<br/>埋下十年技术债"]
    xhr["XMLHttpRequest 1999<br/>(IE5, 为 OWA 而生)"]

    js -->|"让网页能动"| dhtml
    nn -->|"商业竞争, 推出对方"| war
    ie --> war
    js -->|"微软抄 JS 做出 JScript"| jscript
    war -->|"各家抢先实现非标准能力"| privapi
    privapi -->|"同一段代码要写两三遍"| compat
    jscript -->|"阻止语言被任一厂商私有化"| es
    ie -->|"免费 + 预装, 渠道战胜产品"| win
    win -->|"IE 赢得战争"| ie6
    ie6 -->|"赢家躺平, 无竞争压力"| stall
    ie -->|"为 Outlook Web Access 内置非标准对象"| xhr

    xhr -.->|"伏笔: 异步局部刷新的种子, 下时代爆发"| ajax["Ajax 时代"]
    compat -.->|"伏笔: 抹平差异的迫切需求催生 jQuery"| jq["jQuery"]

    classDef seed fill:#fff3e0,stroke:#e65100;
    classDef next fill:#eceff1,stroke:#607d8b,stroke-dasharray:4 3;
    class xhr,es seed;
    class ajax,jq next;

本时代的历史地位

浏览器时代是前端的”寒武纪大爆发”前夜:能力的种子(JS、XHR、DOM)都已埋下,但还杂乱无章。它留下的最大遗产是一个反面教训——没有标准的野蛮生长,代价是整整一代人的兼容性苦工。这份痛苦,直接定义了下一代技术的使命:抹平差异,让开发者只写一遍代码。

🔗 上一篇:(起点) | 下一篇:2005-2013 Ajax时代 🔗 相关专题:浏览器演进史 | ECMAScript演进史 | 渲染模式演进史

关系图谱

反向链接