网站前端开发

网站前端开发（精选3篇）

网站前端开发 篇1

1 网站前端开发技术分析

1.1 HTM L语言

HTM L (Hypertext M arkup Language) 是指超文本标记语言, 是制作网页必须使用的语言, 也是构成网页文件的主要语言。HTML语言是一种标记语言, 由一系列的标记组成, 他通过标记来格式化各种页面元素, 某个标记可以使他所标记的内容具有某种格式或特征, 从而使得页面可以按照需要的格式呈现。

HTM L网页文件需要在网页浏览器中打开, 这种程序需要网页浏览器解释执行, 各种网页浏览器都可以完美的支持HTML语言, 所以用HTML语言制作的网页可以供使用各种浏览器的用户浏览。

1.2 CSS样式表

随着Internet应用越来越普及, 对Internet程序的要求越来越高, 而Internet程序一般都是做成网站形式, 所以就对网站制作技术有了更高的要求, CSS就是为了弥补HTM L的不足而出现的。CSS (Cascading Style Sheet) 是指层叠样式表, 他不是一种语言, 由一系列的属性组成, 他通过属性来格式化各种页面元素, 某些属性可以使他所作用的内容具有某些格式或特征, 从而使得页面可以按照需要的格式呈现。

在网页中嵌入CSS代码有三种方法: (1) 直接在需要使用CSS样式的标记中添加CSS代码。 (2) 在STYLE标记中添加CSS代码。 (3) 在外部样式表文件中添加CSS代码。

1.3 客户端脚本语言

HTM L和CSS都是进行页面布局的技术, 他们只能对页面进行格式化, 要想使页面具有动态效果、能够与用户交互, 就需要在页面上编写程序, 这就促使了客户端脚本语言的出现。客户端脚本语言是编写嵌入到网页中的一段一段独立程序的编程语言。客户端脚本语言有JavaScript和VBScript两种, 目前常用的客户端脚本语言是由Netscape公司开发的JavaScript。通过在网页上嵌入由JavaScript编写的程序, 可以使得页面内容或格式根据设置的条件或用户的操作发生变化, 从而实现页面的动态效果。

在网页中嵌入客户端脚本有三种方法: (1) 直接在需要使用脚本的标记中添加脚本。 (2) 在SCRIPT标记中添加脚本。 (3) 在外部脚本文件中添加脚本。

2 网站前端开发技术对网站性能的影响

2.1 HTM L语言对网站性能的影响

2.1.1 HTM L文档大小

用HTML语言编写的网页保存起来是一个以“html”为扩展名的文本文件, 一般把它称作HTML文档。该文件会占用一定的存储空间, 当用户请求该文件时, 该文件需要被从服务器端下载到客户端, 这就需要占用网络带宽, 下载过程需要一定的时间。在相同网速下, HTML文档越小, 下载所需要的时间就越短, 用户的等待时间就越短, 网站前端性能就越好。

2.1.2 网页图片的数量

为了美观, 网页上都需要使用图片, 图片是通过HTM L语言的“IM G”标记插入的, 但是图片文件本身并不在HTML文档中, 而是一个单独的图片文件, 通过“IMG”标记调用到页面上。因此, 当用户请求一个HTML文档时, HTML文档本身和网页上调用的图片文件是被分别下载到客户端的, 每一个单独文件的下载都需要一个HTTP请求, 每一个HTTP请求连接的建立都需要时间。所以, 一个页面上图片越多, 所需要的HTTP请求数量就越多, 下载所需要的额外时间越长。

2.1.3 网页图片缓存

HTM L文档中调用的图片可以被浏览器缓存到客户端, 当用户再次请求同一个HTML文档时, 这些被缓存的图片就不需要再次下载, 从而减少HTTP请求的数量, 同时减少HTTP响应的大小, 进而减少用户的等待时间, 提高网站前端的性能。

2.2 CSS样式表对网站性能的影响

2.2.1 样式表的数量

一般在一个HTML文档中可以加载多个样式表文件, 类似于HTML文档中引用的图片, 当用户请求一个HTM L文档时, HTM L文档和样式表文件被分别下载到客户端, 每一个文件的下载都需要一个HTTP请求, 每一个HTTP请求连接的建立都需要时间。所以, 一个HTM L文档中样式表越少, 所需要的HTTP请求数量就越少, 下载所需要的额外时间越短。

2.2.2 样式表缓存

HTM L文档中加载的样式表文件可以被浏览器缓存到客户端, 当用户再次请求同一个HTML文档时, 这些被缓存的样式表文件就不需要再次下载, 从而减少HTTP请求的数量, 同时减少HTTP响应的大小, 进而减少用户的等待时间, 提高网站前端的性能。

2.2.3 样式表位置

HTM L文档中对样式表文件的加载既可以放在文档的顶部, 也可以放在文档的底部, 将样式表文件的加载放在文档的底部会阻止页面的逐步呈现, 而将样式表文件的加载放在文档的顶部会使页面逐步呈现。而页面的逐步呈现可以避免出现屏幕空白, 为用户提供可视化回馈, 用户可以立即看到页面的部分内容, 从而使用户在感觉上觉得网页的加载速度变快。

2.2.4 CSS表达式

CSS表达式是动态设置CSS属性的一种方法, IE5之后的浏览器都支持这种方式, 其通过expression方法将JavaScript表达式的值设置为CSS属性的值, 其用法如下:

CSS属性:expression (JavaScript表达式)

在页面呈现、页面大小改变、页面滚动或鼠标在页面上移动时, CSS表达式都要重新求值, 这种对CSS表达式的重复求值需要消耗一定的系统资源, 需要一定的时间, 这就使得CSS表达式的性能比较底下, 在页面中使用CSS表达式就会降低网站前端的性能。

2.3 客户端脚本对网站性能的影响

2.3.1 客户端脚本的数量

一般在一个HTML文档中可以加载多个客户端脚本文件, 类似于样式表的数量, 当用户请求一个HTML文档时, HTML文档和客户端脚本文件被分别下载到客户端, 每一个单独文件的下载都需要一个HTTP请求, 每一个HTTP请求连接的建立都需要时间。所以, 一个HTM L文档中客户端脚本越多, 所需要的HTTP请求数量就越多, 下载所需要的额外时间越长。

2.3.2 客户端脚本缓存

HTM L文档中加载的客户端脚本文件可以被浏览器缓存到客户端, 当用户再次请求同一个HTML文档时, 这些被缓存的客户端脚本文件就不需要再次下载, 从而减少HTTP请求的数量, 同时减少HTTP响应的大小, 进而减少用户的等待时间, 提高网站前端的性能。

2.3.3 客户端脚本位置

HTM L文档中对客户端脚本文件的加载既可以放在文档的顶部, 也可以放在文档的底部, 将客户端脚本文件的加载放在文档的顶部会带来两个方面的问题。一是脚本的执行会阻止页面组件的并行下载, 这使得页面组件的下载速度变慢;二是这会阻止脚本以下的内容的逐步呈现, 造成屏幕空白, 从而使用户在感觉上觉得网页的加载速度变慢。

2.3.4 客户端脚本大小

客户端脚本文件是一个以“js”为扩展名的文本文件, 当用户请求使用客户端脚本文件的HTML文档时, 客户端脚本文件会被从服务器端下载到客户端, 下载过程需要一定的时间。客户端脚本文件越小, 下载所需要的时间就越短, 用户的等待时间就越短, 网站前端性能就越好。

3 网站前端开发应遵循的技术规范

3.1 HTM L语言方面应遵循的技术规范

3.1.1 压缩HTM L文档

HTM L文档越小, 网站前端的性能越好, 那么我们就可以对HTML文档进行压缩, 使在网络上传输的HTML文档变小, 从而节约HTML文档的下载时间, 提高网站前端性能。从HTTP1.1开始, Web浏览器和服务器就开始支持压缩, 常用的压缩方法是gzip。

3.1.2 合并图片

网页上图片的数量越少, 一个页面上HTTP请求的数量就越少, 网站前端的性能就越高。我们可以通过合并页面上的图片来达到减少网页上图片数量的目的, 常用的合并图片的方法有图片地图和CSS Sprites两种。

3.1.3 对图片使用缓存

将网页中的图片在其第一次被访问时缓存在客户端可以减少HTTP请求的数量, 提高网站前端的性能。Web服务器可以使用expires头指定图片的有效期, Web浏览器可以在图片的有效期内使用缓存在客户端的图片, 而不用重新从服务器端下载该图片。

3.2 CSS样式表方面应遵循的技术规范

3.2.1 合并样式表文件

网页上样式表文件的数量越少, 一个页面上HTTP请求的数量就越少, 网站前端的性能就越高。我们可以通过合并页面上的样式表文件来达到减少网页上样式表文件数量的目的。

3.2.2 对样式表文件使用缓存

将样式表文件缓存在客户端可以减少HTTP请求的数量, 提高网站前端的性能。Web服务器可以使用expires头指定样式表文件的有效期, Web浏览器可以在样式表文件的有效期内使用缓存在客户端的样式表文件, 而不用重新从服务器端下载该样式表文件。

3.2.3 将样式表文件放在顶部

页面的逐步呈现可以避免出现屏幕空白, 用户可以立即看到页面的部分内容, 从而使用户觉得网页的加载速度变快。我们可以将样式表文件放在页面的顶部, 从而使页面逐步呈现。

3.2.4 避免CSS表达式

CSS表达式的重新求值会降低网站前端的性能, 我们可以通过避免在网页中使用CSS表达式来提高网站前端的性能, 可以通过一次性表达式或事件处理器来代替CSS表达式。

3.3 客户端脚本方面应遵循的技术规范

3.3.1 合并脚本文件

网页上脚本文件的数量越少, 一个页面上HTTP请求的数量就越少, 网站前端的性能就越高。我们可以通过合并页面上的脚本文件来达到减少网页上脚本文件数量的目的。

3.3.2 对脚本文件使用缓存

将脚本文件缓存在客户端可以减少HTTP请求的数量, 提高网站前端的性能。Web服务器可以使用expires头指定脚本文件的有效期, Web浏览器可以在脚本文件的有效期内使用缓存在客户端的脚本文件, 而不用重新从服务器端下载该脚本文件。

3.3.3 将脚本放在底部

将脚本放在页面底部可以避免脚本阻止页面组件的并行下载和页面的逐步呈现, 从而提高页面组件的下载速度, 缩短页面的加载时间, 提高网站前端的性能。

3.3.4 精简JavaScript

为了使JavaScript文件尽量小, 可以通过精简的方式来移除代码中注释、空白字符等不必要的字符, 进而缩短加载时间, 提高性能。常用的精简JavaScript文件代码的工具有JSMin和ShrinkSafe两个。

参考文献

[1]雷海卫, 张萍.网页制作中静态页生成技术的研究.电脑开发与应用, 2007 (05) .

[2]邓小善, 龙艳军.高访问量网站性能监测与优化的设计与实现, 现代计算机 (专业版) , 2009 (02) .

[3]张徽燕, 张胡.动态Cache技术在网站性能设计中的应用.电脑知识与技术, 2006 (12) .

网站前端开发 篇2

【关键词】个人网站HTML5CSS3Javascript

随着互联网的发展，网络上的网站数量越来越多。个人网站的数量也与日俱增。一个好的网站不仅要保证有着良好的性能，同时页面的前端设计也得非常的优秀。一个良好的前端设计往往包含了合理的配色，清晰的页面结构，流畅的动画。随着个人网站的发展，也催生出来很多优秀的博客程序，比如：《WordPress》、《Typecho》等等。那么应如何设计个人网站的前端呢？

1设计语言

1.1HTML5

HTML5是HTML最新的修订版本，2014年10月由万维网联盟完成标准制定。目标是替换1999年所制定的HTML4.01和XHTML1.0标准，以及能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务，例如：AdobeFlash、MicrosoftSilverlight与OracleJavaFX的需求，并且提供更多能有效加强网络应用的标准集。

1.2CSS3

层叠样式表（CSS），又称串样式列表、级联样式表、串接样式表、层叠样式表、阶层式样式表，一种用来为结构化文档添加样式的计算机语言，由W3C定义和维护。CSS3现在已被大部分现代浏览器支持。

CSS3分成了不同类别，称为“modules”。而每一个“modules”都有于CSS2中额外增加的功能，以及向后兼容。CSS3早于1999年已开始制订。直到2011年6月7日，CSS3ColorModule终于发布为W3CRecommendation。CSS3里增加了不少功能，如：“border-radius”、“text-shadow”等。

1.3JavaScript

一种高级编程语言，通过解释执行，是一门动态类型，面向对象的直译语言。它已经由ECMA通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器支持。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本，数组，日期以及正则表达式等，不支持I/O，比如网络，存储和图形等，但这些都可以由它的宿主环境提供支持。随着最新的HTML5和CSS3语言标准的推行它还可用于游戏、桌面和移动应用程序的开发和在服务器端网络环境运行。

2开发工具

SublimeText是一套跨平台的文本编辑器，支持基于Python的插件。SublimeText是专有软件，可通过包扩充本身的功能。大多数的包使用自由軟件授权发布，并由社区建置维护。SublimeText支持众多编程语言，并支持语法上色。

MozillaFirefox，中文俗称火狐，是一个自由及开源的网页浏览器，由Mozilla基金会及其子公司Mozilla公司开发。Firefox支持Windows、OSX及Linux，其移动版支持Android及FirefoxOS，这些版本的Firefox使用Gecko来排版网页，Gecko是一个运行当前与预期之网页标准的排版引擎，而在2015年发布的FirefoxforiOS则非使用Gecko。

3网站前端设计

3.1站点架构

首先确认了整体页面是由左右两个DIV组成，并提供一个按钮，可以按下后隐藏左边的DIV以达到只显示右边的DIV的正文的目的。为left和right两标签加上内容，并美化其页面。

3.2页面设计

作品页面主要用于存放一些作品的demo，所以设计成了几个div以格子的形式排列，并在上面能够显示作品的预览。整体的页面框架依旧沿用首页，以达到站点整体风格的统一和css的最佳化利用，并减少开发过程。

3.3加入动画，添加特效

例如显示悬浮到容器上的阴影渐变的效果如下：

给容器设置box-shadow属性，值为2px2px20px#909090；再给这个容器设置hover版本的css，设置为box-shadow：2px2px70px#707070；给容器设置transition属性，值为2s；

使用html默认支持hover属性来切换两套写好的css3阴影代码来实现阴影效果的切换，再使用transition属性设置动画的播放时间以达到更美观的效果。

3.4其他效果

例如使用了highlight.js，用于给生成的代码块添加高亮和排版效果。

4总结

前端开发心得 篇3

从事前端开发工作1年多了，从最初的DIV+CSS学起，到现在学到html5、css3、javascript，jquery等等，我觉得前端要学的技术太多了，很多人认为前端开发要掌握的技能简单，就是网页制作，其实不然，前端开发是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本是HTML5、CSS3，以及SVG等。JavaScript作为最难的语言之一，许多编程高手也不敢妄自菲薄、自封精通。

关于兼容性的问题我相信对于每个做前端开发的人来讲是一个很头疼的问题，互联网目前主流浏览器有IE6789，Firefox，Chrome，Opera，Safari，遨游，包括国内主流的搜狗，腾讯 TT，360等等；从内核上讲主要有IE的，遨游版IE，safari，firefox以及opera的，这些都是大家常见的。所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，用户用什么浏览器来查看同一网站，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。这个时候就需要针对不同的浏览器写不同的CSS，这个过程叫CSS hack。虽然我们写代码都要求按照标准，不写hack代码，但实际工作中为了兼容主流浏览器，hack代码是免不了的，所以这也应该是每个前端开发人员必备的技能。

前端的开发工具很多，比较常见的有Dreamweaver，Notepad，webstrom，Sublime Text等等，我现在在使用webstorm，强大的提示功能可以帮助我们很快的熟悉并掌握网页布局,检查错误等。调试代码的工具我使用的Firebug。Firebug是网页浏览器Mozilla firefox 下的一款开发类插件，它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。Firebug也是一个除错工具。用户可以利用它除错、编辑、甚至删改任何网站的CSS、HTML、Dom 以及Javascript代码。