0

0

Web 前端的未来会怎样?

php中文网

php中文网

发布时间:2016-06-07 08:43:19

|

1652人浏览过

|

来源于php中文网

原创

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

YIXUNCMS中秋专版2.0.4
YIXUNCMS中秋专版2.0.4

系统介绍:YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统,使用增强版后台管控系统,板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示:由于网站页面的不同设计,部分后台功能未在前端进行体现。系统特点:1、采用目前流行的PHP语言编写,底层采用超轻量级框架作为系统支撑;2、页面布局使用DIV+CSS技术,遵循WEB标准,及大提高页面的浏览速度;3、使用应

下载
  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 只会消失的更快。

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

而在新技术上,像

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

32

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

23

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

16

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

5

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

6

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

268

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

195

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

170

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

85

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

CSS教程
CSS教程

共754课时 | 25.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号