Ⅰ 前端如何提升用戶體驗
AJAX
看到這里肯定有人忍不住笑出聲，的確這已經不算什麼新技術，但要讓我站在用戶的角度來評價網站技術上的變化中給訪問者帶來最大友好性的一項，我肯定會選AJAX。
記得在我剛剛開始學會上網時候，不管是注冊頁面還是登錄都是我最煩的，那時候網速又不快，打開一個注冊頁面就要幾秒時間，然後從上往下有幾十個選項要全部填滿，比如其中有一項讓我填寫「密碼保護問題」，這個設計簡直讓人想吃電腦，因為很多人一看這種問題應該都會和我一樣隨便寫幾個數字就提交，然後等幾秒載入完網頁提示「密碼保護問題」不允許有數字，同時之前填寫的十幾項數據全部清空需要重新再來一遍，再花幾分鍾寫完之後提交又提示不允許有字母，再來一遍，有時候還會提示字元太短太長有空格超時之類，總之如果你第一次注冊這種頁面，至少要花掉十幾分鍾，而且還是在重復做一件事。從網站運營者角度來看這也很煩，重復十幾分鍾填寫表單很容易就失去很多潛在用戶。
在AJAX的非同步請求出現之後，這種情況明顯的改善，給用戶的體驗感最明顯。用戶並不知道何時已經提交請求，就拿剛才表單的例子來說，如果每填寫一項都會在當前表單的最後提示具體錯誤類型(在用戶未點擊時已經非同步提交了請求並且用返回數據更新部分頁面)，這就給用戶很直觀的提示，這種即時的互動讓訪問者能夠很直觀的感受到這是一個友好的網站。(當然用javascript也能做到部分表單驗證，這只是舉一個例子)。在不重新載入整個頁面，通過操作DOM來改寫小部分數據這點上也能給訪問者帶來極大的交互感，現在流行的微博就是最好的例子，在發送微博/評論/轉發之後用戶會發現不用刷新等待整個頁面載入，操作之後立刻會有小部分的頁面發生變化，雖然看起來微不足道，但對一個訪問者來說，這足以讓他們欣喜。
網頁字體
網站中所有的文字內容表達方式都是通過字體，合理的字體無疑會給用戶更好的體驗感。在業內來說豆瓣可能是對字體研究最多的一個網站，拿豆瓣讀書都來他們用Helvetica和Arial這兩種差別非常小的字體，這種非襯線字體很容易讓人一目瞭然同時富有一些科技感，豆瓣本身就是以圖片加上簡短語句組成，讓人能夠從字體中快速找到重心是設計的目標所在。
有人擔心非襯線用作正文對閱讀體驗有影響，實際上不難發現國外很多網站都用非襯線字體來處理正文，當然也不排除他們可能考慮的更多是英文。其實我還是非常喜歡非襯線體，它們看起來更富美感，而且如今大量的文字在互聯網上比較少見，一些活潑具有現代感的非襯線字體也逐漸被更多的開發者認同而且使用。
除去這些，字體還可以在選擇上再細分一些，記得曾經看過一篇統計，不同的字體會影響用戶對站點權威性的信賴程度。比方說在一個公司網站上大量使用類似於幼圓、Cursive一類字體，很容易讓訪問者不信任網站，當然如果是以娛樂為主的網站也不能過於嚴肅和簡朴，在使用時既要考慮到大眾用戶的接受程度，也要知道自己的網站是什麼定位，當然技術性的問題也不能忽略，像是火狐比IE區分sans-serif要更模糊一些，有的字體「O」和「0」、「L」和「1」容易讓人難以區分(代碼較多的站點需要考慮)等等，這樣綜合對比選擇得到的字體無疑能讓網站更有魅力，從而留下更多的用戶。順便一提，在使用字體時注意版權。
載入速度
很多用戶在還未見到你出色的設計和內容之前就已經離開了頁面，這是因為網站載入時間實在是太長，已使訪問者失去耐心。其實很多的訪客不關心腳本和圖片的載入順序，他們只要看到網站的整體結構能夠迅速的載入出來就可以開始瀏覽，即便是其他元素逐漸載入也可以接受，基於這點，我們可以使用很多延時載入的方法來使用戶更快的見到頁面。除此之外還有很多因素可能會對載入速度造成影響，也有逐一優化的辦法，這里就不再細述。
結構設計
不知道大家發現沒有，近來很多網站都喜歡把菜單fixed在頂部，只要這個菜單選擇項不是太多，訪客對這樣的固定菜單接受程度還是很高的，這只是設計中的一個小例子，相類似的有很多，比如在表單中以深淺顏色區分每一行，以提高可閱讀性;在激活窗口時為當前控制項添加一個邊框，使用戶能夠更建議的分辨自己在操作哪個窗口等等。很多的設計與排版方式都已經得到了大眾認可，可以作為網站設計時的參考。
網站結構設計的好看不好看對訪客來說雖然有影響，但也不至於立刻離開，而且即便是非常精緻的頁面卻對用戶不怎麼友好，想必也不會有多少人願意訪問。
舉個例子，以前我用好搜(360搜索)的時候總感覺怪怪的，沒有google和網路順手，研究了一段時間之後才發現好搜的的主頁搜索框比網路和google要低一些，Google到頂部固定菜單的距離是286px，網路是192px(未登錄238px)，而好搜則是328px。相比之下，好搜的搜索框更趨向於屏幕中間，而網路與Google則是在屏幕中上方，對於已經常年習慣了網路和Google搜索的用戶來說，想要改變這個習慣來適應好搜多少有些困難，除此之外搜索框還有結果頁也有幾個問題不一一細述，360這樣做無外乎兩點，一個是不在乎/不知道/不關心用戶體驗，一個就是故意有所不同，想要培養自己的用戶習慣。(在我看來也不怎麼成功)
細節決定成敗
喬布斯的父親是個木匠，曾經教給喬布斯一個理念，就是櫥櫃的背面里層也要細致處理甚至是打磨光滑，即便用戶看不見。在理想主義的偉大試驗品「麥金塔」出世之後，有人甚至感嘆，就連電路板上的電路圖都能當作藝術品，的確如此，喬布斯就曾經開除一個對電路圖美學設計不滿的員工。一個偉大產品的誕生並不是一蹴而就的，必然經過了長期的沉澱積累與琢磨，但僅此依舊不能稱之為偉大，只能算成功。一個產品細節上的最後潤色可能才是決定它價值的關鍵。對於WEB開發者來說，更是如此。
Ⅱ 怎麼學習前端開發求推薦學習路線
基礎知識
1、
HTML + CSS 這部分建議在線教程 上學習，邊學邊練.
之後可以模仿一些網站做些頁面。在實踐中積累了一些經驗後，可以系統的讀一兩本書，推薦《Head First HTML 與 CSS
中文版》，這本書講的太細了，我沒能拿出耐心細讀。你可以根據情況斟酌。
2、Javascript 要學的內容實在很多，如果沒有其他編程語言的基礎的話，學起來可能要費些力，建議看《Javascript語言精粹》，JS是一門很混亂的語言，這本書能夠幫助你區分哪些是語言的精華，哪些是糟
粕，對於語言精華，應該深入學習。糟粕部分能看懂別人寫的代碼就行，自己就不用嘗試了。
有了以上基礎，就可以進行一般的靜態網頁設計，不過對於復雜的頁面還需要進一步學習。
1、CSS。必看《精通CSS》，看完這本書你應該對：盒子模型，流動，Block，inline，層疊，樣式優先順序，等概念非常了解了。作為練習可以看下《CSS藝門之匠》這本書，它對標題，背景，圓角，導航條，table，表單等主題都有詳細的介紹。
2、Javascript。上面提到內容還不足以讓你勝任JS編程。在有了基礎之後，進一步學習內容包括：
a） 框架。
推薦jQuery，簡單易用，上手jQuery即可完成一些簡單的項目。學習方法也很簡單，照著產品文檔做
幾個頁面就行了，不用面面俱到，以後遇到問題查文檔就行了。框架可以幫你屏蔽瀏覽器的差異性，讓你能更專注與Web開發學習的精髓部分。補充： 可以使用
Codecademy 學習 Javascript，jQuery，用戶體驗真的很好（感謝 TonyOuyang ）。
b） Javascript 語言範式
。這個名字可能並不恰當，只是我找不到可以描述「面向對象」，「函數式」這個兩個概念的概念。Javascript不完全是一個面向對象的語言，它的很多
設計理念都有函數編程語言的影子，甚至說如果你不用面向對象，完全可以把它理解成一門函數式編程語言。
Javascript的很多語言特性，都是因為他具有函數式語言的特點才存在的。這部分推薦先學習面向對象的基本理論，對封裝，繼承，多態等概念要
理解，維基網路，網路會是你的幫手，另外推薦《Object Oriented
Javascript》，應該有中文版。對與函數式編程我了解的也不系統，不好多說，可以自己網路一下。
c） Javascript 語言內部機制。必須弄清如下概念：JS
中變數的作用域，變數傳遞方式，函數的定義環境與執行環境，閉包，函數的四種調用方式（一般函數，對象的方法，apply，call），以及四種調用方式
下，『this』指向的是誰。這部分內容你會在《Javascript語言精粹》中詳細了解。另外，你必須理解 json。
d） dom編程，這個Web前端工程師的核心技能之一。必讀《Dom編程藝術》，另外《高性能 Javascript》這本書中關於dom編程的部分講的也很好。
e） Ajax編程，這是另一核心技術。Ajax建議在網上查些資料，了解這個概念的來龍去脈，網路，維基網路上的內容就足夠了。真正編程是很容易的，如今幾乎所有框架都對Ajax有良好的封裝，編程並不復雜。
f） 了解瀏覽器差異性。這部分包括CSS和js兩部分，瀏覽器差異內容很多，建議在實踐中多多積累。另外對於瀏覽器的渲染模式，DOCTYPE等內容應該系統學習。
3、HTML5和CSS3 。HTML5規范已經於2014年10月28日發布了，移動端HTML5和CSS3已經得到了非常廣泛的使用，必知必會呀。
再進一階 · 代碼層面：
有了以上知識，對於大多數小型網站，你應該已經可以寫出能夠工作的代碼了。但要想成為更專業的前端，你還需繼續努力。更高的要求大概還有四方面：1）易維護，2）可測試，3）高性能，4）低流量（移動端）。
1）易維護。對於頁面你該理解『樣式』，『數據』，『行為』三者分離，對應的當然就是CSS,HTML,js。對於js代碼，你最好了解設計模式，重構，MVC等內容。
2）可測性。
3）高性能。必讀《高性能Javascript》
4）低流量。移動端關注比較多。
5）對於想要學習前端的同學，尤其是自學的夥伴，自學並非永久的，假如沒有定力的還是找個培訓機構吧。
再進一階 · 工程層面：
前端項目同樣面臨軟體生命周期的各個環節，首先是代碼管理，你必須學會使用Svn和Git。其次是代碼的構建，如今前端代碼構建已經不是簡單的壓縮一下了，需要進行依賴管理、模塊合並、各種編譯，比需要學會使用Grunt、Gulp等前端構建工具。
Ⅲ 大家來說說自己的經驗:寫一個web前端頁面要多久時間,比如豆瓣網的首頁.
自已寫的話，可能需要一周時間，如果拷貝的話，可能需要1-3個小時吧。
Ⅳ 前端開發好找工作嗎
一、學習前端這一塊，找工作怎麼樣？
目前前端這一塊市場需求還是很大的，薪資待遇水平也很不錯的，最後涉及到找工作這一塊，有些同學會說，為什麼學前端工作不好找呢？首先對於這個問題，根據相關數據調查顯示，這個問題不僅僅是前端行業有這個問題，各行各業都有這個問題，很多人其實對前端都是一知半解，僅僅學習了一個皮毛，基本什麼也不會，連個像樣的小項目都做不出來，你們覺得這樣的水平好找工作嗎？換做是你當老闆，你會樂意僱傭什麼也不會的員工嗎？
企業需要的是召之即來，來之能用的人才，而不是一半瓶子不滿，半瓶子晃悠的人。反觀我們看一下那些真正有前端技術的同學，很多企業都是搶著要，把自己做的項目，放那一演示，證明自己很牛，公司的求著找你，你的境遇由你的實力決定，不要把自己的無能怪罪於前端這個行業怎麼樣，任何行業都是一樣的，有本事的人才能走的更遠，當然那些前端水平一般的同學，不要糾結，盡管你現在的前端水平有點差，但是你可以通過不斷的學習，來提升自己的水平啊，水平是動態的，是可以不斷的變化的，學習可以改變一切。
對於如何學習WEB前端，或者在學習WEB前端過程中遇見問題自己無法解決，可以到這個WEB前端裙，裡面有最新的學習路線和教程，可以跟著學，有什麼不懂的地方可以隨時在裡面問，後面就是這個WEB前端裙：網頁鏈接。
二、別把自己停留在對前端的迷茫上，學習，提升，才是硬道汪吵理。
很多想學前端的同學，總是停留在一個徘徊觀望的層面，內心充滿了糾結和迷茫，覺得選這行對嗎？怎麼才能一步登天呢？我想說的是，任何一個行業都不容易，都需要你付出努力用心思考堅持，吃苦耐勞才能贏得未來，不要總想走捷徑，沒有，也別把自己當成時代的幸運兒，用一顆平常心，踏踏實實學習，踏踏實實提升自己，才是王道。
一些同學會問我，想學前端，但是不知道應該從哪裡入手？老話說的好，只有站在巨人的肩膀上，才能看的更高更遠，聰明的同學永遠都知道，借鑒別人的精華，迅速的提升自己，所以好的開始，就是跟前端高手學習，因為他們有經驗，有實力，怎麼學，怎麼提升，他們很有經驗，我認識一位前端高手，他每天都在網上做前端免費直播課，我也經常去聽，學到很多東西，講差清的給人一種醍醐灌頂的感覺，別自己摸索學習強多了，學習前端不僅僅是知識層面的提升，還有思維層面的提升。希望同學們做一個聰明的人，一個善於學習的人，一個懂得如何不斷強大自己在這個現實的社會中生存的更好的人，只有你自己的努力才能給自己更強大的未來，而不是抱怨等待猶豫，這只是墮落者的表現。
三、關於自學前端好找工作嗎？
自學前端，很多人虛陵前學不好的，還沒學到找工作的階段，在學習的階段很多同學就已經放棄了。而且我們發現一個問題，很多自學出來的學生，前端的開發水平是很弱的，知識點掌握不扎實，也缺乏前端思維，沒有對這方面的深入理解和思考，缺乏與時俱進的東西，有一種思維被框限的感覺。靠自學即便找到工作，由於水平不高，也很容易造成工資不高，在公司里和專業的出來的有差距，後期晉升也不是太容易。
四、你必須知道的學好前端的六點建議。
（1）夯實基礎,
要成為一名年薪30W的前端工程師，基礎一定要掌握牢固，基礎知識一問三不知，豈不是要貽笑大方。css，js基礎知識一定要掌握得很熟練，你能使用css實現斑馬條紋背景，毛玻璃效果嗎？能給圖片實現濾鏡效果，能實現所有自適應布局效果嗎？原型，原型鏈，閉包是實現設計模式的必備知識，你真的弄懂了嗎？閉包導致內存泄漏的原因是什麼，你弄明白了嗎？ajax跨域的解決方案你可以說幾種？你還是只告訴我jsonp嗎？mit記錄中查看編程思想和邏輯的進化過程，就是一場與大神直接的面對面交流，是一場絕妙的學習之旅。
現在網路課程也十分豐富，有很多技術大牛的課程讓我們直接通過視頻生動的講解快速地學習技術，這何嘗不是一種向大神快速學習的方式呢。
（5）良書益友
雖然現在網路上各種文檔、博客文章已經很豐富了，但是對工作經驗不足，基礎薄弱的同學來說，隨手拿起書，時時能學習也是一種很好的方法，查漏補缺，完整地夯實基礎。
（6）緊跟潮流
現在的前端技術體系更新十分迅速，想著要不要嘗試用下Vue的事彷彿還在昨天，今天一覺醒來就看到尤雨溪宣布要開發Vue3.0了。
前端體系中這兩年SPA已經不是新名詞，PWA，SSR，小程序愈發流行，前端微服務化的趨勢也應運而生，RN,electron在移動端，桌面端的使用也越來越多，ES10標準的發布也沒幾個月了。所以最重要的是突破當前崗位需求的設限，對各種技術融會貫通，創造新的技術框架，做技術的領頭羊，適應時代發展。技術人成長不能再單打獨斗，要學會與人交流，學會將別人的知識為自己所用。
Ⅳ 如何幫助前端新人入門和提高
第一個月主要讓他們對一些專業術語和前端整體的知識體系做了概覽（包括html、css、js、dom、bom等），當然這里必須要去了解的是W3C的誕生以及它的發展歷程，還有各大瀏覽器廠商的發展歷程以及當今不斷變化的市場格局。前半個月對html所有的標簽做一個系統的學習，並對常用的標簽(div\p\h1-h6\span\img\ul\dl\ol\li)做重點的理解和DEMO書寫，這里我特別傳達了語義化的概念給他們希望他們合理的使用標簽，而不是根據自己的心情隨意的使用標簽。後半個月對css的所有屬性做通覽，並對常用的CSS屬性做重點理解和實戰，這里我沒有讓他們對所有的CSS屬性做很詳細的了解（有些CSS屬性可能我們自己一輩子都不會用到，以後遇到的時候學會查API即可）。這過程中還傳達了hack這個概念給他們，以及對待hack的態度和常用實例。
第二個月主要是JS的學習（話說一個月學習JS真的是太難太難了，雖然是個腳本語言但要注意的地方特別多），首先對JS基礎的一些東西的學習（詞法結構、數據類型和值、變數、表達式和運算符、語句等等一些基礎知識），在學JS期間我發現他們明顯比第一個月學習html和css來的煩躁，但好得他們有學過編程，有些基礎。基礎學好之後，就是客戶端的一些知識的學習，dom\bom等等，如何對dom操作，關於性能這方面的東西暫時沒有傳達給他們，等他們達到一定知識程度上我希望他們學習如何優化。後半個月就是讓他們接觸一個JS框架，並學會高效快速的寫出頁面交互代碼。
第三個月基本就是實戰，html+css+js，每周基本都要寫好幾個頁面，然後我會帶他們一起去review，並指出所存在的問題，順便讓他們自己記錄下，總結，下次再寫頁面時避免。