【技术创作101训练营】Web 前端发展历程

简介: 【技术创作101训练营】Web 前端发展历程

前言

大家好!今天我分享的题目是:“Web 前端发展历程”。

前端对于不是对口专业的人来说,可能是陌生的,但是如果对于每天都在接触和使用的人来说,应该是驾轻就熟的。那么前端到底是什么呢?简单来说:浏览器呈现出来的页面、给用户看的、可操作的就是前端。如果再往大了说,你所看到的一切,包括网页、移动端页面、小程序、甚至某些 app,都是属于前端范畴。

前端的范畴很大,如果要具体说明,可能要很久,我们先来了解一下 Web 前端。在这之前,不得不说下 Internet 和计算机,因为他们的出现为前端的开始奠定了基础。

Internet 的最早起源于美国国防部高级研究计划署 DARPA(Defence Advanced Research Projects Agency)的前身 ARPAnet,该网于 1969 年投入使用。由此,ARPAnet 成为现代计算机网络诞生的标志。

正因如此,Web 前端的发展也经历了比较漫长的过程。


洪荒时代

这个时代是一个从无到有的时代,WWW 的诞生(1990)、浏览器的诞生(1992)、W3C 理事会成立(1994);

  1. 1990 年,WWW(万维网)诞生。全称:World Wide Web。
  2. 1992 年,NCSA 研发了第一个浏览器:Mosaic,可以窗口浏览网页。随后新一代浏览器:Netscape Navigator(网景浏览器),于 1994 年诞生。
  3. 1994 年,Tim Berners - Lee 创建了 W3C 理事会。蒂姆 · 伯纳斯 · 李被称为”万维网之父“。

这个时代也可以称为 web1.0 时代的开始,这个时代是一个群雄并起,逐鹿网络的时代,这个时期,开发人员没有细分,基本是后台人员开发接口,顺便把页面一起画,即使是有专门的前端开发,也只是用 HTML 写写页面模板、CSS 给页面排个好看点的版式。


小前端时代

1995 年 5 月,网景公司要求 Brendan Eich,未来的网页脚本语言必须"看上去与 Java 足够相似",但是比 Java 简单,使得非专业的网页作者也能很快上手,为了应付公司安排的任务,他只用 10 天时间就把 Javascript 设计出来了(导致后来很长一段时间,Javascript 写出来的程序混乱不堪)。这样就渐渐形成了前端的雏形:HTML 为骨架,CSS 为外貌,JavaScript 为交互。

这个时期,浏览器已是五花八门,虽然已经有了 ECMA(JavaScript 规范文档)标准和 W3C(HTML、CSS 规范文档),但是标准在未实施之前,浏览器已在市场流行,这就导致我们在开发项目时要考虑兼容各种浏览器。现在的前端开发不再是只写静态页面的切图仔,而是能写简单的逻辑代码。1998 年 Ajax 的出现,前端也从纯内容的静态发展到动态页面、数据处理的新时期。还衍生出了 JQuery 这样优秀的框架。


大前端时代

市面上浏览器已 IE 压倒性胜利,随着浏览数据量的增大,网页交互的增多,JavaScript 的弊端和瓶颈也显露出来,所以圈内大佬们按耐不住洪荒之力。

  1. Chrome 于 2008 年 9 月 2 日发布 V8 引擎发布。
  2. 2009 年 AngularJS 诞生、同年 2 月,Node 诞生。
  3. 2011 年 ReactJS 诞生。
  4. 2014 年 VueJS 诞生

V8node 的出现,使前端开发人员可以用熟悉的语法糖编写后台系统,ReactAngularVue 等 MVVM 前端框架的出现,使前端实现了项目真正的应用化(SPA 单页面应用),现在也是前端开发框架三大巨头。

这个时期前端已可以控制自己的各种行为,可玩性更高。随着智能手机及 4G 的普及,使的前端从单一的 PC,开始向现手机、平板等平台覆盖。

最后,前端经过这几十年的发展,从简单的静态页面到现在的多端、多平台这个过程。已经说明这条路将会引导我们一直走下去。

相关文章
|
1月前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
1月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
23天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
31 6
|
28天前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
27天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
40 5
|
29天前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
42 3
|
1月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
29天前
|
缓存 安全 前端开发
构建高效Web应用的五大关键技术
【10月更文挑战第42天】在数字化浪潮中,Web应用已成为企业与用户互动的重要桥梁。本文将深入探讨提升Web应用性能和用户体验的五项核心技术,包括前端优化、后端架构设计、数据库管理、安全性增强以及API开发的最佳实践。通过这些技术的应用,开发者可以构建出更快、更稳定且更安全的Web应用,满足现代网络环境的需求。
|
1月前
|
人工智能 安全 物联网
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
下一篇
DataWorks