关于前端开发的那些事

其实我做前端的时间也不是很长，写这篇文章也是和一些初学的前端开发人员做一次经验的分享与交流，如果有错误的地方还需要大家谅解和指正。

创新互联-专业网站定制、快速模板网站建设、高性价比峄城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式峄城网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖峄城地区。费用合理售后完善，10年实体公司更值得信赖。

说起前端开发，我们就从一些让人打瞌睡的概念说起吧。

关于WEB标准

什么是WEB标准？也许很多人会认为是DIV+CSS。其实这是一个错误的说法，WEB标准是一系列的技术规范，而目前主要包括XHTML1.0、CSS2.1、DOM1.0和ECMAJavaScript。当然了，WEB标准也不仅仅是一个规范，而是一系列规范的总称。而上面说的DIV+CSS是XHTML1.1结合CSS2.0的一种制作方法，严格来应该说是XHTML+CSS。

而WEB标准是由三大块组成的。首先是结构，主要是对网页的数据对象进行整理分类，技术体现分别是HTML，XML，XHTML。（在这里大家可能会问，HTM不也是网页的一种吗？是的，实际上HTM与HTML没有本质意义的区别，原因是为了兼容一些不能识别四位扩展名的老系统（win32），开发者为了满足DOS仅能识别8+3的文件名而已。）；其次就是表现，用于没有结构化的信息显示以及视觉上的处理，分别包含为样式，颜色，大小等等，主要应用于CSS上。最后一个就是行为，用于文档对象模型定义与交互的体现，分别是DOM与MAScript来完成。

关于布局

在这个问题之前，我先跟大家谈谈一个故人，那就是“table”，table也就是表格。早期的网站大部分都是用table来布局的，准确来说应该是用表格来布局。因为如果用table来布局，这时我们就不能叫table了，因为它几乎能完成所有结构上的事情。那为什么不用table来布局呢？这就是我们要谈的节约成本，提升速度了。

首先，table的可维护性低，太多的table属性要修改起来让人眼花缭乱，比如border=”0”,align=”left”等等，要修改得每个页面都要更改。第二，嵌套太过复杂，tr td会让你找到吐。第三，不能重用。第四，添加交互效果太难。第五，加载速度过慢。等等，每个问题都无不牵扯到成本和速度的问题。

如果采用XHTML+CSS来布局，上面的几种问题完全可以解决。因为我们可以做到网页表现与内容分离，也就是用XHTML来作为数据的表现，而所有的样式表现将由CSS来全部控制。这样不仅结构清晰，页面体积也会大大的减小，浏览器兼容性更好。当然还有很多好处，比如有利于SEO优化，更容易被搜索引擎收录，样式重用，维护方便，错误修改页面调整更加快捷等等。所以W3C推荐使用WEB标准开发的原因相信大家也很清楚了。

关于优化规范

针对规范的问题在前段阿里技术嘉年华上跟淘宝前端开发专家嗷嗷交流过，嗷嗷认为，大家了解最多的是网站性能优化的34条黄金法则，我们称之为雅虎军规，但也不能说是规范，它只是一个建议。但不同的公司都有着不同的背景会导致每个公司都会加上自己的一些特殊的东西。所以让人感觉有很多，每个人出来讲都不一样了。其实最基础的我还是觉得雅虎军规，就是前人的方法总结了，可能由于时代在变，有些方案也会发生变化，所以要自己再去深入研究。

雅虎现在前端没有以前那么好，就是雅虎辉煌的时候很多人都去看看人家是怎么做的。现在雅虎就没有像以前那么重视了，或者是由于公司的一些原因。我们可能也不是太了解，但是他们曾经留下那些经验是非常好的。

关于字符集

在每个页面的中我们都有设置了字符集，而在通常的情况下我们用最多的时”UTF-8(国际标准编码)”和”GB2312(中文编码)”. 一般来说，在前端表现上面我们用UTF-8，后台cms我们就使用GB2312。

有时候我们在打开一些网页上会显示口口口口????这样的字符，可能是你在在写charset的时候用了欧洲语系，比如ISO-8859-1等等，导致浏览器无法辨别语种；再者是因为你的页面编码不对，这时我们要通过保存为来改变页面编码。可以通过记事本或者EditPlus操作：

在这里主要介绍三个编码（部分内容借鉴汪旭的一篇帖子）：

ANSI编码：简单的说就是把所有的空格、标点符号、数字、大小写字母分别用连续的字解状态表示，一直编到第127号，这样计算机就可以用不同字节来存储英语的文字了。所以人们就把这个方案叫做ANSI的“ASC II”编码。这个肯定是不适合在国内使用的。

GB2312编码：这个编码的出现也是计算机普及到我们中国时，这时我们的汉字如何通过计算机表现出来呢？6000多个常用的汉字如何去保存呢？其实也就是通过两个大于127的字符连载一起是，就表示一个汉字。前面的一个字节（他称之为高字节）从0xA1用到0xF7，后面一个字节（低字节）从0xA1到0xFE，这样我们就可以组合出大约7000多个简体汉字了。

以上图片是“传媒”这几个字的编码，如果我们使用ANSI编码的话，汉字在页面上是识别不出来的。而在BIG5的编码里，只能识别出“媒”字，识别不出“传”字。这也是因为在繁体字库里面没有“传”这个字。

UTF-8和UTF-16编码：UNICODE 来到时，一起到来的还有计算机网络的兴起，UNICODE 如何在网络上传输也是一个必须考虑的问题，于是面向传输的众多 UTF（UCS Transfer Format）标准出现了，顾名思义，UTF8就是每次8个位传输数据，而UTF16就是每次16个位，只不过为了传输时的可靠性，从UNICODE到UTF时并不是直接的对应，而是要过一些算法和规则来转换。

 
世界上所有网页编码统计图（来自网络）

从图上我们很容易看出，UFT-8属于一直上升的状态。在目前所有的网页编码中UTF-8编码是比较主流的。

关于性能和视觉

在前端开发上性能和视觉效果永远是矛盾的，鱼与熊掌不能兼得。而淘宝前端开发专家嗷嗷认为，这是很正常，比如设计师喜欢用图，因为图能更好的体现出UI效果，但是这些图要在客户端呈现的时候，肯定需要下载花费时间的，等待的时候让你觉得性能变差了，但这也不是完成不能解决的。一些方案比如我们现在利用CSS技术把几个图合成一个，尽量控制它的请求数。也有一些我们比较推荐的是方案，比如我们用一些新技术，IE6这种它不支持的，那我们就可以跟设计帅说那我们在好的浏览器中就做出好的效果，低版本的浏览器达到可用的效果就可以，消耗又少很多。这样就尽量找个平衡点，不能这个不能做，那个不能做。

那么我们应该如何去最大化的提升它的性能？

除了上面说的几点外，还有缓存的合理设置和资源的合并，合理的缓存设置以及减少外部的脚本和样式能够大大的减少HTTP的请求数，进而提升网站的浏览速度。也就是说，缓存越多越好，外部资源越少越好。

【编辑推荐】

1. 专访嗷嗷：WEB前端性能优化问题
2. Web设计者心声：成长虽可贵健康价更高
3. 阿里巴巴Web前端开发面试题赋答案
4. 做最好的中文Web工具，提高工作效率
5. Web前端：11个让你代码整洁的原则

网页名称：关于前端开发的那些事
网址分享：http://www.shufengxianlan.com/qtweb/news28/257578.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联