网页设计发展历史6 第1篇
当您需要进行 Google 搜索时，您使用什么设备？如果您说答案是您的智能手机，我不会感到惊讶。（您甚至可能正在移动设备上阅读此内容。）
截至 2021 年 8 月，移动设备（不包括平板电脑）占全球网页浏览量的 57%。与传统台式机相比，更多人使用移动设备访问互联网。
同样，这严重影响了现代网站设计。对于网页设计师来说，在设计布局时考虑移动用户 并创建响应式设计至关重要。
…如果不是，他们可能会疏远一半以上的流量。
网页设计发展历史6 第2篇
3DML 是一个鲜为人知的用于制作三维站点的网页设计语言。由 Michael Powers 编写于 1996 年，3DML 文件实际上由一种非标准的 XML 语言写成。
Flatland Rover 是一款独立开发的 3DML 浏览器，尽管还有对应的 Internet Explorer，Netscape Navigator，the AOL browser 和 Opera 浏览器插件，但随着开发进度停滞于2005年，Firefox的插件始终未能问世。
基于CSS的设计
CSS设计受到关注始于21世纪初。虽然CSS已经存在很长一段时间了，但是在当时仍然缺乏主流浏览器的支持，并且许多设计师对它很是陌生（甚至感到恐惧）。
与表格布局与Flash网页相比，CSS有许多优势。首先它将网页的内容与样式相分离，这从本质上意味着视觉表现与内容结构的分离。
CSS是网页布局的最佳实践，与CSS相比表格布局根本不值一提。CSS极大地缩减了标签的混乱还创造了简洁并语义化的网页布局。CSS还使得网站维护更加简便，因为网页的结构与样式是相互分离的。人们完全可以改变一个基于CSS设计的网站的视觉效果而不去改动网站的内容。
由CSS设计的网页的文件体积往往小于基于表格布局的网页，这也意味着页面响应时间的改善。虽然首次访问一个网站会下载样式表占用带宽，但CSS会缓存在访问者的浏览器里（默认情况下），这样接下来的访问过程中，网页就都会迅速显示了。
立减 ¥
请填写红包祝福语或标题
红包个数最小为10个
红包金额最低5元
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。
网页设计发展历史6 第3篇
要访问不同的网站，我们需要互联网浏览器。如今，我们使用 Google Chrome 和 Internet Explorer 等工具。但是第一个网络浏览器 Netscape 是由 Jim Clark 和 Marc Andreessen 于 1994 年创建的。
互联网浏览器后来更名为 Mosaic Netscape 和 Netscape Navigator。
它成为当时最受欢迎的浏览器，在90 年代中期拥有80% 的市场份额。
网页设计发展历史6 第4篇
有史以来第一个网站是CERN ——Tim Berners-Lee 的工作地点。
网站设计当时并没有改变游戏规则。万维网远没有现在那么复杂，而且计算机还是相当新的。设计软件不是“东西”。
（事实上，这些设计元素是我们今天仍在使用的东西。）
当时的网站是使用对超文本标记语言 (HTML) 的私人访问来制作的。Tim Berners-Lee 实际上在 1991 年晚些时候发布了一份名为“ HTML 标签”的文档，其中包括用于构建网站的前 18 个已知 HTML 代码。
网页设计发展历史6 第5篇
到 90 年代后期，企业开始创建网站。随着网站变得越来越流行，对独特网页设计的需求变得更加重要。
动画是这个时代大多数网页设计师的首选。他们会使用 GIF（按顺序移动的静止图像）来脱颖而出，其次是 Macromedia Flash——我们现在将其称为 Adobe Flash。
Flash 的引入意味着网站所有者可以向他们的网站添加高质量的图像、交互性和音频。
不用说，这对网页设计师来说是一个重要的时刻。
网页设计发展历史6 第6篇
Flash（最初被称为 FutureSplash Animator，然后是 Macromedia Flash，现在叫做 Adobe Flash）开发于 1996 年。起初只有非常基本的工具与时间线，最终发展成能够开发整套网站的强大工具。Flash 提供了大量的远远超过 HTML 所能够实现的视觉表现效果。
Macromedia Shockwave
在 Flash 之前，有 Macromedia Shockwave（之后是 Adobe Shockwave）。Shockwave 用于为 CD-ROM 制作目录和多媒体内容，Shockwave 文件体积庞大，考虑到当时的网络连接以拨号上网为主，应用 Shockwave 还是不够明智的。与之相比，Flash 影片体积小巧，在线应用更加可行。
网页设计发展历史6 第7篇
在互联网真正开始之时，黑色的显示屏仅能显示单色的像素。可以说，当互联网天地初开之时，Web Design 仅仅意味着字符和空格的排列组合。虽然图形化的界面早在80年代初就有了，但在此时普及率并不高。直到90年代，图形化界面才真正进入千家万户，而那时候，才是属于互联网的狂野西部。
表格（table）：网页的兴起（1995）
能够显示图片的浏览器的诞生，是促使网页设计这个行业诞生的重要先决条件。实际上在当时，最接近于信息结构化的概念，是HTML中已有的元素：表格（Table）。所以，David Siegel 在他的网页设计书《Creating Killer Sites》讲述了他设计优秀网站的秘诀：在表格中嵌套表格，将静态的表格和动态的表格以巧妙的方式结合到一起。尽管表格本身是用来承载数据的，用来承载内容和图片有点奇怪，但是在那个时代，这种方法依然显得颇为靠谱，并且大行其道。
网页设计所面临的另外一个问题，就是如何保持网页那脆弱的结构。也正是因为这种需求，切片设计（Slicing Design）逐渐流行了起来。设计师创建出漂亮的网页布局，随后开发者将整个设计稿切片，找出呈现设计的最佳方法。另一方面，表格还有一些炫酷的功能，比如垂直对齐，以像素为单位或者以百分比来控制对齐。在那个时代，表格可是近乎栅格系统一般的灵活的设计神器，也正是因此，那个时代的开发者并不喜欢前端的代码。
来自JavaScript的救援（1995）
JavaScript的出现补足了尚且原始的HTML。举个例子，如果你想写个弹出窗，或者想动态修改某些对象的顺序？HTML不行，但是JS可以！不过此时JS的主要问题在于，它处于整个网页布局的顶层并且需要单独加载。很多时候它仅仅被懒惰的开发者用作一个简单的补丁，但如果使用得当，JS可以非常强大。今天，同样的功能如果CSS能实现，我们会尽量避免使用JS。不可否认的是，JS本身确实很强大，前端常用的jQuery，后端的都是不可多得的好东西。
网页设计发展历史6 第8篇
技术的革新已经开始将网页设计推动到一个全新的境界。在许多设计平台上，设计师只需要在屏幕上移动不同的控件就可以生成整洁可用的代码出来，并且这些代码非常灵活，可控度极高！试想一下，开发者无需担心浏览器兼容性，可以专注于更加实际的问题！
新诞生的概念正在推动网页设计。CSS中新诞生的属性，诸如vh和vw（viewport height 与 width），就使得网页元素的位置控制更加灵活自由，一次性解决了设计师纠结多年的顽疾。作为CSS一部分的Flexbox则是另一个新事物，它可以快速创建布局，轻松修改属性而无需编写过多代码。
网页设计正在飞速发展，未来还会有越来越多的创新，就让我们拭目以待吧！
网页设计发展历史6 第9篇
每周都会发布新技术，并且没有人知道下一个十年对网页设计有什么影响。
消费者的偏好每个月都在变化。就像 90 年代后期有效的“最佳实践”列表不适用于现代网站一样，我们今天看到的网页设计趋势在未来几年将更加先进。
素马设计从开始到现在到将来都热心服务设计界，为行业，为客户，为体验者打造精彩的作品以及分享相关经验。欢迎热爱设计的小伙伴加入素马设计家庭，让我们一起为热爱的事情走到一起，一起向未来。
网页设计发展历史6 第10篇
AJAX，Async Java And XML，于 1998 年开始初步应用，2005 年开始普及。AJAX 的广泛使用，标志着 时代的开启。这同时也是各大浏览器争锋的时代。
现在，我们可以通过 AJAX 来动态获取数据，利用 DOM 操作动态更新网页内容了。来看看加入了 AJAX 的网页是怎么工作的：
这个时候前端路由还没有兴起，大多数情况下还是后端返回一整个页面，部分内容通过 AJAX 进行获取。
随着智能手机的出现，APP 开始萌芽。相比起网页，APP 编写好之后只需要数据接口就能工作；而网页不仅需要后端写业务逻辑，控制跳转，还要写一部分接口用于 AJAX 请求。
这个阶段前端能做的事情还是很少，还背负着“切图仔”的绰号。随着 HTML5 草案的提出，前端能做的交互越来越多，程序员们急需解决以下问题：
后端业务代码和数据接口混合，还得兼容 APP 的接口（很多企业既有 APP 又有网站）
前端的代码复杂度急剧增加
后端业务代码和数据接口混合，还得兼容 APP 的接口（很多企业既有 APP 又有网站）
前端的代码复杂度急剧增加
能不能让前端也像 APP 一样，只需要请求数据接口即可展现内容呢？
｜ 扩展资料：第二次浏览器大战
2004 年 Firefox 发布，拉开了第二次浏览器大战的序幕。同期市面上诞生的各种新兴浏览器，如 Safari、Chrome 等，也加入了战争。
此前由于 XP 系统实在过于火爆，导致 IE 6 无任何竞争对手，微软甚至解散了浏览器的大部分员工，只留下几个人象征性地维护顺便修补一下 bug。这让开发人员非常痛苦。
此时 Firefox 以优越于 IE 的性能和非常友好的编程工具，迅速将那些被 IE6 搞得焦头烂额的网页开发人员们，从水火之中救出，导致先让前端工程师成为忠实的第一批用户，然后，经由这些有经验的开发人员们推广到了普通的用户群体。
基于 webkit 内核的 Safari，借助自家产品（iOS、MacOS）的垄断快速收割移动端和 mac 端市场份额；同样基于 webkit 内核的 Chrome，趁着微软放松警惕，凭借优越于市场上所有浏览器的性能，如同中国历史上的成吉思汗一样大杀四方，快速扩展市场份额。
微软知道，自己已经失去了最初能称霸的机会，这次它不想失去，IE 再次开始迭代，各大浏览器厂商又开始不顾标准，迭代再次开始，为了统一化标准，W3C 开发了 HTML5 ，但是迟迟得不到微软的认可。在其他浏览器纷纷支持 HTML5 后，微软发现，自己又成了孤家寡人，份额不断缩水。
2016 年，Chrome 浏览器份额超越 IE，第二次浏览器大战结束。
浏览器大战极大的推动了技术进步，正是 Google 研发出的 V8 引擎极大的提升了 JS 的运行效率，NodeJS 才有机会诞生，前端才能走向全栈。 JS 其实没有你想象的那么慢。
2. SPA
2008 年 HTML5 草案提出，各大浏览器开启良性竞争，争先实现 HTML5 功能。由于 HTML5 带来前端 代码复杂度的增加，前端为了寻求良好的可维护性和可复用性，也不得不参考后端 MVC 进行了设计和拆分，后来出现了三大前端框架：Vue（2014）、React（2010）、AngularJS（2009）。
单页应用返回一个空白的 HTML，并通过 JS 脚本进行动态生成内容，从此和页面刷新说拜拜。
后端不再负责模板渲染，前端和 APP 开始对等，后端的 API 也可以通用化了。前后端终于得以分离。（PS: 最终目标是成为后端）
但 SPA 因为返回的是空 HTML，所有 JS 也被打包为一个文件，需要在一开始就加载完所有的资源，
请求网页后白屏时间比传统网页要长
爬虫爬到的是空白页面，没办法做 SEO
在业务复杂的情况下，请求文件很大，渲染非常慢。
请求网页后白屏时间比传统网页要长
爬虫爬到的是空白页面，没办法做 SEO
在业务复杂的情况下，请求文件很大，渲染非常慢。
这使得前端不得不拆分过于庞大的单页应用，出现了框架的多页面概念，也出现了多种解决方案。
很多网页首次加载的时候其实并不需要太多的东西，比如论坛首页与贴子详情页，完全可以将其拆开，用户在新打开的页面阅读反而体验更好（ 多页应用）。
又比如管理后台，可以在页面框架内，将每个菜单对应的管理页拆出来动态加载（import）。
七、当代 Web 技术1. Server Side Render
Server Side Render，服务端渲染，简称 SSR，又称服务端同构、直出，一般使用 NodeJS 实现。
这里的服务端渲染和以前的不一样，SSR 会利用已经“脱水”的首屏数据来渲染首屏页面返回给客户端，到了浏览器再注入浏览器事件，并且保留单页应用的能力，对 SEO 非常友好。但学习成本高，限制较多。
让我们看看传统SPA和加入了 SSR 的 SPA 在请求上的区别：
客户端渲染示意图
服务端渲染示意图
传统 SPA 可以更快的返回页面，请求响应时间更短；加载 JS 后才开始渲染，白屏时间更长，loading 结束后用户感知到的相对可交互时间更早。
而 SSR 在接到浏览器请求时，先从后端拉取首屏数据渲染在页面内才返回，请求响应时间更长；因为节约了一段浏览器请求首屏数据的时间，白屏时间更短。由于 JS 异步加载，用户感知的相对可交互时间变晚。但体验上 SSR 一般更好。
在极端情况下，用户眼中传统 SPA 会一直显示 loading，使用了 SSR 的页面则会出现“点不动”的情况。
大多数时候 SSR 体验会更佳，因为服务端承担了大部分渲染工作，这也导致服务端负载变高。但在业务复杂的情况下，SSR 首屏请求的接口数很多，导致返回 HTML 变慢。
归根结底，SSR 不能很好的应付业务复杂的情况， 首屏要加载的东西还是太多了。所以我们要怎样让用户感知到的白屏时间变短呢？
减小加载体积
减少接口请求数
PWA缓存
分块渲染
减小加载体积
减少接口请求数
PWA缓存
分块渲染
IMWEB 的企鹅辅导落地了 SSR + PWA 之后，达到了几乎秒开的程度。
2. NodeJS
说完了 SSR，必须说一下 NodeJS。2010年 NodeJS 正式立项到现在已经 11 个年头了，NodeJS 的诞生来自于 Ryan Dahl（下图） 的灵感。他想以 非阻塞的方式做所有事情，用完全异步方式可以处理非常多的请求（高并发）。
NodeJS 的出现让前端向全栈的发展迈出了重大的一步。很多公司开始用 NodeJS 搞 BFF（backend for frontend），我们也开始把 Controller 层放到 NodeJS 来处理，后端只负责基础业务数据。也就是现在的三层架构：
这种架构在跨端的时候具有良好的适配性，我们可以根据业务需求，为不同端设计不同的 Controller 和 View，而后台可以不做变更。这种架构省去了很多沟通成本，前端专注页面的展示，后端专注业务逻辑。
当然，NodeJS 还可以对后端数据进行预处理，前端根据自己的需要自己设计数据结构， 页面开发与接口调试形成闭环，还为后端分担了压力。
｜ 扩展资料：第三次浏览器大战
智能手机的飞速发展，这张图表现的淋漓尽致。第三次浏览器大战是争夺移动端市场份额的一战，也是当下正在进行的一战。
而未来，浏览器真正的对手不再是浏览器，而是小程序这样结合了 APP 和网页优点的新兴技术。
八、未来
早在 2009 年，Facebook 的工程师就开发了 bigPipe，让 Facebook 页面打开速度提高了两倍。bigPipe 使用 分块渲染的思想，将网页的渲染变成了一小块一小块的，服务端渲染好一块页面就发送给客户端。他们直接把木桶拆了，打破了短板效应。
服务端渲染 VS 流式分块渲染
时隔 11 年，也就是 2020 年 12 月，React 团队提出了 React Server Components，算是一个可扩展的前后端融合方案。其理念和 bigPipe 类似，把组件放在服务端渲染，节省了从浏览器进行数据请求的开支，一些运行时也可以不用放到浏览器，减小了包大小（如 markdown 在服务端渲染好了，也就不再需要把工具库发送给浏览器了）。React Server Components 的引入，也同步做到了自动的 Code Split。
React Server Components 原理
不同的是 React Server Components 返回的不是 HTML，而是带有结构和数据的自定义类 JSON 数据。
这种结构，是对服务端渲染的核心（结构+数据）进行抽象，结合 React 的工作方式（如Suspense），平缓的从服务端过渡到了客户端，维持了组件状态，并且可以更自由的拼装服务器组件和客户端组件。
客户端组件和服务端组件混用
关于拆分这条思路，让我想到微前端，虽然现在微前端还有很多问题，但微应用即服务也不乏为一条解决之道。未来前端或许会往“小而美”的方向发展，甚至形成一个以服务端组件为单位的包管理器，网页打包大小会越来越小，更多的组件是从网络上直接获取。
此外，我也很期待 Web Components 的发展，有了原生的支持，0kb runtime 也不是不可能了。合久必分分久必合，现存很多前端框架也可以得到统一了。当然现在 Web Components 想要投入使用，首先离不开浏览器的支持，而且必须有一个平缓的过渡，此外兼容性也是一个大问题（最后还是苦了程序员们）。
九、结语
从 Java 的诞生一路走来，从“发现问题-解决问题”的角度，我们看到了技术发展的原因和必然性。2021年的今天，Web APP 仍然距离原生 APP 体验有一定的差距。或许以后会出现一个小程序桌面APP，小程序能够得到统一；或许会在 PWA 的道路上越走越远；又或者浏览器开放更多原生系统 API，利用各种加载方式，再模拟 APP 的各种体验，达到近似 APP 的效果。
每个时代都诞生了许多的技术，大浪淘沙，留下的却也只是只存在于这个时代的王者。技术总是不断的更迭，重要的不是慌慌张张的追赶技术的脚步，而是去思考技术为什么这么如此演变，思考这样的演变方式的利与弊。如果是你，又会怎么解决当代技术的问题呢？
紧追技术前沿，深挖专业领域 返回搜狐，查看更多
网页设计发展历史6 第11篇
设计网页布局总会花费大量的时间，好在这个时候我们开始抛弃复杂的光影效果，重新专注于根本的内容呈现。在此之前，网页设计讲求精美的图片和排版效果，漂亮的插画与周到的布局设计，而简化这些视觉元素之后，就是我们说所的“扁平化设计”。将复杂的效果淡化之后，视觉的扁平化，也促使内容和信息层级的扁平化。充满光影特效的按钮被扁平化的图标所替代，矢量图形和图标字体也开始被大范围使用，网页字体和版式设计的结合令网页视觉更加漂亮。有趣的是，这时候的网页设计开始有返璞归真的感觉。