當前位置:首頁 » 網頁前端 » 前端開發工程師會面臨哪些困難
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端開發工程師會面臨哪些困難

發布時間: 2022-07-26 04:22:29

⑴ 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,到了自己上手的時候發現其實要學很多。