论文部分内容阅读
在Web 1.0时代只有网页制作，网站的内容还只是静态的，用户上网也只是为了获取信息。在2005年以后，Web2.0时代来临，网页制作发展为Web前端开发，主要是网站开发、优化以及完善的工作，通过运用HTML、CSS等技术让网站呈现的页面更加的美观，网站功能更加强大。各种IT企业例如腾讯、淘宝等都因此进行了网站重构，由前端技术驱动代替数据展现驱动，网站重构的影响力正以惊人的速度增长。
一、Web前端开发技术
进行Web前端开发技术时主要运用HTML、CSS、Ajax以及文档对象模型等。其中，HTML，CSS，JavaScript是最主要的。这三种语言相互之间有着密切的联系，但是又有各自不同的特点，对于代码的质量要求也不同。
1.HTML和HTML5
HTML是网页制作必备的一种标记语言，也是一种规范，一种标准。HTML是通过标记符号来标记要显示的网页中的各个部分，也是网页的本质，它通过结合使用其他的包括脚本语言、公共网关接口等Web技术可以创造出功能强大的网页。因而，我们说HTML是Web编程的基础。HTML有以下几个特点：第一，简易性。因为它采用的是超集方式，所以在Web前端开发中会更加的灵活方便;其次，扩展性。HTML的应用带来了加强的功能，增加了标识符等要求，为系统扩展带来了保证;第三，通用性。正是因为这些特点，HTML才成为Web前端开发技术。
而HTML5是Web中核心语言HTML的规范。通过HTML5生成的网页相比较而言，更便于管理，在结构上更加的清楚和明确，它在结构上取消了一些过时的标记，分离了一些内容和展示，整个页面更加的干净，提高了用户的体验感。同时在如今的互联网时代，移动设备端成为了主流，HTML5在移动设备端中的优势更加明显，更加有利于Web的前端开发。
2. 层叠样式表
层叠样式表也就是CSS，英文全称是Cascading Style Sheets CSS，是第一个含有“层叠”丰意的样式表语言，这种层叠的方式可以加入设计者甚至用户的想法，在设计时具有独特性和丰富性。CSS主要有以下几个优点：（1）减少页面代码，提高页面浏览的速度;（2）强大的字体控制能力和排版能力。（3）更好的控制页面布局，表现和内容相分离，可以减少未来网页无效的可能。（4）更方便搜索引擎的搜索。（5）缩短改版时间，降低维护费用。（6）可以一次设计随处发布。
3.JavaScript
在1995年，由Netscape公司在网景导航者浏览器上首次设计实现而成。JavaScript的出现让信息与用户之间的关系发生了变化，用户不再只是浏览信息，而是可以进行实时的互动，能够自己发布信息，进行可交式的表达。同时，它可以被嵌入到HTML文件中去，在用户浏览网站时不需要经过Web服务器，就可以直接快速的作出响应，减少了服务器端的压力，也减少了用户等待的时间，大大提高了效率。
二、Web前端開发技术的优化分析
一个网站想要取得成功需要具备三个要素：能够吸引用户的美观的页面设计，能够让用户满意的服务功能以及完善的性能与功能。其中，最关键的就是网站的性能与功能。为此，本文就性能方面提出几个前端优化的途径。
1.减少HTTP请求
HTTP请求是一个漫长而且复杂的过程，从DNS寻址到服务器的建立和连接，从数据的发送到服务器的响应以及数据的接收，这些都会消耗很多时间。同时每一个请求都是携带数据的，一个浏览器的请求数量也有上限，因此，整个HTTP请求的效率低下，会占用用户大量的时间，从而影响用户的体验。因此，减少HTTP请求是最重要也是最有效的一条策略，有以下几个途径：（1）合并文件;（2）图片地图;（3）内联图像;（4）CSS Sprites;（5）gzip压缩资源;（6）合并内容型网页的静态资源;（7）合理设置缓存;（8）将复用率低的css和js文件直接写在页面中;（9）对于不易改变的静态文件吗，可将其expires时间设置的较大，将资源的MD5值作为其路径后缀。
2.减少文件的大小
减少文件大小有两个途径：（1）通过压缩JavaScript和CSS文件。（2）去除赘余的HTML标签。（3）进行CSS代码优化和内联式优化
3.改变样式表和script的位置
层叠式样式表中的“层叠”的意思就是一个覆盖一个，在CSS中后面的会覆盖前面的，高级别会覆盖低级别的，将样式表放在顶部可以提高CSS的加载速度。所以在用户进入一个网站时，我们应该尽快将CSS加载完毕，避免屏幕出现空白，让用户可以快速浏览到页面信息。
而在运行过程中，script脚本的执行会影响页面的下载，因此将script放在底部，可以避免这个现象，从而提高页面组件的下载，提高网站的性能。
4.避免重定向
重定向就是将各种网络请求重新定个方向转到其它位置，而每增加一个重定向都会增加一次Web请求，这个工程同样会消耗掉一部分时间。在Web前端技术开发时，减少甚至避免网页的重定向是一个有效且简单的策略，例如在Web的子目录后面加一个“/”就能避免一次重定向，节约一次时间了。
5.减少“404”错误
我相信我们在浏览网页时最常碰到的一个问题就是加载了许久，页面上出来一个“404”，于是对于这个网页好感度尽失。这个“404”的出现是因为浏览器未找到文件，为了减少这个现象的出现，我们需要对页面的链接多次进行测试，对Web服务器进行日常跟踪;检查url是否对应，服务器端口号，映射的url，参数是否对应;检查容器是否初始化，如：注解是否正确，配置文件是否扫描到;检查配置文件，如：web.xml，关键词是否对应，或者有没有写;检查虚拟机，查看ip地址是否正确，以及虚拟机是否开启等这些措施都能够有效的减少“404”错误，提高用户好感。
结语
互联网络的发展是离不开Web的，而Web前端技术开发也一直在发展与创新的道路上，例如HTML5，XHTML这一系列新的技术。未来系统Web运行环境将成为新的标准化应用承载平台，与原有应用进行取其精华，去其槽粕，共同构成一个全兴的应用生态系统，促进移动互联网的发展。
参考文献
[1]陈月，秦福建. Web前端开发技术以及优化方向探究[J].信息与电脑（理论版），2016（4）：35-35.
[2]陈鲱. Web前端开发技术以及优化方向分析[J].新媒体研究，2015（3）：39-40.
[3]许舟鸿. Web前端开发技术以及优化方向探究[J].信息与电脑（理论版），2017（8）：33-34.
一、Web前端开发技术
进行Web前端开发技术时主要运用HTML、CSS、Ajax以及文档对象模型等。其中，HTML，CSS，JavaScript是最主要的。这三种语言相互之间有着密切的联系，但是又有各自不同的特点，对于代码的质量要求也不同。
1.HTML和HTML5
HTML是网页制作必备的一种标记语言，也是一种规范，一种标准。HTML是通过标记符号来标记要显示的网页中的各个部分，也是网页的本质，它通过结合使用其他的包括脚本语言、公共网关接口等Web技术可以创造出功能强大的网页。因而，我们说HTML是Web编程的基础。HTML有以下几个特点：第一，简易性。因为它采用的是超集方式，所以在Web前端开发中会更加的灵活方便;其次，扩展性。HTML的应用带来了加强的功能，增加了标识符等要求，为系统扩展带来了保证;第三，通用性。正是因为这些特点，HTML才成为Web前端开发技术。
而HTML5是Web中核心语言HTML的规范。通过HTML5生成的网页相比较而言，更便于管理，在结构上更加的清楚和明确，它在结构上取消了一些过时的标记，分离了一些内容和展示，整个页面更加的干净，提高了用户的体验感。同时在如今的互联网时代，移动设备端成为了主流，HTML5在移动设备端中的优势更加明显，更加有利于Web的前端开发。
2. 层叠样式表
层叠样式表也就是CSS，英文全称是Cascading Style Sheets CSS，是第一个含有“层叠”丰意的样式表语言，这种层叠的方式可以加入设计者甚至用户的想法，在设计时具有独特性和丰富性。CSS主要有以下几个优点：（1）减少页面代码，提高页面浏览的速度;（2）强大的字体控制能力和排版能力。（3）更好的控制页面布局，表现和内容相分离，可以减少未来网页无效的可能。（4）更方便搜索引擎的搜索。（5）缩短改版时间，降低维护费用。（6）可以一次设计随处发布。
3.JavaScript
在1995年，由Netscape公司在网景导航者浏览器上首次设计实现而成。JavaScript的出现让信息与用户之间的关系发生了变化，用户不再只是浏览信息，而是可以进行实时的互动，能够自己发布信息，进行可交式的表达。同时，它可以被嵌入到HTML文件中去，在用户浏览网站时不需要经过Web服务器，就可以直接快速的作出响应，减少了服务器端的压力，也减少了用户等待的时间，大大提高了效率。
二、Web前端開发技术的优化分析
一个网站想要取得成功需要具备三个要素：能够吸引用户的美观的页面设计，能够让用户满意的服务功能以及完善的性能与功能。其中，最关键的就是网站的性能与功能。为此，本文就性能方面提出几个前端优化的途径。
1.减少HTTP请求
HTTP请求是一个漫长而且复杂的过程，从DNS寻址到服务器的建立和连接，从数据的发送到服务器的响应以及数据的接收，这些都会消耗很多时间。同时每一个请求都是携带数据的，一个浏览器的请求数量也有上限，因此，整个HTTP请求的效率低下，会占用用户大量的时间，从而影响用户的体验。因此，减少HTTP请求是最重要也是最有效的一条策略，有以下几个途径：（1）合并文件;（2）图片地图;（3）内联图像;（4）CSS Sprites;（5）gzip压缩资源;（6）合并内容型网页的静态资源;（7）合理设置缓存;（8）将复用率低的css和js文件直接写在页面中;（9）对于不易改变的静态文件吗，可将其expires时间设置的较大，将资源的MD5值作为其路径后缀。
2.减少文件的大小
减少文件大小有两个途径：（1）通过压缩JavaScript和CSS文件。（2）去除赘余的HTML标签。（3）进行CSS代码优化和内联式优化
3.改变样式表和script的位置
层叠式样式表中的“层叠”的意思就是一个覆盖一个，在CSS中后面的会覆盖前面的，高级别会覆盖低级别的，将样式表放在顶部可以提高CSS的加载速度。所以在用户进入一个网站时，我们应该尽快将CSS加载完毕，避免屏幕出现空白，让用户可以快速浏览到页面信息。
而在运行过程中，script脚本的执行会影响页面的下载，因此将script放在底部，可以避免这个现象，从而提高页面组件的下载，提高网站的性能。
4.避免重定向
重定向就是将各种网络请求重新定个方向转到其它位置，而每增加一个重定向都会增加一次Web请求，这个工程同样会消耗掉一部分时间。在Web前端技术开发时，减少甚至避免网页的重定向是一个有效且简单的策略，例如在Web的子目录后面加一个“/”就能避免一次重定向，节约一次时间了。
5.减少“404”错误
我相信我们在浏览网页时最常碰到的一个问题就是加载了许久，页面上出来一个“404”，于是对于这个网页好感度尽失。这个“404”的出现是因为浏览器未找到文件，为了减少这个现象的出现，我们需要对页面的链接多次进行测试，对Web服务器进行日常跟踪;检查url是否对应，服务器端口号，映射的url，参数是否对应;检查容器是否初始化，如：注解是否正确，配置文件是否扫描到;检查配置文件，如：web.xml，关键词是否对应，或者有没有写;检查虚拟机，查看ip地址是否正确，以及虚拟机是否开启等这些措施都能够有效的减少“404”错误，提高用户好感。
结语
互联网络的发展是离不开Web的，而Web前端技术开发也一直在发展与创新的道路上，例如HTML5，XHTML这一系列新的技术。未来系统Web运行环境将成为新的标准化应用承载平台，与原有应用进行取其精华，去其槽粕，共同构成一个全兴的应用生态系统，促进移动互联网的发展。
参考文献
[1]陈月，秦福建. Web前端开发技术以及优化方向探究[J].信息与电脑（理论版），2016（4）：35-35.
[2]陈鲱. Web前端开发技术以及优化方向分析[J].新媒体研究，2015（3）：39-40.
[3]许舟鸿. Web前端开发技术以及优化方向探究[J].信息与电脑（理论版），2017（8）：33-34.