第7期2021年4月No.7April，2021
0    引言
2005年以后，网络进入2.0时代，各类Web 应用大量涌现，网页编程技术也发生了巨大的变化，网页呈现的不再是简单的图文信息，富媒体的使用使网页内容变得更加生动有趣，如今，依靠H5，CSS3，JS 等技术制作的动态网页不但做工优良，画质精美，性能进一步得到优化，与用户之间交互体验也在稳步提升[1]；Web 技术的日新月异得益于用户的广泛和技术的不断进步，前端技术不再局限于桌面浏览器网站的开发，更能够应用于移动端和APP 等关键领域，潜力无限。
1    Web前端开发的核心技术1.1  HTML 语言
HTML 是构成Web 世界的一砖一瓦。它定义了网页内容的含义和结构。作为一种简单标记性语言，其通过不同的标记和属性来定义网页中的各种元素，如文本，图片、动画、声音、表格、超链接等，以实现页面上不同的操作和视觉效果，从而描绘出整个页面的结构和内容[2]。因此，掌握HTML 是学会Web 网站开发的基础和前提。
如今，HTML 已经发展到HTML5，作为一种事实上的Web 标准，在核心内容上，HTML5语言中的标记更多，语义更明确，功能也更加强大，特别适合移动端Web 开发，截至目前，许多优秀的前端框架、Web 网站、混合型APP 的开发都依赖于H5的应用。1.2  CSS 技术
CSS （层叠样式表）是一种专门用来修饰网页外观的语言[3]。
在Web 开发中，CSS 可以帮助实现页面表现与结构相分离的开发模式，它能够控制整个站点所有网页的样式和布局效果，使用CSS 不仅可以静态地美化修饰页面，还可以配合各类脚本语言动态地对网页中的各元素进行美化。
CSS 目前已经发展至CSS3，它在原有的基础上加入了许多新的效果，如border-radius （圆角），box-shadow （阴影），transform （变换），transition （过渡），animation （动画）等，在CSS3出现之前，网页开发人员需要添加许多HTML 的标记、属性和JS 代码来实现一个动态效果，现在通过CSS3一行代码就行了，简单易学，效果十分出众。
1.3 Java Script
JavaScript 是一种具有函数优先的轻量级，解释性的脚本语言。主要是用以向HTML 中添加交互语言，它可以直接嵌入到网页页面，支持跨浏览器、跨平台运行（如
Windows ，Linux ，Mac ，Android ，iOS 等）[4]
。作为一种脚本语言，JavaScript 不需要如同C ，C++一样通过编译器先编译再执行，它可以边执行边解释，然后显示在浏览器上。JavaScript 是Web 前端开发者必学的三种语言之一，HTML 定义网页
的内容和结构、CSS 定义网页的布局和外观，JS 则定义网页的动态行为。
JavaScript 很早就被Netscape 公司提交给ECMA 制定为标准，称之为ECMAScript ，目前已经更新至ECMAScript 6，ECMAScript 6以其跨平台、容易上手等的优势被广泛应用于Web 前端开发之中。同时，有些重要功能（如AJAX 异步发送）由于必须依赖JavaScript 在客户端进行支持而使JS 成为Web 的一种核心技术。2    Web前端开发技术的特点2.1  HTML5语法规范性不强
HTML5语法规范虽然比较严谨，语义也比较明确，界限分明，但在实际使用中却比较灵活，这得益于浏览器对HTML 高超的理解能力，有时即使没有按照规范书写HTML 代码，多数浏览器依然能够正确地解析代码，显示应有的元素效果。
2.2  CSS3中模块清晰
使用CSS3进行网页美化时就会发现，CSS 语法规则相对简单，易于上手，模块划分非常清晰，技术成熟稳定，显示效果俱佳。
2.3 学习使用的门槛比较低
在Web 开发过程中，开发人员无须具备高深的程序语言功底和算法基础，即使无法完全掌握JS ，仍可以直接使用HTML 语言进行Web 开发，其只需在编写的文本前加入一些Tags 就可以实现网页设计和
js控制css3动画触发制作，因此可以说Web 前端开发技术是一种非程序员技术。
作者简介：赵洋（1989— ），男，河南平顶山人，助教，硕士研究生；研究方向：计算机网络技术，软件开发。
摘 要：文章在描述和介绍Web 前端开发技术的内容和特点的基础上，对Web 前端开发的核心技术和应用中存在的问题进行分
析，最后对如何优化Web 前端开发性能的策略进行了描述，以期为相关从业者更好地掌握这门技术并进行创新之路给出一些思路和意见。关键词：Web 前端开发技术；HTML ；CSS ；JavaScript ；性能优化
Web前端开发技术特点及优化分析
赵 洋
（河南牧业经济学院，河南 郑州 450000）
无线互联科技
Wireless Internet Technology
第7期2021年4月
No.7April，2021
[参考文献]
[1]李昊哲.HTML5在Web 前端开发中的应用探析[J].网络安全技术与应用，2020（10）：64-65.[2]李禄源，邢方方.计算机网站前端开发技术与优化措施分析研究[J].电子测试，2020（20）：136-137.[3]俞敏.Web 前端开发技术在运维管理系统中的应用研究[J].信息与电脑（理论版），2020（19）：145-148.[4]曹艳琴.基于网站制作的Web 前端开发技术与优化策略[J].电脑知识与技术，2020（23）：59-60，67.
（编辑 何 琳）
Analysis on web front-end development technology characteristics and optimization
Zhao Yang
（Henan University of Animal Husbandry and Economy, Zhengzhou 450000, China ）
Abstract：
Based on the description and introduction of the content and characteristics of the Web front-end development technology, this article analyzes the core technologies and application problems of the Web front-end development, and finally describes how to optimize the performance of the Web front-end development strategy, hoping to be relevant practitioners better master this technology and give some ideas and opinions on the road to innovation.
Key words：
Web front-end development technology; HTML; CSS; JavaScript; performance optimization 3    Web前端开发技术存在的问题
3.1 Web 网络拥堵时的HTTP 请求问题
一般在网页和服务器发生链接时，会产生较多的时间消耗，而当网络发生拥堵时，这种情况会更加明显。而一个正常HTTP 请求的流程，如在浏览器中输入" ”并按下回车，浏览器与这个URL 指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接收到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行，事实上，这个过程虽然看起来简单，但由于请求的网页文件中有很多图片、CSS 、JS 甚至音乐等信息，网页浏览器将会频繁的与服务器建立连接、释放连接，这必定会造成资源的浪费，且每个HTTP 请求都会对服务
器和浏览器产生性能负担。3.2 浏览器兼容问题
相关调查数据显示，IE 、360、火狐等浏览器是目前常见的浏览器厂商，但由于Web 前端开发存在的兼容问题，导致一种浏览器并不能满足用户的日常工作和生活需求，用户需下载多个浏览器才能满足使用需求，此外目前前端技术编写出的脚本语言即使是同样的代码，不同浏览器执行出来的效果也有较大区别，这将严重影响用户的使用体验。3.3  Repaint 和Reflow 理解混淆
Repaint （重绘）就是在一个元素的外观被改变，但没有改变布局（宽高）的情况下发生的，如改变visibility 、outline 、背景等等。Ref low （重排）则是DOM 的变化影响到了元素的几何属性（宽和高），浏览器重新计算元素的几何属性，这个过程会使渲染树中受到影响的部分失效，浏览器会验证DOM 树上的所有其他结点的visibility 属性，这也是Ref low 低效的原因。如：改变窗口大小、改变文字大小、内容的改变、浏览器窗口变化，style 属性的改变等等。如果Ref low 的过于频繁，CPU 使用率就会上涨，所以前端也就有必要分清Repaint 和Ref low 的相关区别。4    Web前端开发技术优化措施
（1）面对HTTP 请求包含信息过多严重影响网页运行速率的问题，一般建议网页开发人员尽量减少网页的HTTP 请求次数，一般来说，Web 设计人员为了达到较好的网页呈现效果，会添加一些繁杂的操作步骤，但实际上，为了避免网络运行超负载运行，需要加强对设计人员的培训力度，通过转变设计思路，在确保设计功能的同时化繁为简，确保网页功能齐全、操作流畅。
（2）优化HTML 页面设计，HTML 页面反映了一个浏览器的特点，HTML 技术的有效应用不但可以使用户获得较好的视觉体验，而且能够保证网页较为完整的基本性能。在优化HTHL 页面时需要综合考虑多个影响作用，不但要实现单一页面呈现内容的较高质量，而且要确保所有页面内容在整体上的高度统一，最大限度地提升页面在设计与内容上的吸引力，避免用户出现兴趣索然的感觉，降低对网页使用的黏性。
（3）网页开发人员一般会产生Repaint 和Reflow 理解混淆问题，因为通过设置style 属性改变结点样式的话，每设置一次都会导致一次reflow ，所以最好通过设置class 的方式；有动画效果的元素，它的position 属性应当设为fixed 或absolute ，这样不会影响其他元素的布局；如果功能需求上不能设置position 为fixed 或absolute ，那么就无法权衡速度的平滑性。总之，因为Reflow 有时确实不可避免，所以只能尽可能限制Reflow 的影响范围。5    结语
目前正处于一个信息化时代，互联网网页的开发和运行也在不断创新，人们对于互联网上呈现的信息和知识的依赖性也越来越强，因此，相关开发人员要加强对Web 前端开发技术的学习理解和优化，对于一个Web 开发人员来说，需要在全面了解JavaScript ，HTML ，CSS 等设计语言的基础上，切实掌握其应用特性，进而才能有效地应对当前Web 前端开发遇到的问题，才能不断创新和优化Web 前端开发技术。
无线互联科技·软件透视

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。