《Web前端开发最佳实践》——1.2 Web前端开发现状
本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第1章,第1.2节,作者:党 建 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1.2 Web前端开发现状
前端开发虽然起步时间晚,但是发展势头迅猛,在各种新技术、新标准的推动下,各大互联网公司也开始重视Web产品的前端重构与开发,如淘宝、腾讯、新浪、百度、搜狐等都对自己的网站进行了重构并同时使用了HTML5中的新特性。现在开发的Web新产品的页面交互也越来越丰富,视觉效果也越来越绚丽。互联网公司除了重视前端开发之外,还在积极推动互联网技术的发展,2001~2012年,腾讯、百度及奇虎360公司先后加入了万维网联盟(W3C),共同参与互联网技术标准的研究和制定,促进了国内互联网产业的发展。
在Web前端发展的过程中,浏览器的发展起着至关重要的作用。浏览器厂商在这场Web浪潮中表现突出,具体表现在浏览器的版本升级周期短、对前端标准的支持也越来越好、浏览器的性能也有大幅的提升等。IE浏览器也开始发力,最新发布的IE 10浏览器无论是标准的支持还是性能都表现突出。浏览器的快速发展使得低端的浏览器如IE 6、IE 7等快速退出市场。
下面看一下全球范围内浏览器的占有率情况。根据StatCounter的统计,2012年10月份,全球浏览器占有率前5位的分别是Chrome、IE、Firefox、Safari及Opera,占有率分别为34.77%、32.08%、22.32%、7.81%和1.63%。按照浏览器的版本统计,在低端浏览器中,IE 8占有率为12%,IE 7的占有率仅为0.88%,IE 6的占有率则更低。
此外,移动设备上的浏览器在整个浏览器占有率中上升速度很快。根据StatCounter的统计,Safari iPad在浏览器的占有率已经达到了2.76%。目前移动设备的普及率极高,用户已经逐渐习惯于通过移动设备来浏览网页。主流的移动平台主要为Android和iOS系统,对应的浏览器都是以WebKit为核心的,性能和对标准的支持都不错。
以上介绍的是浏览器在全球范围内的占有率情况。从上面的统计可以看出,在全球范围内,低端浏览器的占有率已经很低了,但国内浏览器占有率的状况则比较复杂,低端浏览器如IE 8、IE 7和IE 6等还占有不小的份额。根据StatCounter的统计,2012年10月份,国内浏览器占有率前5位分别为IE 8、
IE 9、IE 6、搜狗浏览器和360安全浏览器,占有率分别为48.7%、14.09%、8.29%、5.74%和2.72%。其中低端浏览器IE 8、IE 7和IE 6的总占有率大约为58%,低端浏览器依然占有“半壁江山”,而高级浏览器如Chrome、Safari、Firefox等占有率则很低。值得称道的是,360安全浏览器和搜狗浏览器这两款浏览器都是基于开源的浏览器内核,对标准支持较好,性能表现突出。这两款浏览器的占有率目前虽然不高,但发展势头迅猛,是推动老旧浏览器退出市场的中坚力量。
除各大互联网公司和浏览器厂商的积极推动外,Web前端开源社区的参与热情也极为高涨。在著名的网络代码托管系统GitHub上,开源的项目仍然是以前端相关项目居多,按语言排名,前3位分别为JavaScript、Ruby和Python;按项目排名,靠前的大部分也是前端项目,如Prototype、Bootstrap、jQuery及相关插件等,具体内容可参考GitHub官方网站。国内的一些前端社区则发展较为缓慢,多是以推广HTML5为主,靠一些酷炫的效果来吸引眼球,反而关注前端基础的较少。国内Web互联网公司(如淘宝、百度、腾讯等)也有部分优秀的开源前端框架,这些公司的前端技术分享氛围不错。整体来讲,国内前端技术发展还是比较迅速的,也不乏顶级的前端技术人员,但普遍缺乏的是开放的心态和与国内外同行交流的能力,国内前端技术的发展任重道远。
Web前端整体技术的发展和前端工程师个人的能力是相辅相成的。目前,前端工程师很多是“半道出家”,一部分是从页面UI开发转行为Web前端开发的,一部分则是由后端工程师转行而来,所以前端工程师普遍自学成才,并没有受过足够的专业训练,也缺乏实际的项目经验。
除了以上这些Web前端开发的外在环境之外,Web前端在技术方面也存在着大量的挑战,大量旧的网站需要重构来提高网站用户体验和性能等。这些网站的前端代码普遍存在的问题有:代码组织混乱,CSS代码和JavaScript代码混合在HTML代码中;代码的格式问题突出,不够整洁;页面布局随意,HTML代码不符合标准;网站整体性能差,还没有意识到要去应用诸如缓存、动态加载、脚本压缩、图片压缩等提高性能的技术。
此种状况并非是个案,查看目前访问量颇高的某网站的首页源代码,可以很直观地看出其中不规范的内容:页面没有body的闭合标签,页面代码缩进随意,页面中大量使用内联样式并且页面中还在使用诸如< marquee >、< font >等标准不推荐的标签。以下是其中的代码片段:
在这段代码中,和标签已经不再被W3C制定的标准推荐使用,所呈现的效果完全可以通过JavaScript代码实现,并且实现的效果可以更好。标签完全可以通过CSS样式代码实现。
此外,此站点首页HTML代码中包含大量不必要的标签和多余的样式设置,代码的可读性较差。再来看一段代码:
<!—第一段代码片段 -->
<div id="slideshow"><div class="current"><img src="./images/pic011.gif" width="189" height="176" />
</div><div><img src="./images/pic012.gif" width="188" height="176" /></div><div><img src="./images/pic013.gif" width="188" height="176" /></div>
</div>
<!—第二段代码片段 -->
<div><br/><a href="./gljd/gywm/">关于我们</a> | <a href="./gljd/wzls/">网站
声明</a><br /></div>
在上面的代码段中,第一段代码中的标签外的
标签来增大距离是不合语义的做法,应该通过CSS样式来设置。因此,
`
javascript以上两段HTML代码至少可以简化为:
关于我们 | 网站声明
另外,站点中的CSS样式文件和JavaScript脚本文件,没有任何文件被压缩和合并。推荐的做法是分别压缩合并样式文件和脚本文件,在缩小文件大小的同时也减少了文件的HTTP请求次数,提高了性能。
综合以上的这些信息,Web前端开发的现状可以概括为:前端技术发展迅速,但起步较晚,基础薄弱;前端工程师热情高涨,但缺乏足够技能培训,对代码规范重视不足,对一些基础原理的理解不够深刻。
《Web前端开发最佳实践》——1.2 Web前端开发现状相关推荐
- ios传感器应用开发最佳实践_同构 javascript 应用开发的最佳实践(Four)
今天要做的是首先要整理代码,在现有的代码基础上抽理出一个 Applicatin 类可以作为客户端和服务端共同使用,通过不同的上下文完成不同的工作. 创建 Applicatin 类 export def ...
- web前端开发最佳实践_学习前端Web开发的最佳方法
web前端开发最佳实践 为什么要进行网站开发? (Why web development?) Web development is a field that is not going anywhere ...
- iOS应用开发最佳实践
<iOS应用开发最佳实践> 基本信息 作者: 王浩 出版社:电子工业出版社 ISBN:9787121207679 上架时间:2013-7-22 出版日期:2013 年8月 开本:16开 页 ...
- Web前端开发最佳实践(8):还没有给CSS样式排序?其实你可以更专业一些
前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...
- Web前端开发最佳实践(3):前端代码和资源的压缩与合并
一般在网站发布时,会压缩前端HTML.CSS.JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页更快的展现.当然,CDN分发.缓存等方式也是加快代码或资源 ...
- web前端开发最佳实践_Web开发人员和设计师的最佳黑色星期五优惠
web前端开发最佳实践 As Black Friday 2016 is here, we thought that web developers and web designers should al ...
- 《Web前端开发最佳实践》读书笔记
总的来说,这本书给我感觉帮助不大,比较适合新手,对新手养成好的习惯有些帮助.更深层次的东西比较少,而且由于书的发行周期,对于前端这种日新月异的技术来说,过时.与新技术新理念脱节,是没法避免的事情(20 ...
- Web前端优化最佳实践及工具集锦
摘要:前端的性能对于Web应用的用户体验来说非常重要.不要以为你的Web应用的性能已经足够好了,其实还会有很多可以提升的地方.本文将介绍Google和雅虎关于前端优化的最佳实践以及工具,你可以逐一检验 ...
- Web前端优化最佳实践及工具集锦(如减少页面加载时间)
前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快.对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升.下图显示了页面加载速度对于用户体验的影响. 你的Web页 ...
最新文章
- django mysql 时区_django 中的时区设置
- Win8 Consumer Preview 8250 + VS11 体验
- postgis创建空间数据库(pgadmin4)
- CANopen | 移植01 - STM32H743 + Canfestival的移植并让FDCAN1运行CANopen协议
- mysql利用tgz恢复_Mysql备份与恢复方法_MySQL
- Laravel核心解读 -- 扩展用户认证系统
- 职务作品的著作权归属情况分析
- 谷粒商城:跨域问题解决
- 芝麻信用倒逼银行改革,纷纷模仿支付宝推出借呗!
- macOS远程管理linux,MacOS远程控制工具
- csp是什么比赛_2020年CSP-J/S来了,你想知道的都在这里
- 牛刀小试-Promise
- Redis配置文件redis.conf文件详解
- qrcode二维码生成工具
- GitHub无法访问下载
- VC/MFC 从WebBrower 中获取 HTML 和文本
- PII RTC TEST Steps
- 提高网站转化率——页面停留时间与网站停留时间
- 7.python基础之基础数据类型--字典dict
- 2021年计算机视觉工程师学习路线
热门文章
- 多个独立的forEach循环, 内部处理条件是一样,代码优化方案
- Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换
- Linux云服务器安装Tomcat
- 移植开源QT软件-SameGame
- 社会化分享插件集成分享
- Linux系统文件有三个主要的时间属性,分别是ctime(change time), atime(access time), mtime(modify time)...
- .NET项目发布网站具体步骤和注意事项
- ubuntu declare
- 白话算法(6) 散列表(Hash Table)从理论到实用(中)
- 人工合成维生素E和天然维生素E的区别