web项目前端开发经验总结

2024-09-29

web项目前端开发经验总结（精选5篇）

1.web项目前端开发经验总结篇一

WEB前端开发经验总结1 结构，结构，刚才我提到了标签有块级元素和行内元素之分的，要是不理解好这两个概念，我们也不会很好的了解怎么合理的结构化页面，现在就来介绍它们：

块级元素

块级元素生成一个元素框，（默认地）它会填充其父级元素的内容，旁边不能有其他元素。换句话说，他在元素框之前和之后生成了“分隔”符。我们最熟悉的HTML元素是p和div.行内元素

行内元素在一个文本行内生成元素框，而不会打断这行文本。行内元素最好的例子就是XHTML中的a元素。strong和em也属于行内元素。这些元素不会在它本身之前或之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不会破坏其显示。

注意，尽管“块”和“行内”这两个词与HTML和XHTML中的块级和行内元素有很多共同点，但也存在一个重要的差别。在HTML和XHTML中，块级元素不能继承自行内元素（即不能嵌套在行内元素中）。但是CSS中，对于显示角色如何嵌套不存在任何限制。

恩，还是不能把CSS跟XHTML完全的分开谈，没办法。现在大家了解了什么是块级元素和什么是行内元素了吧。还是回过头来接着说我们的结构化吧，以上讲了这么多，我都是在讲XHTML标签要结构化，所以基本跟CSS关系不大，那么我们下面看看我写的这个页面的代码在没有CSS的情况想，是否结构清晰吧：

看看，页面是不是依旧很清晰，很容易看出，哪里是标题，哪里是导航，哪里是搜索表单？呵呵，其实我这么给大家看的页面，跟我们的搜索引擎查看页面的结构很接近了，到这里大家可能体会到一些搜索引擎友好的意思了吧？

其实让我们看看这个页面的DOM数状图，可能我们对一个简洁合理的结构化布局的页面有更直观的了解。

看看，是不是做到了我说的：XHTML标签充分的语意化、尽量少的嵌套、页面里基本只显示用户需要看的数据、对搜索引擎友好（没有CSS支持时，浏览页面时同样清晰，层次分明，十分容易查看的数据。），已做了基本的SEO优化

呵呵，说到这里我才回答了“怎样的一个页面才算是合理的布局的呢？”，做到上面4点，我个人觉得这个页面就已经做到了合理布局。而至于说要通过W3C的XHTML语法验证，只是很基础的开始。一个通过验证的页面和一个合理布局的页面是两码事的。这里我再罗嗦一下，我一直都在说的是个人认为如何才算是一个合理布局的页面？要达到什么要求才能算合理布局？因为只有理解了这个，之后的CSS的技巧（浏览器的兼容处理等）都是围绕着让XHTML页面布局更合理来进行的。而不是单纯做到各个浏览器下都显示正常（一致）。所以请记住在开发时做到：

1.XHTML标签充分的语意化 2.尽量少的嵌套

3.页面里基本只显示用户需要看的数据（我们用CSS直接控制用户需要看的数据的显示的样式）

4.页面对搜索引擎友好（没有CSS支持时，浏览页面时同样清晰，层次分明，十分容易查看数据。），已做了基本的SEO优化

今天就谈到这里吧，下面我们会接着讨论CSS的处理技巧。

2.web项目前端开发经验总结篇二

1 Web前端技术概述

1.1 Web前端技术概念

Web前端技术包括三个主要的因素:HTTL、CSS、Java Script.这三者之间虽然相互存在一定的关联, 但是在实际的运用过程中都具有自身的特点, 对代码质量的要求也存在一定的差异性。HTTL技术可以对超文本的结构进行一定的探索, 使得超文本语言在结构上更加完整, 将一些过时的标记及时取消, 内容和形式分离, 进行技术结构的改进之后, 生成的网页更加易于管理, 可提升用户体验。CSS, 即层叠样式表技术是用于增强网页样式的控制, 为相关的信息和网页的分析提供一定的允许条件, 是一种标记性的语言。这项技术的发展可以促进网页速度的提升, 对板块的维护和改善也具有一定的促进作用。Java Script技术则介于Java技术和HTTL技术之间, 在web的页面起着一定的嵌入作用, 对页面中的对象和事件进行一定的编程。这种技术出现之后, 信息和用户之间的关系不仅仅是简单的显示和浏览的关系, 同时可以将实时、动态的数据进行一定的表达。Java Script可以和HTML技术进行结合, 通过其在文件中的嵌入, 将不需要进行整理的技术进行一定的响应, 使得网页可以更好的与客户进行分析, 而不需要经过web技术对客户进行交流, 减少服务器的压力。

1.2 web技术的开发现状

Web技术的入门较为容易, 门槛较低, 与计算机编程先难后易相反, 因此在实际的工作中, 技术人员可以通过自主学习掌握一定的知识, 从事Web技术的研发工作。因此, IT技术人员从这一方面入门具有一定的优越性, 但是这样的情况会造成技术人员停留在技术开发的初期阶段, 对于后续的各项系统的优化技术能力存在严重的不足, 造成Web技术的开发和使用不能很好的进行。同时, 因为新型技术不断的出现, 作为一种新型的技术, 一些规范和规定还处在不断的探索阶段, 总是有新型的技术和设备不断的涌现出来, 为Web技术的发展带来巨大的活力, 在这样的背景下, 对从业人员来讲也面临着巨大的挑战。怎样在进行技术开发中维护保持创新性, 在技术的研发工作中进行一定的创新是现阶段Web技术开发中需要面临的问题。在技术的革新和进步方面技术人员需要进行一定的自我完善。

2 Web技术开发注意事项

在进行Web技术的开发中, 需要对其的设计和服务更加完善的表现出来, 但是仅仅是网页的完善性还不能达到现阶段经济的发展要求。因此, 要采用一定的方式对技术进行优化。

2.1 减少HTTP的请求

在对Web技术进行优化的过程中, 这个策略是最有效的。一个完整的请求包括DNS的寻址、建立和服务器的连接。发送相关的数据以及进行服务器数据的等待。数据的接收和等待过程需要的时间较长。用户在等待的过程中对一些按钮进行点击就会使服务器发送请求, 这样就会造成存储空间的增加和后台程序的超负荷运作。而且浏览器在运行的过程中发送请求的限额是一定的, 如果用户持续的发送请求, 就会占用其他的宽带空间, 当浏览器发送的请求超出最大的限额时, 就需要分批的进行处理, 使用户等待的时间延长, 造成恶性循环, 将原本的请求覆盖掉。因此需要对请求进行减少, 主要的方法是进行合并文件的操作, 将CSS文件和Java Script文件进行合并, 节省空间。将图片进行分散处理, 将不同的图片进行不同的连接, 分散数据、将图像进行内部的关联, 让图像和文字同时进行显示, 节省请求的次数。

2.2 压缩文件

进行Web技术的开发, 需要对数据进行压缩, 包括对Java Script压缩和对CSS文件代码进行优化。进行数据的压缩可以将文件数据的传输速度进行加速, 同时还可以保证文件整体的安全性和稳定性, 尽量避免出现文件丢失的情况。

2.3 对样式表进行改善

在进行层叠样式的覆盖中, 后面的数据自动的覆盖到前面的数据中, 高级别的CSS可以对低级别的进行覆盖, 对浏览器进行渲染, 因此在进行使用的过程中需要将数据进行整体的控制, 尽量的在数据全部加载完成以后进行操作, 这样可以获得最新的数据, 并将数据进行合理的分析, 减少页面中一些空白页面的出现, 让用户可以看到准确完整的信息, 减少刷新的次数。

2.4 将script放在底部

在进行Web优化的过程中需要将script放在底部进行操作, 这样可以规避脚本执行中的问题, 防止脚本进行阻塞的下载, 从而提升页面组建的下载速度和页面的加载时间, 对于不能下载的页面直接不进行加载, 减少不必要的请求, 提升加载速度。

2.5 减少DNS查询

一次DNS的解析过程会消耗20-120毫秒的时间, 在DNS查询结束之前, 浏览器不会下载该域名下的任何东西。所以减少DNS查询的时间可以加快页面的加载速度。

2.6 避免重定向, 杜绝http 404错误

进行页面的重新加载需要一定的时间。在发生重定向的过程中需要耗费一定的时间, 发生重定向的因素较多, 每一次重定向的增加都会增加此Web请求, 因此在进行Web技术开发的过程中, 应该将重定向的的请求进行减少。

404错误是因为未找到文件引起的。HTTP请求会消耗很多时间, 所以用HTTP请求来获得一个无用的响应 (例如404未找到页面) 毫无必要, 只会降低用户体验。对页面链接的充分测试和对Web服务器error日志的不断跟踪可以有效减少404 错误。

3 Web前端开发技术优化

3.1 HTTP请求的优化措施

在进行请求优化的过程中, 需要技术开发人员对DNS信息寻找、浏览器的开发和服务器之间的连接以及数据的传输和数据的传输等方面进行分析, 因为每一条技术的实现都会占据一定的时间和空间, 如果占据的空间太多, 就会给网页的使用带来不便, 使得网页的反映速度和反映时间过长, 导致网页的使用效果大打折扣。因此进行Web技术革新的过程中需要将请求进行优化的管理, 通过一定的技术手段将文件和内容进行合并整理, 对于一个请求就能实现的数据搜索绝对不能让其通过几个请求完成。工程师对这一方面的技术要进行严格的控制, 尽量的将页面进行优化, 是页面完整有效饿的出现在客户的使用中而不是出现乱码或者是页面无法显示的现象, 造成用户请求的增加, 增加用户的负担。

3.2 对文件进行规模化的处理

在进行文件的规模化处理中, 需要对文件进行一定的归档和一定的梳理, 这一方面主要是对Java Script和CSS文件以及对应的代码展开优化。优化的过程是对不必要的html标签进行剔除优化, 以及避免内联式样式存在, 此外, 对于CSS代码优化同样也是这一方面工作的重点内容。

3.3 对内容进行优化

对于这一方面的工作来讲, 其主要是根据CSS自身具有的覆盖功能来实现的, 将样式表放在顶部的同时将脚本放在底部, 这样的形式可以把网页中一些不需要的数据进行一定的覆盖。在数据加载完成以后, 出现一些数据优化的项目, 在网速不好的情况下可以将重要的数据进行显示, 用户对于数据的重视程度是超过相关网页的美化项目的。如果重要的数据出现了, 那么用户对其他的信息的关注度就较低, 可以避免出现重复刷新的情况。因此要将文件源的连接方式进行改进, 避免出现重定向的现象, 重定向耗费大量的时间, 其主要是因为对文件的分类不合理而造成, 在进行网页的使用中, 如果进行重定向就会浪费大量的时间。

3.4 加强对工程师的技术提升

工程师是进行网页管理的重要组成部分, Web技术工程师在现代社会具有较多的资源, 但是自学成才的占据较大部分, 前期的学习也较为简单。但是要想在实际的工作中进行完善的设计和技术性较高的设计, 则会遇到一定的困难, 造成一定的问题, 导致对质量较高的Web设计无法完成。因此在进行工作的过程中需要对技术人员的基本素质进行提升, 定期进行技术培养。提升技术人员自身专业素质, 对于Web的设计具有重要的促进作用。

4 结语

从计算机互联网络的发展到现在各项先进技术的发展, Web技术已经成为人们日常生活中必不可少的一部分, 在交互的使用和系统调节能力以及富媒体技术的研发方面具有重要的作用, 使得用户在不用安装插件的情况下就能对Web进行浏览。Web前端技术在使用中涵盖的知识面较为广泛, 既包括一定的抽象思维和理念, 又包括现实的数据分析, 对技术有一定的要求, 同时还要给用户的使用带来全新体验。在今后的发展中, 应该将Web技术和原生应用都进行一定的发展, 使其共同的对互联网的应用系统进行运用。随着未来科技不断进步, 技术人员应该积极的应对和解决Web前端开发中面临的问题, 使其更快的发展。

摘要：Web前端开发是近几年兴起的技术, 其主要包括HTTL、CSS和Java Script, 可以在实际的应用中促进网站性能优化, 推动SE和服务器终端基础知识的普及, 而且运用各种工具进行辅助开发以及理论层面的知识, 进行包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级进行支持。文章主要针对Web前端开发技术进行分析。

关键词：Web,前端开发,技术分析

参考文献

[1]魏娜.Web前端开发技术研究[J].现代计算机 (专业版) , 2011 (29) :50-52.

[2]杨毅.Web前端开发技术探讨[J].电脑知识与技术, 2014 (23) :5458-5459.

[3]王政.Web前端开发技术以及优化研究[J].电脑知识与技术, 2013 (22) :5037-5038.

[4]赵大伟, 陈刚.Web前端开发技术人才培养模式研究[J].电脑知识与技术, 2015 (24) :109-110.

3.Web前端开发笔试题篇三

一．单选题

1. 华章汉辰 Div里的字体的颜色是：（）

A:红色B:蓝色 C:绿色

D:黄色 2.CSS样式表根据所在网页的位置，可分为?()

A．行内样式表、内嵌样式表、混合样式表 B．行内样式表、内嵌样式表、外部样式表 C．外部样式表、内嵌样式表、导入样式表 D．外部样式表、混合样式表、导入样式表

3..在CSS中下面哪种方法表示超链接文字在鼠标经过时，超链接文字无下划线?()

A.A:link{TEXT-DECORATION: underline } B.A:hover {TEXT-DECORATION: none} C.A:active {TEXT-DECORATION: blink } D.A:visited {TEXT-DECORATION: overline } 4..下面代码片段，说法正确的是:().DIV1 { position:absolute;line-height:22px;height:58px;background-color: #FF0000;} A.Line-height:22px;修饰文本字体大小

B.position:absolute;表示绝对定位，被定位的元素位置固定 C.height:58px;表示被修饰的元素距离别的元素的距离