Web 前端的未來會怎樣？

01-18

作為一個業餘愛好者，我已經對 Web 前端充滿了消極情緒，各種深坑如下：

不同瀏覽器之間的差異與兼容。

相同瀏覽器新舊版本之間的差異與兼容。

蛋疼的布局問題：水平居中、垂直居中、多列等高、多列等寬、浮動等等。

html內容數據、CSS渲染、JS腳本之間的清晰分離（CSS動畫與JS動畫）。

動畫執行效率、視頻、音頻操縱等

弱弱的問一句：W3C等標準化組織鼓搗了N年，到現在 HTML5+CSS3+JavaScript 真的能滿足我們的需求么？真的是想給前端工作一些方便還是打算把她玩壞呢？特別是 CSS 各種屬性一大堆，其實完全不好用，不好用，不好用！！！！！
曾經非常喜歡 Flash，因為她在各個平台都能一致的表達，各種布局隨心所欲，執行動畫效率很高，音頻、視頻、甚至3D都能很好的操控，你完全不用擔心各種兼容問題。

想問問各位大神：現在最尖端的前端技術有哪些方向，有沒有出現一種讓我們舒心一點的技術？未來瀏覽器的發展會不會填平兼容性的鴻溝？

不爽瀏覽器兼容性？行，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- 了。

分析下樓主提出的五個深坑。

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問世了 -。- chrome問世了…… 人們就漸漸的發現了兼容性的存在。在戰爭白熱化的時候，一個神秘的魔法一族出現了，他們企圖堅信可以消滅萬惡的兼容性，並提出了標準化……這就是被世人歌頌為 w3c 一族..但是ie卻不妥協,堅持的自己的邪惡並衍生後代繼續著與兼容性的鬥爭，隨之而來

ie6,7,8誕生了，公元前187年，ie8與chrome進行了一場殊死搏鬥.. 在爭奪js解析速度的戰爭中，chrome勝利了，從此ie家族意識到了自己的軟弱，隨後，和w3c握手言和，ie9,ie10,ie11都將逐漸遵循標準化

兼容性問題：很多項目根本不需要考慮ie的。如果是做手機網頁，所有新的api都能用。

css不好用：其實布局，居中的問題，用flexbox很容易就解決了。

動畫效率：DOM的那套機制確實是慢，牽一髮動全身。用css3動畫的話，是有gpu加速的，不存在不流暢的問題，有點限制罷了。移動設備支持css3動畫，不支持flash，你說誰更省資源，效率更高？

看出來樓主是很喜歡交互，沒事做些炫酷網頁效果的人。其實現有的css3，canvas能做出來很厲害的東西了。沒事多來這裡看看：CodePen - Front End Developer Playground Code Editor in the Browser

漫漫人生，不開心的事總有那麼幾天，不可能為了這幾天不爽的事痛苦或者懷疑人生一輩子。

前端也一樣，兼容問題在前端知識體系里佔地位置太微不足道了，而且會越來越不重要。別太糾結這些小細節，繼續往前看吧

孔子說，每18個月，前端技術的難度就會增加一倍

做為一個從實習開始就做前端的程序員，我很想好好的回答下這個問題。

首先，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前端會統治所有軟體產品的前台展示部分。所以是非常有前途的。

兼容規範本來就是技術的一部分啊

作為一個開發人員，雖然去年畢業。但是已經做過四個項目。從事java開發，包括後台和前端我都做。未來的發展趨勢是js肯定會大放光彩，無論是手機還是pc端。頁面的設計很重要，這是美工的事，我們負責將他們的設計用html,css呈現出來，這些都不難。好的效果總是能抓住人的眼熟。js就能做到。雖然現在html5還用的不多。很多瀏覽器不支持，但是很便捷，我想這是趨勢。所以WEB前端是有前景的。

未來web前端上，html5等也許真會大放異彩，不過這不代表flash就要掛了，兩者之間不過是有些功能重合了而已。再說flash現在所涉及的領域已經不是只有web前端而已。

這也不是第一次吵鬧flash要死這種論調，每次出點新技術就這麼嚷嚷，都這麼多年了，還不是活的好好的，最差的情況也就是flash成為一種常規可選技術方案~~

既然，瀏覽器上你寫得不爽，那就去寫Node 吧。

Web 現在已經在 JavaScript 的路上迷失漸遠了，瘋狂的使用 js 構造使得前端越來越重，越來越複雜。傳統的 b/s 架構一個勁地在往 c/s 的領地靠攏，數據綁定與各種預設控制項彷彿回到過去 VB6.0 時代。未來的發展可能是瀏覽器開發效率越來越低下，更多的原生應用出現，基於 Client/Remote API 的模式大放異彩。手機端基本已經開始了，桌面端可能還得需要一些知名公司帶動下技術潮流。

只是學習了簡單的web操作，如今想找高手指教，有web經驗豐富的大神，沒事請你喝茶聊天的。想要交朋友的私聊。