Home > Web Front-end > H5 Tutorial > body text

Web 前端的未来会怎样?

WBOY
Release: 2016-06-07 08:43:19
Original
1357 people have browsed it

作为一个业余爱好者,我已经对 Web 前端充满了消极情绪,各种深坑如下:

  1. 不同浏览器之间的差异与兼容。
  2. 相同浏览器新旧版本之间的差异与兼容。
  3. 蛋疼的布局问题:水平居中、垂直居中、多列等高、多列等宽、浮动等等。
  4. html内容数据、CSS渲染、JS脚本之间的清晰分离(CSS动画与JS动画)。
  5. 动画执行效率、视频、音频操纵等
弱弱的问一句:W3C等标准化组织鼓捣了N年,到现在 HTML5+CSS3+JavaScript 真的能满足我们的需求么?真的是想给前端工作一些方便还是打算把她玩坏呢?特别是 CSS 各种属性一大堆,其实完全不好用,不好用,不好用!!!!!

曾经非常喜欢 Flash,因为她在各个平台都能一致的表达,各种布局随心所欲,执行动画效率很高,音频、视频、甚至3D都能很好的操控,你完全不用担心各种兼容问题。

想问问各位大神:现在最尖端的前端技术有哪些方向,有没有出现一种让我们舒心一点的技术?未来浏览器的发展会不会填平兼容性的鸿沟?

回复内容:

分析下楼主提出的五个深坑。
1,2是说兼容问题。我个人把兼容问题细分为简单的兼容问题和复杂的兼容问题。
简单的兼容问题是可以通过写法上去避免的。通常来讲,一个中级工程师写出来的代码基本是兼容全平台的,测兼容性也是做些细微的调整。

举几个简单兼容性的例子:
Web 前端的未来会怎样?要制作三角形,有好几种方法,最简单的一种无疑是用::before和::after伪对象去做。但低版本IE是不支持伪对象的。
这个时候可以用附加DOM的方式、用特殊字符◆,最不济也能切图搞定,这些都是兼容写法。

再一个例子是题主3提到的垂直居中的问题。
下图是现有的一些解决垂直居中的方法和兼容性表。
Web 前端的未来会怎样?我个人最喜欢、最常用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 只会消失的更快。

兼容性,很快就不成问题。

而在新技术上,像
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!