admin 管理员组文章数量: 1184232
2024年4月20日发(作者：jsp三种注释的区别)
软件开发与应用
Software Development And Application
电子技术与软件工程
Electronic Technology & Software Engineering
Web前端开发技术和优化措施研究
金日
（延边职业技术学院 吉林省延吉市 1331000）
摘 要：本文以网站制作为论述背景，简单介绍了Web前端技术的开发体系，着重阐述了前端开发技术中DOM、CSS 两个方面，又对
包括文件优化、内容优化等方面的相关优化方案做了详细的研究。
关键词：前端开发；文件优化；内容优化
1 Web前端开发技术体系介绍与阐述
1.1 HTML
XHTML/HTML5统称为HTML，HTML并不是编程语言，
而是标准标记语言之一，浏览器通过翻译前端开发人员编写的
HTLML语言，展示为方便用户阅读的信息内容，从而使浏览器
网页正常工作，这也是HTML标记语言的主要功能。XHTM和
HTML存在一定的区别，它以W3C 作为标准，对HTML进行了更
新，具有通用性和穿插性。HTML5是最新且使用最广泛的标准标
记语言，可以满足如现代移动设备前端开发、RYIA应用前端开发
等多变的发展需求，与HTML相比，HTML5具有更大的普适性，
成为了目前最主要的前端开发应用语言。
1.2 CSS
CSS是文件样式的计算机语言，也是层叠样式表的一种，可以
通过HTML等标记语言中的子集或应用，以用户友好的样式展示
到前端界面上。它可完成的功能非常多，可以对网页内容进行分块
处理，层次分明的样式逻辑降低了网页设计的难度，同时简化了网
页的格式代码，使开发人员能够以简单的代码，控制网页具体样式，
其中，具体样式又包括花式字体等细分需求，非常适合进行个性化
Web前端网页开发。CSS以其精简强大的优势，在提升浏览器运行
速度，提高前端开发工作效率，降低后期网页维护难度等方面发挥
着非常重要的作用。
1.2.1 CSS相关兼容性处理方案
作为未来网页前端发展必然会使用的计算机语言之一，CSS在
我国却没有得到大规模的浏览器软件支持。比如在我国网络用户经
常使用的浏览器中，可以做到有效支持CSS全部或大部分自定义
属性的很少。这样的现状，与CSS普及范围越来越广的趋势成为
矛盾，会影响用户的浏览体验。针对这样的冲突，在当前的Web
开发环节中，应该尽快完成 CSS的自定义属性样式相关兼容处理。
比如，可以通过@supports软件对用户现在所使用的浏览器进行检
测，检测重点是该浏览器是否可以与开发中所使用的CSS相关属
性样式合理兼容，并通过对不兼容地方的处理，修改CSS属性样
式代码，直到处理完毕，成功满足用户的前端网页要求为止。
1.2.2 CSS技术应用过程
在前端开发过程中，应该以用户的使用体验作为开发是否合格
的标准，而CSS丰富的属性样式，使得它可以完成用户个性化的
需求，能够根据用户的要求随时做出多样化的改变。同时，在浏览
60
器客户端的支持下，CSS可以使用高度的自定义属性，将数据加载
存储在本地。此处以通过修改CSS代码，调整网络页面颜色为实例，
第一步需要设定自定义属性-fontColor，-fontColor的值就是目前前
端背景字体的颜色。第二步，等到前端网页加载完成，浏览器无需
等待时间，可以直接拿到储存在本地的，关于字体以及背景颜色的
数据，在设定-fontColor参数的时候，只要没有其他数据项出现，
网页都会选择初始值。第三步，开发人员需要建立颜色选择框，避
免乱码，设置为txt模式，添加相应的指令，将需要修改的颜色储
存到本地，这时-fontColor的原值会被刷新，后期修改维护完成。
修改页面颜色只是一个简单的功能，在实际CSS开发中，还有更
多的功能可以被实现、修改与维护，可以满足更多的用户需求。在
未来的CSS开发过程中，本地存储或许会成为数据存储的限制，
当与云计算结合在一起之后，CSS可以利用不同的数据样式，展现
丰富多变的主题，减小对网站性能与存储地点的依赖，发挥更大的
作用。
1.3 DOM 技术
与CSS技术一样，虚拟DOM 技术在网页前端开发中同样具有
不可小觑的地位。DOM技术的主要优势是大大增强了页面的交互
性，通过把XML文件抽象整理为树形的数据结构，数据结构都由
一个个单独的小节点构成，可以为前端页面提供所需的API。由虚
拟DOM的主要功能可以看出，该技术的核心思想，是把新旧两种
页面的不同之处剥离出来，并将这种不同在旧的页面里体现出来，
由此可以从以下三个方面来看待这项技术。
1.3.1 经过 JS 模拟 DOM
相比于建立真实的DOM节点，使用JS对象可以以一种成本
更低的方式，表示DOM构造的数据结构的不同节点，而且节点的
类型信息、层次关系与其它基本属性可以得到有效的保留，而真实
DOM包含的信息不会有遗漏，所以这种方法在开发中的性价比更
高。使用JS对象构建虚拟DOM树的关键技术流程如下：程序开
发准备就绪后，获取需要创建DOM元素的属性值、层次关系等其
它属性，然后创建JS对象，创建完毕后需要判断是否含有子元素，
若有则返回获取到属性的步骤，如果没有则创建结束。
1.3.2 DOM-Diff算法的研究
DOM树的数据结构在前端网页开发过程中不会受到太大的影
响，尤其是跨级别的DOM元素，很少会出现需要移动的情况，所
以无论页面是否发生变更，大部分的层级结构状态基本都会保持原
来的位置固定不变。通过对DOM-Diff算法进行研究分析，可以发
电子技术与软件工程
Electronic Technology & Software Engineering
现该算法主要包括两个方面的内容。
（1）在某个单一的节点被删除后，该节点下的子节点也会被
删除，而且被删除的节点不会再进行差异的比对，这是建立在不考
虑其他可变或不可变的因素，只是对比DOM树形数据结构中层级
节点不同的情况。
（2）如果是对属于同一层组的子节点进行增删查改各项操作，
查找每个节点各异的Key值可以成为进行定位寻找的方式，在操作
完成后可以明确新元素的位置顺序并成功恢复DOM元素
[1]
。
1.3.3 实现DOM算法的路经
在DOM算法下，每一个节点都有自己唯一的用来辨识身份的
Key，由此可以得出以下三种实现路经。
（1）遍历循环全部节点，用Key判断是否存在相同的节点；
（2）遍历循环之后会产生两种情况，如果没有发现相同的节点，
那可以直接移动；如果使用Key寻找到了完全相同的节点，需要首
先获取旧节点的位置，然后获取已经被访问过的节点的位置，两个
位置进行比对，进行移动节点的操作；
（3）完成循环遍历于节点的移动操作后，将新集合里没有对
应的节点一律剔除。
[2]
1.3.4 将差异补丁应用到旧页面上
对DOM元素做增删改查等操作后，通过差异补丁的更新，核
对补丁是否应用完毕，网页页面刷新，完成修改。而在旧页面上应
用差异补丁，作为DOM技术中最重要的环节之一，可以根据系统
遍历后得到的不同差异类型进行修改与调整，调整后可以成功应用
在网页页面上。
2 Web前端的优化思路
2.1 针对HTTP请求的优化
网页承担着网站与用户信息交流互动的作用，能成功实现信息
交互的功能，也是实现网页价值的重要体现。因此，如何根据不同
的网页类型与形式，为用户动态地提供获取信息数据的不同方式，
也应该成为开发人员考虑的问题。无论数据的体量如何发展与增加，
网页始终需要找到可以实现最大化吸引用户的途径，过滤有效信息，
屏蔽无效信息，都是网页在设计开发时需要做到的任务。为了保持
网页的最大吸引力，需要对复杂的HTTP请求进行优化处理。
2.2 针对文件的优化
文件规模的优化是一个更为复杂的问题，CSS文件可以实现文
件优化的功能，但并不能做到彻底的优化，丰富多样的文件包含着
复杂的信息，如果不能做到彻底优化，会非常影响用户的体验，可
以利用为HTML加标签、代码压缩、服务器压缩、Cookie优化等方法，
将重复不合理内容隐去，有效控制文件规模。
2.3 针对内容的优化
在前端的网页制作中，内容的优化同样重要，精简的内容可以
让网页减少出错概率，后期运行更加稳定，需要重点关注。在内容
优化方面，网站运行过程中的重定向问题无法完全避免，但仍然需
Software Development And Application
软件开发与应用
要想办法尽量减少这种情况的发生。除了尽量避免重定向，还有实
现Ajax的可缓存、使用懒加载等方法实现内容的优化
[3]
。
2.4 使用内容分发网络（CDN）
使用内容分发网络的好处，是可以减少浪费资源的现象，使用
户下载数据和信息的速度大大加快。因为浏览器缓存数据资源的方
式是根据域来进行判断是否有相同的域，如果域不同，哪怕资源相
同也要重复下载造成本地空间和网络贷款的浪费。因此，CDN可
以使用以下几种方式来运用在前端的性能优化。
（1）和用户距离较近的CDN节点负责获取缓存的静态资源；
（2）当用户根据所需的不同资源获取不同的CDN节点时，判
断缓存资源是否可用的工作由CDN进行，由此用户可直接获取对
应资源，大大提高效率。
3 总结
作为网络的发展窗口，Web始终能直观地代表用户的浏览习惯，
这又促使网络技术必须不断更新发展，才能满足多方面多方向的需
求。同时，初期的Web开发渗透方式尽管在早期可以很好地完成
任务，但在网络技术高速发展的今天，已经明显地显示出了不足之
处，需要更新的技术解决更多的问题。尽管当前互联网的发展趋势
突飞猛进，新技术层出不穷，但前端网页的设计开发作为与用户直
接沟通的桥梁，承担着非常重要的作用，Web前端开发在网页制造
中也是非常值得关注的。随着技术的推广与用户新需求的不断增多，
旧技术的不足开始逐渐显现出来，技术开发人员应该随时关注技术
前沿，针对不同客户的差异化需求，选取最适合的技术开发方式，
解决紧要信息传输加载慢，后台数据库响应时间长等问题，优化网
页前端质量，提升开发质量与用户浏览体验感。
参考文献
[1]刘晶,齐红波.计算机网站的前端开发技术与优化措施探讨
[J].无线互联科技,2020,17(11):31-32.
[2]李广宏.Web平台前端开发设计[J].计算机与网络,2020,
46(15):32.
[3]田洁.Web前端开发技术以及优化策略研究[J].数码世界,
2021(03):6-7.
[4]陈红卫.计算机网站前端开发技术与优化措施分析[J].无线
互联科技,2019,16(23):134-135.
[5]李禄源,邢方方.计算机网站前端开发技术与优化措施分析研
究[J].电子测试,2020(20):136-137.
[6]陈芳.针对网站设计与制作的Web前端开发技术及技术优化
[J].电子世界,2020(23):196-197.
[7]曹艳琴.基于网站制作的Web前端开发技术与优化策略[J].
电脑知识与技术,2020,16(23):59-60+67.
作者简介
金日（1974-），男，朝鲜族，吉林省延吉市人。硕士学位，讲师。
研究方向为教育管理，计算机。
61
版权声明：本文标题：Web前端开发技术和优化措施研究 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1713583838a641916.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论