随着互联网络和HTML5技术的兴起，一个新名词诞生了—前端。并且已经成为互联网大军中不可或缺的重要一份子。那么，一名合格的前端工程师的知识结构是怎样的呢？下面就跟随广州优网科技小优一起来了解一下吧。

对于前端来说，他所面对的直接的东西就是浏览器，而跟浏览器进行交互的内容基本的就包括HTML+JavaScript+CSS，然而从网络流行天开始，这类代码绝大部分是通过拷贝粘贴的方式进行传播，以至于JavaScript成为了世界上被误解的一门语言（老道说的）等等，此外，随着很多前端IDE环境的出现，前端代码的质量更是参差不齐，尤其是Frontpage。不过看到很让人高兴的就是，越来越多的前端不再使用IDE来进行开发或者前端IDE正在变得越来越规范。围绕着HTML+JavaScript+CSS本身有很多的话题可以讨论，因为这三个都不是简单几句话就能够说清楚的事情。

在网站建设中，简单的使用他们，不管是拷贝粘贴，还是使用IDE都并不妨碍前端制作出正常工作的页面，但是这只能步入初学者的行列，不过可能并不妨碍成为一个合格的前端。

真正理解这些技术并不是简单的事情，但是个人觉得想进入下一个阶段，需要对浏览器有基本的理解。这三个技术是浏览器直接面对的代码，而浏览器同前端开发者之间沟通的方式是通过一系列逻辑上的概念或者隐喻，例如HTML对应的DOM结构，CSS的Box Model等，理解了这些逻辑上的概念接口，可以让前端开发者更容易理解自己正在做的事情。而这些概念的理解需要计算机等学科的基础知识。

例如DOM其实来自于数据结构树的抽象，文档数据模型基本上是一个非常稳定的抽象模型，使用树型结构来描述一个HTML/XML的文档数据，然后通过浏览器实现的DOM API来操控这个树型逻辑结构——浏览器内部不一定是使用树来做具体实现，但是在浏览器同前端沟通的时候通过这种逻辑结构，或者隐喻为文档树；在例如CSS的盒子模型，其实浏览器基本上也是提供这个逻辑概念让前端更好的理解渲染过程，通过观察一个前端写代码时候就能判断出他是否理解这个盒子模型，在制作Layout过程中，如果他只是通过各种IDE或者类似于Firebug之类的可视化工具去调整布局参数的话，那可能就没有很深的理解，加入遵循的Grid布局的话，也只是简单的利用那个Grid的几个计算公式——不过很多工具或者框架的出现就是用来帮助做这个的，嘿嘿；另外一种人可能会提前进行计算，他能够知道自己进行宽度和高度设定之后，布局会是什么样子。

优化前端代码在网站建设中是更的一个阶段，这个阶段的修炼可能需要更加了解浏览器的很多实现细节，以及不同浏览器之间的实现差异——面对不兼容问题的本质。还拿CSS的布局为例，浏览器中有个很重要的概念或者阶段就是渲染/布局过程，简单说布局过程就是浏览器在把所有内容绘画到显示屏上的过程，而这个过程就是浏览器计算各种元素几何关系的过程，这些几何关系包括长、宽、顶点坐标，浏览器将解析HTML生成的DOM树转化为渲染树——WebKit中的RenderTree，Gecko中的FrameTree等等，对于Block和Inline型元素几何关系计算方式会有所不同，从而会影响到父级元素的几何关系计算，这个渲染过程在火狐中被成为Reflow，WebKit中为Layout，这个过程是占用CPU资源的，所以，在网站建设过程中，对于布局方面的优化就需要理解这个过程，例如，在代码中，建议不要一句一句的为某个元素设定CSS属性，而建议一起把打包的CSS属性赋予某个元素，就是因为这个赋值可能会引起浏览器的Reflow过程，从而影响使用体验；或者比如JavaScript语言中，对于一个属性的查询过程是需要在他的所有Prototype Chain或者Scope Chain中做遍历的，所以会有使用局部变量的建议从而避免糟糕的多次遍历等等。

      好了，今天的揭秘就先告一段落了，今后优网科技小优还会为大家奉上更多精彩，还请大家继续关注喔~~

責(zé)任編輯：優(yōu)網(wǎng)科技

版權(quán)所有：http://news.zouhaitian.cn (優(yōu)網(wǎng)科技) 轉(zhuǎn)載請注明出處