前端的发展历程(上)

简介: 前端的发展历程

前端的发展历程

什么是前端

  • 前端:针对浏览器的开发,代码在浏览器运行
  • 后端:针对服务器的开发,代码在服务器运行

前端三剑客

  • HTML
  • CSS
  • JavaScript

HTML

HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的基石。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。
超文本标记语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准):
HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日,W3C推荐标准
HTML 4.0——1997年12月18日,W3C推荐标准
HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准
HTML 5——2014年10月28日,W3C推荐标准

CSS

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

JavaScript

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

前端的发展离不开浏览器的发展

浏览器的发展其实也是前端的发展


我们来简单了解一下浏览器的发展历史

1991年,WorldWideWeb 浏览器发布
这款由 Web 之父 Tim Berners-Lee 亲手设计的图形化浏览器还包含一个所见即所得 HTML 编辑器,为了避免同 WWW 混淆,这个浏览器后来改名为 Nexus.
1993年,Mosaic 发布
Internet 的流行应该归功于 Mosaic,这款浏览器将 Web 带向了大众。诸如 IE, Firefox 一类的当代浏览器仍然在延用 Mosaic 的图形化操作界面思想。
1994年,Netscape 成立
Marc Andreessen 带领 Mosaic 的程序员成立了 Netscape 公司,并发布了第一款商业浏览器 Netscape Navigator.
1995年,IE 发布,浏览器之战即将爆发
微软针对 Netscape 发布了他们自己的浏览器,IE,第一场浏览器之战爆发。
1996年,Opera 发布
Telenor 是挪威最大的通讯公司,他们推出了 Opera,并在两年后进军移动市场,推出 Opera 的移动版。
1998年,Mozilla 项目成立
Netscape 成立 Mozilla 开源项目,开发下一代浏览器,后来证明,使用原有代码开发新东西是一种负担,接着他们着手从新开发。
1998年,Netscape 浏览器走向开源
随着同 IE 征战的失利,Netscape 市场份额急剧下降,Netscape 决定将自己的浏览器开源以期重整山河。
2002年,IE 开始主导浏览器市场
市场份额达到95%,借助操作系统的捆绑优势,IE 赢得第一场浏览器之战。
2003年,苹果 Safari 浏览器登场
苹果进入了浏览器市场,推出自己的 Webkit 引擎,该引擎非常优秀,后来被包括 Google, Nokia 之类的厂商用于手机浏览器。
2004年,Firefox 引发第二场浏览器之战
Firefox 1.0 推出。早在 Beta 测试期间就积累了大量人气的 Firefox 引发了第二场浏览器之战,当年年底,Firefox 已经赢得 7.4% 的市场份额。
2006年,IE7 发布
IE6 发布后的第六年,迫于 Firefox 的压力,微软匆匆推出 IE7 应战,吸取了 Firefox 的一些设计思想,如标签式浏览,反钓鱼等。但这款浏览器现在看来并不成功。
2008年,Google 携 Chrome 参战
Google 发布了他们自己的浏览器,加入这场战争。轻量,快,异常的稳固让这款浏览器成为不可轻视的一个对手。

浏览器现状

浏览器内核

早期的前端

早期受制于浏览器以及技术、兼容性等问题,导致网页的显示效果非常的单一,几乎都是静态页,前端的工作也是非常简单,说是前端,其实只是一个模板工程师,编写页面模板,然后让后端负责渲染。所以在互联网早期,前端工程师这个职位可以说是不存在,通常由后端或者是美工来兼任。

像这种古老的设计风格,现在已经很难看到了

后端MVC的开发模式


当时的网站开发,采用的是后端MVC模式

  • Model(模型层):提供/保存数据
  • Controller(控制层):数据处理,实现业务逻辑
  • View(视图层):展示数据,提供用户界面

前端只是后端 MVC 的 V

当用户访问网站时,会向后台发送一个请求,后台接收到请求,生成静态HTML页面,发送到浏览器。

比如JSP

<html>
<head><title>Hello World</title></head>
<body>
Hello World!<br/>
<%
out.println("Your IP address is " + request.getRemoteAddr());
%>
</body>
</html>

目录
相关文章
|
6月前
|
机器学习/深度学习 前端开发 JavaScript
探寻前端巨变:从HTML到现代框架的发展历程
探寻前端巨变:从HTML到现代框架的发展历程
85 2
|
移动开发 前端开发 JavaScript
前端的发展历程(下)
前端的发展历程(下)
87 0
|
Web App开发 开发框架 前端开发
【技术创作101训练营】Web 前端发展历程
【技术创作101训练营】Web 前端发展历程
186 0
|
缓存 运维 Kubernetes
前端高级进阶:前端部署的发展历程
前端高级进阶:javascript 代码是如何被压缩 前端高级进阶:如何更好地优化打包资源 前端高级进阶:网站的缓存控制策略最佳实践及注意事项 前端高级进阶:在生产环境中使你的 npm i 速度提升 50% 前端高级进阶:使用 docker 高效部署你的前端应用 前端高级进阶:CICD 下的前端多特性分支环境的部署 前端高级进阶:前端部署的发展历程 更多文章: 前端工程化系列 我在 github 上新建了一个仓库 每日一题,每天一道面试题,欢迎交流。 前端面试题小记 前端大厂面经大全集 计算机基础面试题小计 前端一说起刀耕火种,那肯定紧随着前端工程化这一话题。随着 react/vue/ang
268 0
|
19天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
|
19天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
33 0
|
19天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
19天前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
19天前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
|
19天前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT