Web 前端的未来会怎样？
程序员文章站
2022-03-16 09:38:01
...
作为一个业余爱好者，我已经对 Web 前端充满了消极情绪，各种深坑如下：
曾经非常喜欢 Flash，因为她在各个平台都能一致的表达，各种布局随心所欲，执行动画效率很高，音频、视频、甚至3D都能很好的操控，你完全不用担心各种兼容问题。
想问问各位大神：现在最尖端的前端技术有哪些方向，有没有出现一种让我们舒心一点的技术？未来浏览器的发展会不会填平兼容性的鸿沟？
1,2是说兼容问题。我个人把兼容问题细分为简单的兼容问题和复杂的兼容问题。
简单的兼容问题是可以通过写法上去避免的。通常来讲，一个中级工程师写出来的代码基本是兼容全平台的，测兼容性也是做些细微的调整。
举几个简单兼容性的例子：
要制作三角形,有好几种方法，最简单的一种无疑是用::before和::after伪对象去做。但低版本IE是不支持伪对象的。
这个时候可以用附加DOM的方式、用特殊字符◆，最不济也能切图搞定，这些都是兼容写法。
再一个例子是题主3提到的垂直居中的问题。
下图是现有的一些解决垂直居中的方法和兼容性表。
我个人最喜欢、最常用Absolute Centering和inline-block的方式。从图可以看出Absolute Centering
不是全兼容的，这时我会结合负Margin去写几句IE7的兼容代码，至于IE6嘛，在某度实习的时候还要求兼容，之后就再没兼容过了。
可以看出，垂直居中的问题绝不是一个蛋疼的问题，都是有全兼容的解决方案的。
再谈一下复杂的兼容问题，何谓复杂呢，我个人的定义是IE低版本根本不支持，去做兼容会附加大量的代码甚至没有兼容写法。
比方说CSS3的三个动画属性transition、transform、animation，是可以通过JS去写全平台的兼容性的，不过复杂度不是一星半点，是要写大量兼容代码的。
再如HTML5的XMLHttpRequest新标准，提供了FormData让JS去模拟表单操作，而且FormData可以异步传输二进制,低版本的兼容性常用的做法是iframe或者flash。再加一个前端预览或者进度上传反馈的需求，iframe的方法就满足不了了。flash的方法有一些成型的组件可以用，不过不适合深度定制，深度定制相比HTML5的一些写法又复杂很多。
以上两个就是复杂兼容问题的例子。
基本上，能搞定所有简单的兼容性问题就能满足现有工程中的绝大部分开发需求了。复杂的效果自己尝鲜试水的多，工程中用的少。
再看第三条，题主称之为蛋疼的布局问题。
布局这种问题，于前端来讲，当是寻常之事了。里面提到的多列等高可以通过上面垂直居中的Absolute Centering来变化一下解决，垂直居中已经讲过，水平居中行内块轻松搞定，多列等宽浮动和行内块都可以解决。
非要把有清晰解决思路的问题称之为蛋疼的问题，只能说还涉足不深，有待继续磨砺。
至于分离和效率，姑且等搞定兼容性再说吧。
浏览器只是一个宿主环境，JS也只是ES的一个实例子集。 @Chris 也提到了很多其他平台的开发。像node-webkit打包前后端去提供跨平台的解决方案、APP调用WebView都是前端在向其他平台渗透的尝试。
JS商业化过早，各种前端标准也因浏览器厂商为了各自的利益而四分五裂。导致整个行业糟粕与精华并存，也导致了廉价和高手稀缺的前端行业。如今，JS也早过了复制粘贴特效的原始社会，各种前端标准也在逐渐走向规范。
此刻，正当迎来光明的关头，题主却说这之前的她让你充满了消极情绪，那，定是爱的还不够深。 兼容性问题：很多项目根本不需要考虑ie的。如果是做手机网页，所有新的api都能用。
css不好用：其实布局，居中的问题，用flexbox很容易就解决了。
动画效率：DOM的那套机制确实是慢，牵一发动全身。用css3动画的话，是有gpu加速的，不存在不流畅的问题，有点限制罢了。移动设备支持css3动画，不支持flash，你说谁更省资源，效率更高？
看出来楼主是很喜欢交互，没事做些炫酷网页效果的人。其实现有的css3，canvas能做出来很厉害的东西了。没事多来这里看看：CodePen - Front End Developer Playground & Code Editor in the Browser 不爽浏览器兼容性？行，Node.js 搞起。Web 后端、node-webkit desktop 应用、WebView 开发，都不用搞兼容性——看准一个平台写代码就成。
什么？这不是前端？好吧，该好好规划自己的职业生涯和想做的事，你看，国外那么多 Chrome、Firefox 的 web app，你也可以找做一个针对国外市场的，只要不是设计的太差，赚点小钱没问题。再进一步，做个库、框架什么的，混个研发类的活也不错。
还是不爽？那……转行吧。
Joking.
前端技术因为 Chrome 的出现，开始加速发展，IE 也*加快脚步，再因为移动平台的需求，发展就又更快了（听腻了吧？），W3C 跟不上是正常的，但这只是阵痛，大量优秀的特性开始加入 ES、CSS、HTML，低版本 IE 的份额也进一步被压缩，在国外，IE8 份额本身并不是很有优势，再加上下一代 Windows 可能会有免费版本的传闻，在内置的光环下，IE8、9 只会消失的更快。
兼容性，很快就不成问题。
而在新技术上，像 、Gulp、Browserify 都是相当有趣的技术，HTML5 Gaming，还有那些探求 CSS Animation 极限的玩意，前端还是很好玩的。
补充：虽然我很不喜欢 360 浏览器，但有一点它做的很对，值得为 360 团队鼓掌的，那就是他们在 2013 年 12 月份提供了 `` 标签，以供网站强制使用 WebKit 来渲染页面，如果有更多的浏览器厂商支持这个标签，真不用再担心 IE8- 了。 兼容 规范 本来就是技术的一部分啊 作为一个开发人员，虽然去年毕业。但是已经做过四个项目。从事java开发，包括后台和前端我都做。未来的发展趋势是js肯定会大放光彩，无论是手机还是pc端。页面的设计很重要，这是美工的事，我们负责将他们的设计用html,css呈现出来，这些都不难。好的效果总是能抓住人的眼熟。js就能做到。虽然现在html5还用的不多。很多浏览器不支持，但是很便捷，我想这是趋势。所以WEB前端是有前景的。 这是一个古老的故事……在几千年前……兼容性就存在了……只是那时候……还没有被人们发觉……后来ie问世了 -。- chrome问世了…… 人们就渐渐的发现了 兼容性 的存在。在战争白热化的时候，一个神秘的魔法一族出现了，他们企图坚信可以消灭万恶的 兼容性，并提出了标准化……这就是被世人歌颂为 w3c 一族..但是ie却不妥协,坚持的自己的邪恶并衍生后代继续着与兼容性的斗争，随之而来
ie6,7,8诞生了，公元前187年，ie8与chrome进行了一场殊死搏斗.. 在争夺js解析速度的战争中，chrome胜利了，从此ie家族意识到了自己的软弱，随后，和w3c握手言和，ie9,ie10,ie11都将逐渐遵循 标准化 做为一个从实习开始就做前端的程序员，我很想好好的回答下这个问题。
首先，Web最初和现在来说，最大的用途与优势还是在展示数据、文章、一些简单表单、简单界面排版等等。简而言之，就是内容为主的应用，就好比门户网站或者知乎这种，就十分适合用Web前端技术来实现界面。但是Web的未来，却不仅仅局限于此，关于未来，在最后有我自己的看法。
你吐槽的各种蛋疼兼容性问题在IE6独占天下的时候是不存在的。那时候的Web前端也是很美好的。
然而，之后的发展越来越出乎大家的意料。
首先，是硬件性能和网速的提升。提升到了可以输入一个网址就打开一个应用，无需等待太长时间，而且硬件性能跟得上，试问在这种情况下，为什么还要用客户端呢？而且web有着随时更新的巨大优势。
所以之后的发展就是，那些以前用客户端实现的软件，大家都会用web前端技术来实现。
但是，浏览器并没有提供那么多接口啊，这时，浏览器的制造商就起来了。W3C也忙着制定规范。
这也就是几年前的事，所以就有了现在的局面。W3C天天搞标准，浏览器老更新，各自搞些自己的私有特性等。
以上回答了你的 1和2 这两个疑问
-------------------------------------------------------------- 分割线 -------------------------------------------------------------
3和4的问题你主要吐槽了CSS布局和 HTML-CSS-JS 分离方面。
首先，我的观点是，这是整个前端技术里面设计最好的地方了。
CSS布局真的不复杂，而且以后会越来越简单，至少和用程序语言写界面比起来，简单太多了。
至于 HTML-CSS-JS 分离 ，你可以认为是简单的代码解耦， 各部分代码各司其职。而CSS动画JS动画这点上来讲，动画应该是属于CSS部分的，只是CSS还在发展中，所以借助JS实现了一些动画效果，我相信以后肯定会越来越少，JS也将更侧重逻辑方面而不是表现方面。
至于动画的执行效率，视频音频方面，还是那句话，这才刚刚发展，要有耐心，现在确实是坑。
-------------------------------------------------------------- 分割线 -------------------------------------------------------------
你还对比了现在前端技术和Flash技术。
我的观点是，目前来讲Flash在游戏，动画等领域完爆现在HTML5吧。可是，Flash是Adobe的，HTML5是大家的。如果Flash能行，那别的厂商能做更多的这种东西出来（SilverLight），而且长远来看，HTML5也能做到Flash的地步。
然后题主还问了最尖端前端技术是什么，这个应该是无解的吧。
然后关于未来浏览器的兼容，我觉得应该是会有兼容的问题，但的没现在这么严重，应该是W3C的标准大家都满足，但是又都有一点自己的私有功能。
最后，关于前端技术的未来，我觉得随着浏览器的越来越先进，网速的越来越给力，Web前端会统治所有软件产品的前台展示部分。所以是非常有前途的。 Web 现在已经在 JavaScript 的路上迷失渐远了，疯狂的使用 js 构造使得前端越来越重，越来越复杂。传统的 b/s 架构一个劲地在往 c/s 的领地靠拢，数据绑定与各种预设控件仿佛回到过去 VB6.0 时代。未来的发展可能是浏览器开发效率越来越低下，更多的原生应用出现，基于 Client/Remote API 的模式大放异彩。手机端基本已经开始了，桌面端可能还得需要一些知名公司带动下技术潮流。 孔子说，每18个月，前端技术的难度就会增加一倍 未来web前端上，html5等也许真会大放异彩，不过这不代表flash就要挂了，两者之间不过是有些功能重合了而已。再说flash现在所涉及的领域已经不是只有web前端而已。
这也不是第一次吵闹flash要死这种论调，每次出点新技术就这么嚷嚷，都这么多年了，还不是活的好好的，最差的情况也就是flash成为一种常规可选技术方案~~
- 不同浏览器之间的差异与兼容。
- 相同浏览器新旧版本之间的差异与兼容。
- 蛋疼的布局问题：水平居中、垂直居中、多列等高、多列等宽、浮动等等。
- html内容数据、CSS渲染、JS脚本之间的清晰分离（CSS动画与JS动画）。
- 动画执行效率、视频、音频操纵等
曾经非常喜欢 Flash，因为她在各个平台都能一致的表达，各种布局随心所欲，执行动画效率很高，音频、视频、甚至3D都能很好的操控，你完全不用担心各种兼容问题。
想问问各位大神：现在最尖端的前端技术有哪些方向，有没有出现一种让我们舒心一点的技术？未来浏览器的发展会不会填平兼容性的鸿沟？
回复内容：
分析下楼主提出的五个深坑。1,2是说兼容问题。我个人把兼容问题细分为简单的兼容问题和复杂的兼容问题。
简单的兼容问题是可以通过写法上去避免的。通常来讲，一个中级工程师写出来的代码基本是兼容全平台的，测兼容性也是做些细微的调整。
举几个简单兼容性的例子：
要制作三角形,有好几种方法，最简单的一种无疑是用::before和::after伪对象去做。但低版本IE是不支持伪对象的。这个时候可以用附加DOM的方式、用特殊字符◆，最不济也能切图搞定，这些都是兼容写法。
再一个例子是题主3提到的垂直居中的问题。
下图是现有的一些解决垂直居中的方法和兼容性表。
我个人最喜欢、最常用Absolute Centering和inline-block的方式。从图可以看出Absolute Centering不是全兼容的，这时我会结合负Margin去写几句IE7的兼容代码，至于IE6嘛，在某度实习的时候还要求兼容，之后就再没兼容过了。
可以看出，垂直居中的问题绝不是一个蛋疼的问题，都是有全兼容的解决方案的。
再谈一下复杂的兼容问题，何谓复杂呢，我个人的定义是IE低版本根本不支持，去做兼容会附加大量的代码甚至没有兼容写法。
比方说CSS3的三个动画属性transition、transform、animation，是可以通过JS去写全平台的兼容性的，不过复杂度不是一星半点，是要写大量兼容代码的。
再如HTML5的XMLHttpRequest新标准，提供了FormData让JS去模拟表单操作，而且FormData可以异步传输二进制,低版本的兼容性常用的做法是iframe或者flash。再加一个前端预览或者进度上传反馈的需求，iframe的方法就满足不了了。flash的方法有一些成型的组件可以用，不过不适合深度定制，深度定制相比HTML5的一些写法又复杂很多。
以上两个就是复杂兼容问题的例子。
基本上，能搞定所有简单的兼容性问题就能满足现有工程中的绝大部分开发需求了。复杂的效果自己尝鲜试水的多，工程中用的少。
再看第三条，题主称之为蛋疼的布局问题。
布局这种问题，于前端来讲，当是寻常之事了。里面提到的多列等高可以通过上面垂直居中的Absolute Centering来变化一下解决，垂直居中已经讲过，水平居中行内块轻松搞定，多列等宽浮动和行内块都可以解决。
非要把有清晰解决思路的问题称之为蛋疼的问题，只能说还涉足不深，有待继续磨砺。
至于分离和效率，姑且等搞定兼容性再说吧。
浏览器只是一个宿主环境，JS也只是ES的一个实例子集。 @Chris 也提到了很多其他平台的开发。像node-webkit打包前后端去提供跨平台的解决方案、APP调用WebView都是前端在向其他平台渗透的尝试。
JS商业化过早，各种前端标准也因浏览器厂商为了各自的利益而四分五裂。导致整个行业糟粕与精华并存，也导致了廉价和高手稀缺的前端行业。如今，JS也早过了复制粘贴特效的原始社会，各种前端标准也在逐渐走向规范。
此刻，正当迎来光明的关头，题主却说这之前的她让你充满了消极情绪，那，定是爱的还不够深。 兼容性问题：很多项目根本不需要考虑ie的。如果是做手机网页，所有新的api都能用。
css不好用：其实布局，居中的问题，用flexbox很容易就解决了。
动画效率：DOM的那套机制确实是慢，牵一发动全身。用css3动画的话，是有gpu加速的，不存在不流畅的问题，有点限制罢了。移动设备支持css3动画，不支持flash，你说谁更省资源，效率更高？
看出来楼主是很喜欢交互，没事做些炫酷网页效果的人。其实现有的css3，canvas能做出来很厉害的东西了。没事多来这里看看：CodePen - Front End Developer Playground & Code Editor in the Browser 不爽浏览器兼容性？行，Node.js 搞起。Web 后端、node-webkit desktop 应用、WebView 开发，都不用搞兼容性——看准一个平台写代码就成。
什么？这不是前端？好吧，该好好规划自己的职业生涯和想做的事，你看，国外那么多 Chrome、Firefox 的 web app，你也可以找做一个针对国外市场的，只要不是设计的太差，赚点小钱没问题。再进一步，做个库、框架什么的，混个研发类的活也不错。
还是不爽？那……转行吧。
Joking.
前端技术因为 Chrome 的出现，开始加速发展，IE 也*加快脚步，再因为移动平台的需求，发展就又更快了（听腻了吧？），W3C 跟不上是正常的，但这只是阵痛，大量优秀的特性开始加入 ES、CSS、HTML，低版本 IE 的份额也进一步被压缩，在国外，IE8 份额本身并不是很有优势，再加上下一代 Windows 可能会有免费版本的传闻，在内置的光环下，IE8、9 只会消失的更快。
兼容性，很快就不成问题。
而在新技术上，像 、Gulp、Browserify 都是相当有趣的技术，HTML5 Gaming，还有那些探求 CSS Animation 极限的玩意，前端还是很好玩的。
补充：虽然我很不喜欢 360 浏览器，但有一点它做的很对，值得为 360 团队鼓掌的，那就是他们在 2013 年 12 月份提供了 `` 标签，以供网站强制使用 WebKit 来渲染页面，如果有更多的浏览器厂商支持这个标签，真不用再担心 IE8- 了。 兼容 规范 本来就是技术的一部分啊 作为一个开发人员，虽然去年毕业。但是已经做过四个项目。从事java开发，包括后台和前端我都做。未来的发展趋势是js肯定会大放光彩，无论是手机还是pc端。页面的设计很重要，这是美工的事，我们负责将他们的设计用html,css呈现出来，这些都不难。好的效果总是能抓住人的眼熟。js就能做到。虽然现在html5还用的不多。很多浏览器不支持，但是很便捷，我想这是趋势。所以WEB前端是有前景的。 这是一个古老的故事……在几千年前……兼容性就存在了……只是那时候……还没有被人们发觉……后来ie问世了 -。- chrome问世了…… 人们就渐渐的发现了 兼容性 的存在。在战争白热化的时候，一个神秘的魔法一族出现了，他们企图坚信可以消灭万恶的 兼容性，并提出了标准化……这就是被世人歌颂为 w3c 一族..但是ie却不妥协,坚持的自己的邪恶并衍生后代继续着与兼容性的斗争，随之而来
ie6,7,8诞生了，公元前187年，ie8与chrome进行了一场殊死搏斗.. 在争夺js解析速度的战争中，chrome胜利了，从此ie家族意识到了自己的软弱，随后，和w3c握手言和，ie9,ie10,ie11都将逐渐遵循 标准化 做为一个从实习开始就做前端的程序员，我很想好好的回答下这个问题。
首先，Web最初和现在来说，最大的用途与优势还是在展示数据、文章、一些简单表单、简单界面排版等等。简而言之，就是内容为主的应用，就好比门户网站或者知乎这种，就十分适合用Web前端技术来实现界面。但是Web的未来，却不仅仅局限于此，关于未来，在最后有我自己的看法。
你吐槽的各种蛋疼兼容性问题在IE6独占天下的时候是不存在的。那时候的Web前端也是很美好的。
然而，之后的发展越来越出乎大家的意料。
首先，是硬件性能和网速的提升。提升到了可以输入一个网址就打开一个应用，无需等待太长时间，而且硬件性能跟得上，试问在这种情况下，为什么还要用客户端呢？而且web有着随时更新的巨大优势。
所以之后的发展就是，那些以前用客户端实现的软件，大家都会用web前端技术来实现。
但是，浏览器并没有提供那么多接口啊，这时，浏览器的制造商就起来了。W3C也忙着制定规范。
这也就是几年前的事，所以就有了现在的局面。W3C天天搞标准，浏览器老更新，各自搞些自己的私有特性等。
以上回答了你的 1和2 这两个疑问
-------------------------------------------------------------- 分割线 -------------------------------------------------------------
3和4的问题你主要吐槽了CSS布局和 HTML-CSS-JS 分离方面。
首先，我的观点是，这是整个前端技术里面设计最好的地方了。
CSS布局真的不复杂，而且以后会越来越简单，至少和用程序语言写界面比起来，简单太多了。
至于 HTML-CSS-JS 分离 ，你可以认为是简单的代码解耦， 各部分代码各司其职。而CSS动画JS动画这点上来讲，动画应该是属于CSS部分的，只是CSS还在发展中，所以借助JS实现了一些动画效果，我相信以后肯定会越来越少，JS也将更侧重逻辑方面而不是表现方面。
至于动画的执行效率，视频音频方面，还是那句话，这才刚刚发展，要有耐心，现在确实是坑。
-------------------------------------------------------------- 分割线 -------------------------------------------------------------
你还对比了现在前端技术和Flash技术。
我的观点是，目前来讲Flash在游戏，动画等领域完爆现在HTML5吧。可是，Flash是Adobe的，HTML5是大家的。如果Flash能行，那别的厂商能做更多的这种东西出来（SilverLight），而且长远来看，HTML5也能做到Flash的地步。
然后题主还问了最尖端前端技术是什么，这个应该是无解的吧。
然后关于未来浏览器的兼容，我觉得应该是会有兼容的问题，但的没现在这么严重，应该是W3C的标准大家都满足，但是又都有一点自己的私有功能。
最后，关于前端技术的未来，我觉得随着浏览器的越来越先进，网速的越来越给力，Web前端会统治所有软件产品的前台展示部分。所以是非常有前途的。 Web 现在已经在 JavaScript 的路上迷失渐远了，疯狂的使用 js 构造使得前端越来越重，越来越复杂。传统的 b/s 架构一个劲地在往 c/s 的领地靠拢，数据绑定与各种预设控件仿佛回到过去 VB6.0 时代。未来的发展可能是浏览器开发效率越来越低下，更多的原生应用出现，基于 Client/Remote API 的模式大放异彩。手机端基本已经开始了，桌面端可能还得需要一些知名公司带动下技术潮流。 孔子说，每18个月，前端技术的难度就会增加一倍 未来web前端上，html5等也许真会大放异彩，不过这不代表flash就要挂了，两者之间不过是有些功能重合了而已。再说flash现在所涉及的领域已经不是只有web前端而已。
这也不是第一次吵闹flash要死这种论调，每次出点新技术就这么嚷嚷，都这么多年了，还不是活的好好的，最差的情况也就是flash成为一种常规可选技术方案~~