⑴ web前端工程师工作中,遇到难以解决的问题有哪些
有时会遇到外层中的子层使用margin-top不管用等情况
⑵ 入职web前端工程师会遇到哪些难题
遇到难题是正常的,去解决学习就好了,我面试的时候人家问我好多专业知识我都没答上,现在还不是在从事web前端开发 ,总之心态最重要
⑶ web前端开发个人在行业优缺点
优势:前端开发职业是一个新兴的行业,现在我国web前端开发人员缺口大,一般前后端开发人员比例是1:1左右,但我国是1:3左右,前端的核心技术H5已经成为互联网主宰者,各行业都用其开发互联网应用,目前整个互联网都缺前端人才
缺点:就是一个字:累(以下是我回答其他人问题的答案,其实干哪一行都累!)
⑷ 前端开发的难点到底在什么地方
前端开发的难点在掌握HTML。
掌握HTML是前端开发的核心,HTML是一种制作万维网页面的标准语言,是万维网浏览器使用的一种语言,它消除了不同计算机之间信息交流的障碍。
因此,它是网络上应用最为广泛的语言,也是构成网页文档的主要语言,学好HTML是成为Web开发人员的基本条件。
常见前端开发工程师职位职责要求:
1、使用Div+css并结合Javascript负责产品的前端开发和页面制作。
2、熟悉W3C标准和各主流浏览器在前端开发中的差异,能熟练运用DIV+CSS,提供针对不同浏览器的前端页面解决方案。移动HTML5的性能和其他优化,为用户呈现最好的界面交互体验和最好的性能。
3、负责相关产品的需求以及前端程序的实现,提供合理的前端架构。改进和优化开发工具、开发流程、和开发框架。
4、与产品、后台开发人员保持良好沟通,能快速理解、消化各方需求,并落实为具体的开发工作,能独立完成功能页面的设计与代码编写,配合产品团队完成功能页面的需求调研和分析。
⑸ 前端开发的难点到底在什么地方
不同级别的前端面临的难点各不相同,不可一概而论;
业务开发的前端难点在于对业务的理解和把控能力;
平台开发的前端难点在于产品化的把控和推进能力。
观点1:不同级别的前端面临的难点各不相同,不可一概而论。
其他回答有说 CSS 难,有说 CSS 不难的,每个人水平不同,这样争论毫无意义。我刚学前端时觉得 JS/CSS/浏览器兼容问题都很难,现在觉得也就那样,因为前端路子广,办法总比问题多。后来觉得要评估好需求,把控好项目质量比较难,很多时候我们是在干事,在解决问题,不是只埋头写代码,时间一长你会发现前端工作中,技术问题往往比较好解决,反而资源+协作问题比较麻烦。现在对我来说比较难的是快速产品化的能力,如何从无到有去做出一些有价值的东西。
举一个简单粗暴的例子吧:阿里前端很多,P5/P6 一大把,但是 P8/P9 的非常少,为什么?进阶的难点在哪里?
前端开发的难点跟前端进阶的难点是非常相似的。阿里对每个前端层级都有一个标准,这也从侧面回答了这个问题,比如对 P5 来说,难点可能是写好业务代码,保证其灵活性和可维护性,能解决各种适配问题;对 P6 来说则需要独挡一面,能独立 owner 需求,而 P7 则需要在某方面技术有深入理解,等等。
能提出这个问题首先得恭喜题主,说明题主在当前阶段遇到瓶颈了,需要向下一个 level 出击了。
观点2:业务开发的前端难点在于对业务的理解和把控能力。
业务逻辑开发本身并不是难点,谁都可以写。但是对于你自己负责的这块业务,后续业务的发展方向和潜力,你有去了解过吗?当业务方提需求过来时你是只负责执行还是和业务方一起探讨更合理的方案?你有没有给自己负责的产品提过一些建议?做过一些改善措施?如果前端只是作为一个执行者,作为一种被调度的资源,那么即使最终项目取得了好的成绩,跟你有多大关系?你自己会有多大的成就感?
另外一个很重要的点:就是对业务的把控能力。业务方总是会催着上线,开发时间不断被压缩该怎么办?进度不如预期怎么办?开发遇到瓶颈怎么办?发布新功能翻车了怎么办?
我见过有默默加班保证进度的,也有跟需求方重新谈延期的,有发布出问题手足无措的,也有自己默默修复的,有遇到瓶颈一筹莫展的,也有及时跟老板沟通,跟业务方撕逼的… 如何优雅的处理这些问题,有时候比写代码更难。为什么有的人业务代码逻辑混乱,写的一团糟?我不相信是智力问题,反倒更相信是对项目本身没有把控好,本来排了5天工作量的需求被业务方压到了3天,你还能保证写出健壮而不失风度的代码?
观点3:平台开发的前端难点在于产品化的把控和推进能力。
做业务时有人给你提需求,帮你出交互视觉稿,你只要负责写页面就行了。但是在支付宝前端,很多内部平台和技术产品都是技术自己主导,你需要自己发现问题,出方案,设计数据库,自己出页面,这是一个从无到有的创造的过程。并且要保证你做的东西是真正解决问题的,而不是做一些自己觉得很牛逼实际上并没有解决用户痛点的东西,用我老板的话说就是对产品的把控能力,不要跑偏了。前端是最容易做出产品化东西的工程师了,因为后端不会做 UI,UI 不会写代码,唯前端兼顾,这是最大优势。
再一个就是对产品的推进能力了,你做的东西可能需要各种资源?如何争取?可能牵扯到多方利益?如何权衡?东西做出来了如何推广?如何在用户的一片骂声中奋勇前进?
印象中很多平台型产品,刚开始投入使用时都是一片骂声,各种问题,说实话负责这些产品的程序员压力是相当大的,天天被骂还得彻夜帮别人解决问题,还得不断优化系统,你说难不难?
以上三点就是本文所展现的理念,希望能对大家有帮助。
⑹ 本人web前端开发工程师,技术遇到瓶颈.怎么才能不断提高自己
第一,获取相关信息。可以通过浏览招聘信息或者询问身边从事前端工作的朋友来对HTML5大前端以及前端开发的工作内容进行一个初步了解。一般来说,前端开发工程师的工作包括:使用HTML、CSS、JavaScript等专业技术和工具将UI设计稿实现为用户PC端、移动端网页等网站产品,同时处理相关端口的视觉和交互问题等。
第二,打好学习基础很重要。Web前端入门学习的基础内容有HTML5和CSS3,其中包括PC端网站布局、Weapon页面布局两方面。JS交互设计是重点学习部分,这部分需要熟练掌握JavaScript基础语法、JavaScript进阶、JavaScript高级编程、Conquer经典案例等内容。再有前端框架也是重点知识点,现在比较主流的框架有Cue、React、Angular,熟练运用框架可以提升开发效率。
第三,理论结合实践。紧跟潮流发展也很关键,现在微信小程序和小游戏越来越流行,掌握相关技术点可以在岗位竞争中更具优势。比如熟悉React Native技术对于小程序开发很有必要,它可以实现熟练开发出匹配项目需求的功能。
最后,找对适合自己的学习方式至关重要。
⑺ 前端开发的难点到底在什么地方
一般意义上的前端项目:
-从0到1,治理晒哦为健全点的都能捣鼓出来;
-从1到60,后后端或者设计岗位勉强能兼任;
-从60到80,需要比较专业的前端;
-从80到100,这么好的前端可遇不可求。
从0到1就是从无到有的过程,很多人用WordPress,建站之星就差不多就能搞个demo了,可以拿去骗投资人的钱。
从1到60,就是勉强可用,基本上让后端工程师或者UI设计师找一套bootstrap的模板东拼西凑的也能勉强应付到第一版本上线。
从60到80,就是真正要做一款能完备、性能优良、架构合理的中小规模产品,没有专业的设计、前端、后端、产品、运营是走不到这步的,差不多到A轮了。
从80到100,那就是追求各方面的极致,与竞争对手一较高下,各个方面没有顶尖的人才都会影响整体的战斗力,木桶效应。
解释一下:
1. 核心竞争力的主体是工程经验。
其实这个结论可以推广到其他研发岗位,就是每个研发岗位的知识体系都是由基础学科知识+领域工程经验构成,彼此不可替代的就是工程经验部分。一个后端工程师一时间不能替代同等级前端工程师到不是基础或者智商的问题,主要是工程经验不足,你让一个前端一个后端分别实现对方领域中一个有明确输入输出的功能函数,二者通过简单学习新语言新语法,加上开发手册查询,一般都能比较正常的实现业务逻辑,但你让他们hold住对方领域的完整项目就很困难了,技术选型,系统设计,模块拆分,平台特性,宿主环境,性能优化,构建部署,系统测试等等都是领域工程经验问题。
2. 工程经验的等级是能cover项目从0发展到80+。
这个很好解释,因为从0-60的非专业前端也能做到,60+的才是专业前端。
所以不用担心核心竞争力问题,60+的前端现在都很抢手啊。工程经验只有60-的话确实压力比较大。
⑻ 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:<divstyle="height:0;overflow:hidden"></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浏览器的高度自适应问题就解决了,这些在
http://www.xueshengshu.com/网站中用到最多了。
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},最近写的网站中http://www.msgc.net.cn/就用到了
4).div层中清除clear属性的一小部分应用
在div中一个大的层里面有很多子层,若是加上边框在ie7、ie6中或许会正常显示,但是在ff中可能
只会成一条线了,此时在最外层的后面加上<div style="clear:both"></div>或者设 .wrapfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}后在每个浮动外框调用wrapfix;http://www.xueshengshu.com学生书网里用到最多了。
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层就自动居中了。
例如http://www.hopes-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即可;
11).list-style-image的用法
div中经常用到新闻列表前面有图标的样式,有两种简单的方法
一.可以写成ul.menu{width:100%;} ul.menuli{background:url(em_img/small_icon.jpg) 5px center no-repeat;list-style-position:inside;padding-left:18px;}即可在各浏览器正常显示
二. 可以设ul.menu{width:80%;} ul.menuli{list-style-image:url(em_img/small_icon.jpg); }
此时新闻列表前的小图标即可在ie6,ie7,ie8,ff中都正常显示但,ie6需要不断的刷新才能正常显示小图标;
12).
IE6 li:hover兼容问题
<scripttype="text/javascript"><!--//--><![CDATA[//><!--
sfHover =function() {
var sfEls = document.getElementById("nav").getElementsByTagName_r("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]>
</script>
13).ie6下支持position:absolute;
最近写一个短信平台的页面用到的底部固定的层,在ff和ie7,ie8下都是好的,可到ie6下就不行了,转了整个地球终于出来了:
background-attachment:fixed; }
#bottomNav {background-color:#096; z-index:999; position:fixed; bottom:0; left:0;width:100%; _position:absolute;
_top: expression_r(documentElement.scrollTop+ documentElement.clientHeight-this.offsetHeight); overflow:visible; }
样式表中调用即可!详细请见“高度自适应屏幕尺寸!”
14).border:none;与border:0;的区别
1.性能差异
【border:0;】把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。
【border:none;】把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。
2.兼容性差异
兼容性差异只针对浏览器IE6、IE7与标签button、input而言,在win、win7、vista 的XP主题下均会出现此情况。
【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在
【border:0;】当border为“0”时,感觉比“none”更有效,所有浏览器都一致把边框隐藏
总结:
1. 对比border:0;与border:none;之间的区别在于有渲染和没渲染,感觉他们和display:none;与visibility:hidden;的关系类似,而对于border属性的渲染性能对比暂时没找测试的方法,虽然认为他们存在渲染性能上的差异但也只能说是理论上。
2. 如何让border:none;实现全兼容?只需要在同一选择符上添加背景属性即可
对于border:0;与border:none;个人更向于使用,border:none;,因为border:none;毕竟在性能消耗没有争议,而且兼容性可用背景属性解决不足以成为障碍。
15).ie下。png的图片不会有灰色背景出现
注:首推PNG8,即使在IE6中它的透明背景也能被正确显示。PNG8使用的技巧是,输出时把“杂边”设置为和背景接近的颜色
1.几经周折终于把ie6下.png有色图问题解决了,原来IE6.0原本支持png8的索引色透明度,但不支持png或8位以上的alpha 透明度,在IE6.0下,非PNG8格式的透明图片部分,会显示为淡淡的灰绿色。在网页中头部加个代码<!--[if IE 6]>
<script type="text/javascript" src="http://zmingcx.com/wp-content/themes/HotNewspro/js/pngfix.js"></script>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->即可!
⑼ 前端开发过程中遇到过什么困难
前端开发过程中遇到的困难还是很多
1、面试中前端开发过程中遇到的困难这个问题主要是相看面试者是不是有独立解决问题的能力及解决问题的方案以及工作中的的一些两点
2、遇到这样的问题可以说出一个自己解决的比较完美的问题,如:vue不适合做cms,因为单页面应用对seo很不友好,解决的方法就是:我们使用nuxt技术,在保证使用vue语法开发的同时,也使用了服务端渲染技术保证了seo效果,这个过程突出了自己的学习nuxt等新技术的能力
3、另外也是有很多实际的开发问题不好解决,的但是那些自己解决不好的问题不适合 在面试的过程中说的
⑽ Web前端开发的难点和重要性有哪些
第一,平台、浏览器生态复杂,要考虑的场景太多,不同平台上实现同一界面功能的重复劳动严重,这个难点在于如何消除前端开发的重复劳动。
第二,当需求发生变化的时候,最先往往就是前端,而很多需求变化和后端无关,单纯就是前端的改变。这些需求改变有的是不合理的,但是,客观来说,也有不少是有必要的需求改变,用户的喜好会变化,用户的喜好我们也要反复揣摩,也就是要适应需求变化,所以,难点就成了如何让前端开发适应快速变化的需求。
第三,前端的学习曲线其实挺陡,很多后端开发者以为前端只是玩一玩HTML,到了自己上手的时候发现其实要学很多。