目錄
回复内容:
首頁 web前端 H5教程 Web 前端的未来会怎样?

Web 前端的未来会怎样?

Jun 07, 2016 am 08:43 AM
css flash html javascript w3c

作为一个业余爱好者,我已经对 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 只会消失的更快。

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

而在新技术上,像
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1319
25
PHP教程
1269
29
C# 教程
1248
24
vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

React在HTML中的作用:增強用戶體驗 React在HTML中的作用:增強用戶體驗 Apr 09, 2025 am 12:11 AM

React通過JSX與HTML結合,提升用戶體驗。 1)JSX嵌入HTML,使開發更直觀。 2)虛擬DOM機制優化性能,減少DOM操作。 3)組件化管理UI,提高可維護性。 4)狀態管理和事件處理增強交互性。

bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-

See all articles