Jadual Kandungan
回复内容:
Rumah hujung hadapan web Tutorial 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 只会消失的更快。

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

而在新技术上,像
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menggunakan butang bootstrap Cara menggunakan butang bootstrap Apr 07, 2025 pm 03:09 PM

Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang

Cara mengubah saiz bootstrap Cara mengubah saiz bootstrap Apr 07, 2025 pm 03:18 PM

Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-

Cara Menulis Garis Pecah Di Bootstrap Cara Menulis Garis Pecah Di Bootstrap Apr 07, 2025 pm 03:12 PM

Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.

Cara Menyiapkan Kerangka untuk Bootstrap Cara Menyiapkan Kerangka untuk Bootstrap Apr 07, 2025 pm 03:27 PM

Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.

Cara melihat tarikh bootstrap Cara melihat tarikh bootstrap Apr 07, 2025 pm 03:03 PM

Jawapan: Anda boleh menggunakan komponen pemetik tarikh bootstrap untuk melihat tarikh di halaman. Langkah -langkah: Memperkenalkan rangka kerja bootstrap. Buat kotak input pemilih Tarikh dalam HTML. Bootstrap secara automatik akan menambah gaya kepada pemilih. Gunakan JavaScript untuk mendapatkan tarikh yang dipilih.

Cara memasukkan gambar di bootstrap Cara memasukkan gambar di bootstrap Apr 07, 2025 pm 03:30 PM

Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.

Cara Mengesahkan Tarikh Bootstrap Cara Mengesahkan Tarikh Bootstrap Apr 07, 2025 pm 03:06 PM

Untuk mengesahkan tarikh dalam bootstrap, ikuti langkah -langkah ini: memperkenalkan skrip dan gaya yang diperlukan; memulakan komponen pemilih tarikh; Tetapkan atribut data-BV-tarikh untuk membolehkan pengesahan; Konfigurasikan peraturan pengesahan (seperti format tarikh, mesej ralat, dll.); Mengintegrasikan rangka kerja pengesahan bootstrap dan mengesahkan input tarikh secara automatik apabila borang dikemukakan.

Cara menggunakan bootstrap di vue Cara menggunakan bootstrap di vue Apr 07, 2025 pm 11:33 PM

Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

See all articles