网页前端开发是什么

今天我要将关注点放到网页渲染以及其重要性上。虽然已经有很多文章提到过这个主题了，但大部分信息都是零碎的片段。为了思考这件事情，我需要研究很多信息的来源。这也就是为什么我觉得我应该写这篇文章的原因。我相信这篇文章对新手会很有用，并且对想刷新和巩固他们已经了解的东西的高手也同样适用。渲染应该从最开始当页面布局被定义时就进行优化，样式和脚本在页面渲染中扮演着非常重要的角色。专业人员知道一些技巧以避免一些性能问题。这篇文章不会深入研究浏览器的技术细节，而是提供一些通用的原则。不同浏览器引擎工作原理不同，这就使特定浏览器的学习更加复杂。浏览器是怎样渲染一个页面的？我们从浏览器渲染页面的大概过程开始说起：由从服务器接收到的 HTML 形成 DOM（文档对象模型）。样式被加载和解析，形成 CSSOM（CSS 对象模型）。紧接着 DOM 和 CSSOM 创建了一个渲染树，这个渲染树是一些被渲染对象的集合（ Webkit 分别叫它们”renderer”和”render object”，而在Gecko 引擎中叫”frame”）。除了不可见的元素（比如 head 标签和一些有 display:none 属性的元素），渲染树映射了 DOM 的结构。在渲染树中，每一个文本字符串都被当做一个独立的 renderer。每个渲染对象都包含了与之对应的计算过样式的DOM 对象（或者一个文本块）。换句话说，渲染树描述了 DOM 的直观的表现形式。对每个渲染元素来说，它的坐标是经过计算的，这被叫做“布局(layout)”。浏览器使用一种只需要一次处理的“流方法”来布局所有元素（tables需要多次处理）。最后，将布局显示在浏览器窗口中，这个过程叫做“绘制(painting)”。重绘当在页面上修改了一些不需要改变定位的样式的时候（比如background-color,border-color,visibility)，浏览器只会将新的样式重新绘制给元素（这就叫一次“重绘”或者“重新定义样式”）。重排当页面上的改变影响了文档内容、结构或者元素定位时，就会发生重排（或称“重新布局”）。重排通常由以下改变触发：· DOM 操作（如元素增、删、改或者改变元素顺序）。· 内容的改变，包括 Form 表单中文字的变化。· 计算或改变 CSS 属性。· 增加或删除一个样式表。· 改变”class”属性。· 浏览器窗口的操作（改变大小、滚动窗口）。· 激活伪类（如:hover状态）。浏览器如何优化渲染？浏览器尽最大努力限制重排的过程仅覆盖已更改的元素的区域。举个例子，一个 position 为 absolue 或 fixed 的元素的大小变化只影响它自身和子孙元素，而对一个 position 为 static 的元素做同样的操作就会引起所有它后面元素的重排。另一个优化就是当运行一段Jjavascript 代码的时候，浏览器会将一些修改缓存起来，然后当代码执行的时候，一次性的将这些修改执行。举例来说，这段代码会触发一次重绘和一次重排：var $body = $('body'); $body.css('padding', '1px'); // 重排, 重绘  $body.css('color', 'red'); // 重绘  $body.css('margin', '2px'); // 重排, 重绘  // 实际上只有一次重排和重绘被执行。 如上面所说，访问一个元素的属性会进行一次强制重排。如果我们给上面的代码加上一行读取元素属性的代码，这个情况就会出现：var $body = $('body');  $body.css('padding', '1px');  $body.css('padding'); // 这里读取了一次元素的属性，一次强制重排就会发生$body.css('color', 'red');  $body.css('margin', '2px'); 上面这段代码的结果就是，进行了两次重排。因此，为了提高性能，你应该讲读取元素属性的代码组织在一起（细节的例子可以看JSBin上的代码）。有一种情况是必须触发一次强制重排的。例如：给元素改变同一个属性两次（比如margin-left），一开始设置100px，没有动画，然后通过动画的形式将值改为50px。具体可以看例子，当然，我在这里会讲的细节。我们从一个有transition的CSS class开始：.has-transition {     -webkit-transition: margin-left 1s ease-out;        -moz-transition: margin-left 1s ease-out;          -o-transition: margin-left 1s ease-out;             transition: margin-left 1s ease-out;  } 然后进行实现：//我们的元素默认有"has-transition"属性  var $targetElem = $('#targetElemId');     //删除包含transition的class  $targetElem.removeClass('has-transition');     // 当包含transition的class已经没了的时候，改变元素属性  $targetElem.css('margin-left', 100);     // 再将包含transition的class添加回来  $targetElem.addClass('has-transition');     // 改变元素属性  $targetElem.css('margin-left', 50); 上面的实现没有按照期望的运行。所有的修改都被浏览器缓存了，只在上面这段代码的最后才会执行。我们需要的是一次强制重排，我们可以通过进行以下修改来实现：//删除包含transition的class  $(this).removeClass('has-transition');     // 改变元素属性  $(this).css('margin-left', 100);     //触发一次强制重排，从而使变化了的class或属性能够立即执行。  $(this)[0].offsetHeight;   // offsetHeight仅仅是个例子，其他的属性也可以奏效。     // 再将包含transition的class添加回来  $(this).addClass('has-transition');     // 改变元素属性  $(this).css('margin-left', 50); 现在这段代码如我们所期望的运行了。实际的优化建议汇总了一些有用的信息，我建议以下几点：· 创建合法的 HTML 和 CSS ，别忘了制定文件编码，Style 应该写在 head 标签中，script 标签应该加载 body 标签结束的位置。· 试着简化和优化 CSS 选择器（这个优化点被大多数使用 CSS 预处理器的开发者忽略了）。将嵌套层数控制在最小。以下是 CSS 选择器的性能排行（从最快的开始）：ID选择器：#idclass选择器： .class标签: div相邻的兄弟元素：a + i父元素选择器： ul > li通配符选择器： *伪类和伪元素： a:hover ，你应该记住浏览器处理选择器是从右向左的，这也就是为什么最右面的选择器会更快——#id或.class。   div * {...} // bad      .list li {...} // bad      .list-item {...} // good      #list .list-item {...} // good 在你的脚本中，尽可能的减少 DOM 的操作。把所有东西都缓存起来，包括属性和对象（如果它可被重复使用）。进行复杂的操作的时候，最好操作一个“离线”的元素（“离线”元素的意思是与 DOM 对象分开、仅存在内存中的元素），然后将这个元素插入到 DOM 中如果你使用 jQuery，遵循jQuery 选择器最佳实践要改变元素的样式，修改“class”属性是最高效的方式之一。你要改变 DOM 树的层次越深，这一条就越高效（这也有助于将表现和逻辑分开）。尽可能的只对 position 为 absolute 或 fix 的元素做动画。当滚动时禁用一些复杂的 :hover 动画是一个很好的主意（例如，给 body 标签加一个 no-hover 的 class）关于这个主题的文章。想了解的细节，可以看一下这些文章：1. How browsers work2. Rendering: repaint, reflow/relayout, restyle希望这篇文章能够对你有所帮助！原文链接： frontendbabel   翻译： 伯乐在线 - Moejser译文链接： http://blog.jobbole.com/72692/

java web指的是动态网页开发，主要做服务端应用开发，涉及到的技术包含java，数据库，以及前端静态的相关技术，整合一起才能做，而且，要做的很好，对于前端是要有一定的功底的，尤其是前端使用的是非html5技术的话，浏览器兼容性将会是个很大的问题。html5只网页静态开发语言，主要是对html4的改进，它只能做静态的网页，当然了，html5很多特效改善了在浏览器上的表现和兼容性问题，java web开发的前端页面也需要用到html技术，你可以采用html5做java web 的前端技术啊，它俩不是完全的对立面，应该来说各有自己的用处，但是如果是做java web开发还可能要结合呢。

前端开发和网页制作不是一个职位，即前端开发包含网页制作。网页制作：一般意义上的网页制作可以分为两部分，即网页设计和网页排版，仅从技术上来说，学会两个软件就够了，Photoshop和Dreamweaver。前者负责设计效果图和切图即网页设计，后者负责编写html代码以及css样式表文件，也就网页排版，将切割后的图重新按照效果图的样子摆放在网页对应的位置上。如果对网页制作下个定义，就是用网页制作工具制作网页。前端开发：到目前为止没有一个明确的定义，甚至将后台的某部分引入到前端开发之中，但是听起来也不无道理。下面给出一个前端开发工程师需要掌握的技能表：前端开发工程师的核心技能：1、开发语言。核心掌握的语言有html+css+JavaScript。html发展历史有出现有二十多年，历经多次版本更新，JavaScript作为最难的语言之一，许多编程高手对之也不敢妄自菲薄自封精通。许多人都说前端开发要掌握的技能太简单，这是对html语言的一种误解。之前由于工具和没有较强逻辑性，大部分人对前端开发很轻视。导致前端开发在国内的发展异常缓慢。即使是现在，许多在前端开发的人员还不知道为什么要有html5和css3，这两项技术能带来什么革新就更不必问了。由于JavaScript与html的差异性，以及静动态分开处理的一些好处。在大公司编写静态效果和动态效果往往是分开由不同的人完成的。小公司因为需要压缩成本，就要求每个人会的越多越好。至于php等一些后台语言，则是前端开发的扩展语言，想要成为前端开发项目经理，必须要懂得后台实现的思路，并能够写出适合后台修改的模板，不会让他们头大的想砸电脑。试想在DW生成的一个1MB多的页面里出现了错误，什么时候才能找到错误的根源并解决?2、浏览器调试电脑上的浏览器，有IE6\7\8，Firefox，chrome，opera，safari，遨游，包括国内主流的搜狐，腾讯TT，360，世界之窗。从内核上讲主要有IE的，遨游版IE，safari，firefox以及opera的。每种内核对代码的解析是不完全一样的，即使同样内核也可能存在很大差异，如IE和遨游版的IE。不说非主流的浏览器，就主流的8个浏览器，要做到完全兼容，并不是那么轻松的。需要长时间的积累测试，需要前端开发工程师对前端开发的热爱和激情。3、hack技术这项技术其实没必要单独列出来，前端开发人员往往要给别的人去擦屁股，这时候hack技术就能大显神威，提高工作效率。虽然写代码都要求按照标准来，不写hack代码，但实际工作中给别人擦屁股是免不了的。所以这也应该是每个前端开发人员必备的技能。4、业内标准这些标准代表了互联网发展的方向，也代表了前端开发的一种信仰。写的代码，都要100%通过标准验证，为通过标准验证而感到自豪。这种推动业界发展的自豪感，是许多后台工作人员所不能体会到的。此外一些PS等一些知识也要掌握掌握以上技能，可以说只能算是一个合格的前端开发人员，能够参与到一个大的项目中，或者自己独立写出一个网页。此时和网页制作设计的区别不是特别明显，效果上来看，都是制作网页的，但实际上，技术上所超于的已经是几个档次的东西了。而这些，恰恰是一个普通网页制作设计所做不到的事情。因为不懂DW背后的代码，也有部分人说懂得手写代码，只能说，不在手写代码中实践、解决问题，根本不能领会到手写代码的精髓。显然一个好的前端开发人员是连通和设计和代码之间的一个桥梁。既要有理工的严谨又要有文艺的情怀。既要懂得交互设计，提高用户体验，又要具有美术基础和审美能力，而在此基础之上，还要对已完成的页面进行维护和以及网站前端性能做相应的优化。而网页制作只是这整个前端开发过程的一个组成部分，所以真正的前端开发人员是一个很厉害的角色。

前端开发工程师的主要职责是与交互设计师、 视觉设计师协作，根据设计图用HTML和CSS完成页面制作（也可能是一个人完成所有）。同时，在此基础之上，对完成的页面进行维护和对网站前端性能做相应的优化。另外，一名合格的前端开发工程师，应该具有一定的审美能力和基础的美工操作能力，能很好的与交互及视觉协作。现在的前端工程师可能都需要一定程度上的全栈了，也就是前后端都需要会。不仅需要制作静态页面，包括网站架构，H5等。如今市场上招聘web前端需要你会写JS、会用JS、能设计、切图、懂用户交互等，还需要前端架构是开发和优化框架，及服务器，用户体验等涉汲就比较广，当然全栈式前端工程师工资也就比较高了。

最基本的三个技能：HTML、CSS、JavaScript这个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。HTML：指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，现在已经发展到4.01版了，得力于W3C建立的标准和规范，现在已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。另外，W3C 与 WHATWG 合作创建一个新版本的 HTML，就是HTML5。HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准，为HTML世界注入惊喜，尽管HTML5 仍处于完善之中，然而，大部分现代浏览器已经具备了某些 HTML5 支持，显示出来的生机和活力已是那样的激奋人心，特别是前端的工作中，那些针对浏览器兼容的问题将能得到很好的解决，的效果和应用也能更方便的实现。前端工程师，也必然要与时俱进，紧跟业界时代发展的前沿，不然永远只停留在旧的技术上，只会被无情的淘汰。其实HTML的元素也就不过几十个，常用的元素更少，所以掌握起来的话应该不困难。但就是这些看似简单的元素，很多新手在刚开始的时候就不注意规范，养成一些不好的习惯。

最基本的三个技能：HTML、CSS、JavaScript这个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。HTML：指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，现在已经发展到4.01版了，得力于W3C建立的标准和规范，现在已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。另外，W3C 与 WHATWG 合作创建一个新版本的 HTML，就是HTML5。HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准，为HTML世界注入惊喜，尽管HTML5 仍处于完善之中，然而，大部分现代浏览器已经具备了某些 HTML5 支持，显示出来的生机和活力已是那样的激奋人心，特别是前端的工作中，那些针对浏览器兼容的问题将能得到很好的解决，的效果和应用也能更方便的实现。前端工程师，也必然要与时俱进，紧跟业界时代发展的前沿，不然永远只停留在旧的技术上，只会被无情的淘汰。其实HTML的元素也就不过几十个，常用的元素更少，所以掌握起来的话应该不困难。但就是这些看似简单的元素，很多新手在刚开始的时候就不注意规范，养成一些不好的习惯。

网站开发开发大致分为前端（客户端）和后端（服务器端），前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。它的核心价值在于实现用户体验，大型互联网公司的用户体验部门，一般会包括用户研究、交互设计、前端技术和视觉设计等方面的内容。如果你想成为一个优秀的web前端开发工程师，可以来这个裙，前面三个数是4 九 4，中间是零 六 4，最后的三个是9 叁 4，三个数连起来就是了，如果不想学习的就不要加了。　　web前端开发需要掌握的技术：　　1.学习html,这个是最简单的,也是最基础的.要熟练掌握div、form table、ul li 、p、span、font这些标签,这些都是最常用的,特别是div和table,div用于布局、table也可以用于布局,但是不灵活,基本 table是用来和数据打交道.　　2.学习css,这里说的css不包括css3,一般我们看到web前端开发工程师的要求里面,有一个会使用css+html 或者 css+div 来进行界面布局,所以css是用于辅助html来布局和展示的,我们称之为“css样式”,为什么会说css+div呢?因为我上面说了div就是 html主要用于布局的东西,所以div就是核心掌握的东西!那么css肯定必须要配合div来使用才好.css要熟练掌握float、position、width、height，以及对于的最大最小、会使用百分百、overflow、margin、padding等等,这些都是跟布局有关系的样式,一点要掌握.　　3.学习js. 可能前两个大家觉得还过的去,看到js就蛋疼了,其实吧,js入门很简单的,不需要会很多东西的,只要会根据某个id、或者name拿到网页dom或者样式、或者值,然后会给某个id或者name的元素标签赋值、或者追加数据、追html,这个是跟数据有关系的操作,然后数据逻辑判断,效果方面的,无非就是跳转、弹框、隐藏什么的,把这些全部结合其他就是实际用途了,代码一点都不难,会了这些基础js,其他的直接百度就好了.然后看多了,用多了,就什么都不是问题了.　　4.学习jquery.jquery是相当于把js封装了一套的一个js插件,目的就是操作起来更方便,代码写的更少,jquery入门也很简单,那些是入门需要学的和js一样,只是换成了jq的代码.其他的一样百度就够了.　　5.最好会点后台语言,比如java、php,为什么呢?因为我们前台界面的数据都是从后台来的,如果会点后台代码,就知道怎么跟后台交互数据是最好的, 这样节约时间,也可以让前端代码更规范.不然可能因为你的写法和后端给来的数据不能结合上,那么前端代码又得重新写,那就更蛋疼了.　　6.学习css3+html5,为什么这个放最后呢?哈哈,因为我自己也不太会,毕竟术业有专攻嘛,虽然这个很流行,但是我是搞后端的,在工作中用不到它,只有在自己网站需要改样式,或者朋友网站样式出问题的时候,我才会去临时去研究下.但是如果你们是准备专门搞前端,那么最好还是学一下的.　　web前端开发需要掌握的技术：　　1.学习html,这个是最简单的,也是最基础的.要熟练掌握div、form table、ul li 、p、span、font这些标签,这些都是最常用的,特别是div和table,div用于布局、table也可以用于布局,但是不灵活,基本 table是用来和数据打交道.　　2.学习css,这里说的css不包括css3,一般我们看到web前端开发工程师的要求里面,有一个会使用css+html 或者 css+div 来进行界面布局,所以css是用于辅助html来布局和展示的,我们称之为“css样式”,为什么会说css+div呢?因为我上面说了div就是 html主要用于布局的东西,所以div就是核心掌握的东西!那么css肯定必须要配合div来使用才好.css要熟练掌握float、position、width、height，以及对于的最大最小、会使用百分百、overflow、margin、padding等等,这些都是跟布局有关系的样式,一点要掌握.　　3.学习js. 可能前两个大家觉得还过的去,看到js就蛋疼了,其实吧,js入门很简单的,不需要会很多东西的,只要会根据某个id、或者name拿到网页dom或者样式、或者值,然后会给某个id或者name的元素标签赋值、或者追加数据、追html,这个是跟数据有关系的操作,然后数据逻辑判断,效果方面的,无非就是跳转、弹框、隐藏什么的,把这些全部结合其他就是实际用途了,代码一点都不难,会了这些基础js,其他的直接百度就好了.然后看多了,用多了,就什么都不是问题了.　　4.学习jquery.jquery是相当于把js封装了一套的一个js插件,目的就是操作起来更方便,代码写的更少,jquery入门也很简单,那些是入门需要学的和js一样,只是换成了jq的代码.其他的一样百度就够了.　　5.最好会点后台语言,比如java、php,为什么呢?因为我们前台界面的数据都是从后台来的,如果会点后台代码,就知道怎么跟后台交互数据是最好的, 这样节约时间,也可以让前端代码更规范.不然可能因为你的写法和后端给来的数据不能结合上,那么前端代码又得重新写,那就更蛋疼了.　　6.学习css3+html5,为什么这个放最后呢?哈哈,因为我自己也不太会,毕竟术业有专攻嘛,虽然这个很流行,但是我是搞后端的,在工作中用不到它,只有在自己网站需要改样式,或者朋友网站样式出问题的时候,我才会去临时去研究下.但是如果你们是准备专门搞前端,那么最好还是学一下的.