首页 > 前端开发 > 正文

web前端开发碰到瓶颈 web前端开发是什么,所要面临的挑战有哪些?

2023-09-21 09:30:35 | 我爱编程网

最近经常有小伙伴私信询问web前端开发碰到瓶颈 web前端开发是什么,所要面临的挑战有哪些?相关的问题,今天,我爱编程网小编整理了以下内容,希望可以对大家有所帮助。

web前端开发碰到瓶颈 web前端开发是什么,所要面临的挑战有哪些?

web前端开发是什么,所要面临的挑战有哪些?

Web前端开发大致上是,创建出Web网页以供用户浏览使用等。主要通过HTML、CSS、JavaScript等技术来实现交互。

所面临的挑战主要有几点:

一、

Web的载体的多样性。

以浏览器为例,分别有IE,Chrome,火狐等。虽然有ECMA委员会进行标准化,但不同浏览器对HTML、CSS、JS等支持程度还是存在差异。所以需要进行兼容处理。

而且,这还会另测试的复杂度上升。

二、 我爱编程网

Web前端开发的工程化问题。

在以前,Web前端开发是极度依赖于后端的,例如JSP、PHP等前后端代码混杂,这段时期,前端的工程化问题还不算凸显。

而随着MVVM的普及,前后端的分离,本身的前端项目需要有一定的组织,协作,需要有前端的一套工程化解决方案。

包括组件化开发,单元测试,增量更新,代码压缩混淆,项目的打包构建发布等。

三、

Web框架之间的不兼容。

Web开发中,躲不开的是三大框架React、Angular、Vue。而框架与框架之间存在明显的沟壑。

对于一个Web前端项目来说,其实使用哪种技术并不重要,重要的是能实现需求。但是在实际上,如果项目选定了某个框架,其他框架之间的某些组件或者解决方案并不能互通。

当然,现在的WebComponent有希望解决这个问题,但是,WebComponet的兼容性也存在明显问题。

结语:

Web前端开发所面临的问题远不止这些。当然,有问题就有解决方案,Web前端技术就是在攻克这些问题上不断演进。

web前端开发碰到瓶颈 web前端开发是什么,所要面临的挑战有哪些?

web前端工程师工作中遇到难以解决的问题

1).margin-top,margin-bottom不能正常显示时
一.有时会遇到外层中的子层使用margin-top不管用的情况;这里我们需要在子层的前后加上一个
div{height:0;overflow:hidden;}

CSS样式表中:
#box {background-color:#eee;}
#box p {margin-top: 20px;margin-bottom: 20px;text-align:center;}
解决方法:在P标签前后各加2个空的div:<div></div>
二.网页中头部,中部,底部的居底部有时给个margin-bottom:10px;不管用也是要给个清除属性的.clear{clear:both;font-size:0;line-height:0;}在底部<div id="footer"></div>下加个<div></div>
2).div层中高度自适应问题
网页前端科技人员在设计网页时不可能知道客户在要他们自己的网站内容页里加多少文字或图片内容
这时我们就不能规定div层的高度,为此应写成min-height:200px;height:auto!important;height:
200px;overflow:visible;这样ie7,ff,ie6浏览器的高度自适应问题就解决了,这些在
网站中用到最多了。
3).div层中子层的居底部对齐问题
div中的定位问题有很多也很麻烦,但弄懂了就OK了,在一个大的div层中如何让子层的内容居底部
对齐就涉及到了position定位问题;

div层#box{position:relative;border:1px solidred;width:600px;hegiht:400px;}
div子层#box .wrap{position:absolute;bottom:0;border:1px dashedblue;width:200px;height:
100px},最近写的网站中 就用到了
4).div层中清除clear属性的一小部分应用
在div中一个大的层里面有很多子层,若是加上边框在ie7、ie6中或许会正常显示,但是在ff中可能
只会成一条线了,此时在最外层的后面加上<div ></div>或者设 .wrapfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}后在每个浮动外框调用wrapfix; 学生书网里用到最多了。
5).解决IE8下div移位、错位等兼容性问题
在<head>标签后面的第一句话加上<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />就OK了
6).单行文字居中与字体样式问题
在div中一个层中只有一行文字,要让这层中的文字居中,可设line-height的高度和层的高度一样,注意这一层中的文字不能换行,此外,设了line-height时再给定字体样式font:bold 14px "宋体";这时要把font:bold 14px "宋体";放在line-height的前面,否则字体样式不显示文字也不居中;或者将font:bold 14px "宋体";改成font-size:16px;font-weight:bold;font-family:"宋体";就OK了。
7).鼠标滑上去的特殊效果
往往为了达到显眼的效果,我们会写到一些好看的效果,方法一在样式表中写:ul li a{border:1px solid red;}ul li a:hoverimg{filter:alpha(opacity=40在ul标签中调用即可方法二:在样式表中写上:.hover img{filter:alpha(opacity=40);}在div中调用onmouseover="this.className='hover'"onmouseout="this.className=this.classtype"即可
8).IE6中高度不对问题
今天在div中给定了高度为1px,其它浏览器显示正常,可是ie6中显示的高度就不对了,这时我给样式表中加了个font-size:0px;line-height:0px;就好了
9).ul在外框里margin-top不起作用的问题
在div大框子里用了ul作导航的时候为了合ul层居中显示,设ul的样式表为margin-top:-15px不起作用了,此时应该将div大框设定高度后给个line-height与height一样的高度,ul层就自动居中了。
例如 -home.cn/main.aspx
10).ff中margin-top有时不起作用的问题
今天头晕脑涨的把这问题给解决了,这几天写标网都有累似问题,可是一直都是换个写法解决的,今天的这个办法也不只可行试试还是可以的,在一个div外框层中给个宽度例如,#div_wrap{width:280px;height:100%;}
其次在这个框子里设一个.div_top{widh:100%;font:bold12px "宋体";height:24px;line-height:24px;}
.div_center{border:1px solid#dbdbdb;border-top:none;background:#fff;min-height:460px !important;height:auto!important;height:460px;overflow:visible;}
最后在这个div_center里套个ul li时经常会在ff中出问题,也就是在div_top与div_center中莫名的多了几个像素的空格,这时给ul样式表设个display:inline-table即可;

web前端开发碰到瓶颈 web前端开发是什么,所要面临的挑战有哪些?

前端开发过程中遇到过什么困难?

前端开发 过程中遇到的困难还是很多
1、面试中前端开发过程中遇到的困难这个问题主要是相看面试者是不是有独立解决问题的能力及解决问题的方案以及工作中的的一些两点
2、遇到这样的问题可以说出一个自己解决的比较完美的问题,如:vue不适合做cms,因为 单页面应用 对seo很不友好,解决的方法就是:我们使用nuxt技术,在保证使用vue语法开发的同时,也使用了服务端渲染技术保证了seo效果,这个过程突出了自己的学习nuxt等新技术的能力
3、另外也是有很多实际的开发问题不好解决,的但是那些自己解决不好的问题不适合 在面试的过程中说的

以上就是我爱编程网小编整理的内容,想要了解更多相关资讯内容敬请关注我爱编程网。

免责声明:文章内容来自网络,如有侵权请及时联系删除。
与“web前端开发碰到瓶颈 web前端开发是什么,所要面临的挑战有哪些?”相关推荐
请问python后端开发一般需要什么技术?
请问python后端开发一般需要什么技术?

请问python后端开发一般需要什么技术?第一阶段:Python语言基础主要学习Python最基础知识,如Python3、数据类型、字符串、函数、类、文件操作等。阶段课程结束后,学员需要完成Pygame实战飞机大战、2048等项目。第二阶段:Python语言高级主要学习Python库、正则表达式、进程线程、爬虫、遍历以及MySQL数据库。第三阶段:Pythonweb

2024-01-20 06:43:40
Python开发要学哪些内容_python开发需要掌握哪些知识
Python开发要学哪些内容_python开发需要掌握哪些知识

Python开发要学哪些内容_python开发需要掌握哪些知识可以按照以下课程大纲学习:阶段一:Python开发基础Python全栈开发与人工智能之Python开发基础知识学习内容包括:Python基础语法、数据类型、字符编码、文件操作、函数、装饰器、迭代器、内置方法、常用模块等。阶段二:Python高级编程和数据库开发Python全栈开发与人工智能之Python高

2024-02-04 00:30:46
python web框架有哪些
python web框架有哪些

pythonweb框架有哪些1、DjangoPython中最全能的Web开发框架,各种功能完备,可维护性和开发速度都一级棒,不少人反应Django框架慢,它主要慢在DjangoORM与数据库的交互上,所以是否使用Django框架,需要取决于项目对数据库交互的要求以及各种优化,而对于Django的同步特性导致吞吐量小的问题,可以通过Celery等解决,这并不是一个致命问题。2、Torn

2024-02-09 20:24:23
python集成开发环境都有哪些?
python集成开发环境都有哪些?

python集成开发环境都有哪些?用起来感觉还不错的是下边仨。1、eclipse,这是一个相当不错的集成开发环境,加上pydev插件就可以使用。2、pycharm,这也是一个不错的python继承开发环境。谁用谁知道。3、python子代的IDLE,还是有一定的可用性的。下边的这个不算继承开发环境,但可以起到辅助记忆命令的作用----ipython。python3.5安装

2024-02-14 14:57:00
有哪些值得推荐的 Python 开发工具
有哪些值得推荐的 Python 开发工具

有哪些值得推荐的Python开发工具1、PythonTutorPythonTutor是由PhilipGuo开发的一个免费教育工具,可帮助开发者攻克编程学习中的基础障碍,理解每一行源代码在程序执行时在计算机中的过程。通过这个工具,开发者可以直接在Web浏览器中编写Python代码,并逐步可视化地运行程序。如果你不知道代码在内存中是如何运行的,不妨把它拷贝到Tutor里可视化执行一遍

2024-02-24 16:57:35
学python,可以用哪些开发软件。用什么开发软件最好?
学python,可以用哪些开发软件。用什么开发软件最好?

学python,可以用哪些开发软件。用什么开发软件最好?学python,开发软件有Jupyter,nopad++,sublimetext,PyCharm。PyCharm开发软件最好。PyCharm用于一般IDE具备的功能,比如,调试、语法高亮、Project管理、代码跳转、智能提示、自动完成、单元测试、版本控制另外,PyCharm还提供了一些很好的功能用于Django开发,同时支持G

2024-01-29 16:30:25
java的开发环境是什么
java的开发环境是什么

java的开发环境是什么Java的开发环境是JDK(JavaDevelopmentKit)。JDK是Java语言的软件开发工具包,它包含了编写、编译、运行Java程序所需的所有工具和资源。JDK主要由Java编译器、Java运行环境(JRE)和一组开发工具组成。其中,Java编译器将Java源代码转换为字节码,JRE则用于运行这些字节码。JDK的安装和配置相对简单,开发者可以从Ora

2024-03-21 20:39:24
Java程序开发步骤(java程序开发步骤包括哪些)
Java程序开发步骤(java程序开发步骤包括哪些)

Java程序开发步骤分为网页和桌面的应用开发网页或者桌面开发流程项目启动1)、项目组成立(公司成员、客户成员)2)、制定项目预期目标3)、制定项目计划周期4)、建立好项目组成员沟通机制2、需求调研1)、创建调研计划、协调调研时间2)、收集客户资料,获取客户需求所有的资料都需要保留一份,资料中存疑的需要及时询问3)、编写需求文档重点

2024-03-28 10:09:14