筆者是前端小白一枚，在往前端頁面重構方向學習成長中，今天花了一天時間學習相關的文章 在這裡集合一些關於重構基礎概念和成長建議，希望能對想瞭解和學習頁面重構的同學有所幫助 文章中提到的相關文章均說明鏈接地址，利於說明文章來源，也方便讀者深入探討 抱著學習的態度看這些文章，我也希望能夠在文章中加入自己學
筆者是前端小白一枚，在往前端頁面重構方向學習成長中，今天花了一天時間學習相關的文章
在這裡集合一些關於重構基礎概念和成長建議，希望能對想瞭解和學習頁面重構的同學有所幫助
文章中提到的相關文章均說明鏈接地址，利於說明文章來源，也方便讀者深入探討
抱著學習的態度看這些文章，我也希望能夠在文章中加入自己學習的一些想法，歡迎大家評論探討
/*==========================正文分割線=========================*/
學前端的小白第一次聽到頁面重構會問，前端工程師和重構工程師有什麼區別？
那麼下麵在知乎上的問題可以讓你有一定的理解
前端工程師和網頁重構工程師二者有什麼區別和聯繫？
來自 <https://www.zhihu.com/question/19858246>
【前端開發工程師】的工作內容是使用 JavaScript、ActionScript 等語言編寫客戶端腳本，實現動態效果。比如：AJAX 提交文章評論、通過本地存儲保存用戶歷史瀏覽記錄等等。偏開發。
【網頁重構工程師】的工作內容是通過編寫 CSS、合理化頁面結構來實現頁面效果和提升性能。比如：對頁面進行微數據處理和SEO、頁面樣式統一等等。 偏設計。
前者的重點在 JavaScript、ActionScript，甚至 iOS、Android客戶端程式；而後者的重點在 HTML、CSS、SEO 等。
兩者技術重疊度很高，在阿裡巴巴、淘寶和支付寶沒有這樣分工，均稱為【前端開發工程師】，上面的技能都要懂。而在騰訊，WOYO 等公司有明確的分工，但據我所知，以上技能他們也都懂的。
對於兩者的區別，我沒有專門考究，僅聽朋友云云和自己的理解，希望能幫到你。
作者：吳釗
鏈接：https://www.zhihu.com/question/19858246/answer/13172448
來源：知乎
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。
我有寫過一篇關於這兩者的對比
1、頁面重構需要具備足夠的耐心，反反覆復；js工程師要不重覆自己。
2、頁面重構需要瞭解設計師的想法；js工程師需要瞭解後端工程師的想法。
3、頁面重構偏藝術，需要想象力；js工程師偏程式，需要邏輯思維。
4、頁面重構要關註css3，用代碼實現各種效果；js工程師要關註html5，瞭解新的js api。
作者：周文彬
鏈接：https://www.zhihu.com/question/19858246/answer/14726052
來源：知乎
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。
/*======================分割線========================*/
看完了知乎上的回答，你可能會覺得回答的內容有些抽象，那到底重構是做什麼的？
頁面重構師
頁面重構師，從事的工作簡單的說就是“將設計稿轉換成web頁面”，工作內容可以簡單到直接把PSD從PS里導出成網頁，也可複雜到需要考慮頁面中每個標簽的使用，考慮“頁面性能”。
單純的頁面重構，所涉及到的工作內容一般是“分析設計稿=>切圖=>寫HTML和CSS”，雖然看起來很少，但要做好這份工作，絕非所想的那麼容易。原因很簡單：工作內容單一，在時間和工作量上必會很苛刻，往往跟設計師的工作時間是3:1，即設計師給三天的時間，製作只給一天的時間完成；在這種工作強度下，很多人都是靠著對這份工作的喜愛在維持著，一旦工作熱情消失，很容易就會變得枯燥，保持熱情也成了重構工作者（也許是所有參加工作的人）應該具備的能力。
重構不單是做出頁面，而是做出好頁面：
1.結構完整，可通過標準驗證
2.標簽語意化，結構合理
3.充分考慮到頁面在站點中的作用和重要性，並對其進行有針對性的優化
一、設計稿的分析——對設計稿的分析能力
1. 能分清設計稿中的公共與私有的部分
2. 在1的基礎上對各部分的實現方式有一個初步的方案（包括如何切圖、寫結構、寫樣式）
3. 在1的基礎上，準確的給出各部分的實現方案（包括如何切圖、寫結構、寫樣式）
4. 在3的基礎上，能同時考慮方案的擴展性、復用性及頁面性能（包括如何切圖、寫結構、寫樣式）
5. 在4的基礎上，考慮整站的結構分佈（包括文件分佈、目錄結構）
上面這些都是在還沒開始動手製作之前所要做的。
二、切圖
切圖是指將設計稿切成便於製作成頁面的圖片。都有個誤區，覺得切圖就是把圖片切出來，其實並不完全是這樣，還包括把切出來的圖片合併到一起，
怎麼切、從哪切才能將性能最大化，說“切圖是一門藝術”完全不為過。
切圖也可以劃分成幾個階段：
1. 切成所需要的圖片（如何將需要的部分切出來）
2. 在1的基礎上，對切出來的圖片進行一些優化（包括壓縮文件大小、選擇圖片類型）
3. 在2的基礎上，規劃切出來的圖片（包括文件分佈）
4. 在3的基礎上，考慮整體的性能（包括合併圖片、壓縮文件大小）
三、HTML和CSS的編寫
HTML和CSS的編寫是指將上面完成的內容，通過HTML和CSS的編寫，將設計稿轉換成WEB頁面最重要的一塊，也是我們所要重點掌握的內容，把它們放在一起，是因為它們相互的關聯性太強，HTML的寫法會影響到CSS的寫法，它又可以劃分成下麵幾個階段：
1. 還原設計稿視覺效果，並通過標準驗證（HTML）
2. 在1的基礎上，實現多瀏覽器的相容（HTML）
3. 在2的基礎上，標簽語義化（HTML）
4. 在3的基礎上，選擇較優的實現方式（包括模塊化結構，方便程式腳本使用，HTML和CSS）
5. 在4的基礎上，考慮到擴展性、復用性和可維護性（HTML和CSS）
6. 在5的基礎上，考慮到整站的樣式分佈（包括如何實現分佈）
7. 在6的基礎上，樣式寫法的優化（包括技巧的應用）
還有一點是對所遇到問題的解決能力，這一點在不同的階段都可能會遇到，所以沒有寫到上面。
如果你已經達到或超過3、4、5，恭喜你，你已經是一個職業的“頁面重構工作者”了。為了我們自身的發展，關註新技術、技術創新、提高用戶體驗、審美觀、程式腳本的實現方式等，也是十分必要的。大家一起進步吧。
/*========================分割線========================*/
頁面重構的工作內容你已經知道了， 那麼你還有一個很重要的方面要註意，那就是與網頁設計師的溝通配合
乾貨！網頁設計與重構那些事兒
http://www.uisdc.com/website-reconstruction
另一個話題：與重構有關的，有時候設計師也不斷的抱怨頁面仔做出的頁面沒有設計稿上的好看，不是間距大了就是間距小了，不是字體小了就是字體大了，不是圖片壓縮的太厲害就是壓根圖片切少了，或者動畫也不是我們想要的效果。。。。越到這些我不能全怪他們，我們也有責任，畢竟他們不是設計，但是我個人的觀點是重構需要一些PS技巧或設計理論，在設計師沒有時間走查頁面的時候也能輸出比較高質量的頁面。
市面上大大小小的瀏覽器幾十種，常見的大致也有十來種，由於每個瀏覽器自身渲染頁面的差異，並不是同一個頁面在所有瀏覽器上看到的都一樣，我大致用90%的還原度來衡量吧，也可能有些設計師要求重構100%還原，那我表示那位重構相當苦逼，保證頁面跟設計稿90%一致，有不少工作需要設計師和重構共同參與的，比喻設計師在時間允許的情況下做好標註，哪個地方多少像素，用什麼顏色值，高度是多少等標註在頁面上。
重構者不關關註代碼本身，也可以跳出代碼看看視覺表現層，如果確實對幾像素看不出來，可以截圖放在psd上做對比，這個方法很容易自己發現問題，成本也比較低。
在表格做網頁時期，圖片和圖標幾乎都是單個的，載入一張圖片就是一次http請求，伺服器就要讀取一次，頻繁的讀取再加上大量的用戶不斷的訪問，很可能讓伺服器承受不起而掛機。因此需要儘可能的減少http請求，合併背景圖是一個很有效的辦法。
通常背景圖的輸出質量百分比可以調在60-80%，對比較重要的icon、圖片可以調為100%輸出高質量圖片。
在網頁載入過程中，或因為網速原因圖片暫時沒有載入出來而出現短時間空白，建議給該區域預先定義好背景色，以提示用戶該區域是有內容的。
滑鼠停在圖片上時，適當的添加title或者alt，以方便用戶在圖片載入失敗時可以知道這張圖片是乾什麼用的。
按需載入，非同步載入，類似蘋果官網上很多地方用到了非同步載入，好處是提高主要頁面的載入速度，用戶需要的時候才載入其他附件頁面。
少用CSS濾鏡，現在應該很少人用了，基本都是採用優雅降級或提示用戶升級瀏覽器。
網站上線前壓縮CSS和JS文件，註意記得備份。
我喜歡用這個詞，雖然自己並沒有達到代碼優雅，做到代碼優雅還需要不斷的努力，一些細節足夠讓專家看到你是否具備職業化素養，這裡就不班門弄斧了，還是看圖吧~
原文地址：站酷
作者：@Lerroyli 騰訊MIG無線研發部網頁美術設計師
/*======================分割線===================*/
張鑫旭大大則是在他的博文中引入了"門派"的觀點，文章非常長。
在學習過程中也經常能搜到張鑫旭大大相關博文，每一篇文章都特別有張鑫旭獨特文風，
作為一個前端入門者，在此表示深深的感謝
強烈建議能看到這裡的讀者可以去拜訪張鑫旭大大的原版博文，相信讀者會對重構有一個更深的理解。
在這裡截取部分文末作者寫文的初衷和希冀。
CSS頁面重構之“門派”之分
五、CSS頁面重構“門派”意識與包容心
為何要提出“門派”這個概念，我想我希望大家都能以一顆包容的心態對看到其他同行的CSS代碼以及頁面重構方式。
就拿上面QQ校友按鈕與自適應按鈕的例子舉例吧，可能有些同行在使用某一個按鈕時發現這個按鈕的虛框不對稱，可能心中就會暗想，這個網站或者這個頁面製作人員不重視細節，離我還是有些差距的；可能有喜歡自適應按鈕的同行看到QQ校友或是其他很多網站定寬按鈕時，會暗想，這些網站的前端技術真是不咋地，按鈕一點重用性都沒有。
最後的結果可能是相互鄙視與不屑。
其實大可不必，我是體會到了一顆包容的海納百川的心態對於自身的成長非常的重要。
千萬不要拿著自己的那套準則趨評判別人的代碼，去指手劃腳。
您站在直線的A點，怎麼能輕易的就明白B點處所包含的思想呢。
我們應該做的是以一顆開放的心態去看待別人您目前看似不屑的代碼與頁面重構方式，並從中學習到新的東西。
這種心態決定了我們成長的高度。我們要一直保持饑渴的狀態，不要固守自己的那套東西，靈活，吸收與變化。
所以，您要是發現某個頁面某處在IE6下有3像素的偏移，不要輕易斷言，這裡是個bug，這個頁面工程師火候不夠。
或許是這個工程師更看重的頁面擴展性與CSS代碼的數量，對這種一般用戶根本不會註意的問題，其沒有必要再寫一個hack去解決；
您要是看到頁面上的按鈕將文字也作為圖片切進去了，不要覺得這個工程師功力不夠，覺得這樣子按鈕毫無重用性，或許人家更看重的是視覺體驗，寧可多做幾張圖，多幾個按鈕，也要有更好的視覺體驗效果。
六、實用指導意義
雖然沒有明確的“門派”的概念，但是實際上，CSS界確實有隱性的“門派”之分的。
知道這個也是有一定的實際意義的，例如在找工作的時候，（個人觀點，僅供參考），如果您要進入騰訊公司，要清楚騰訊公司寫頁面更看重的是什麼，作為一個頗具規模的大互聯網公司，其流程規範等都已經相對非常成熟了，前輩們繼承下來的東西不是你所能左右的，您所能做的就是代碼風格也頁面重構思想要與之相符。
如果您固守你自己那一套，比如說將擴展性與重用性放在首位，對於體驗尤其是相容性（各個瀏覽器一致）放在次席的話，到頭不幸的肯定是你自己。你需要就是對其產品頁面的CSS代碼（命名，風格）以及HTML重構思想進行一番研究。
對於大公司，說句可能不對的話，中規中矩地寫你的CSS代碼，這往往反而是最好的。
要是，以後，我羽翼漸豐，有幸能夠面試他人的話，我更看重的將會是對方的CSS與HTML代碼的重用性與擴展性是否足夠高，CSS代碼是否足夠簡潔，性能是否足夠高，對於所謂的相容性（也重要）不是最先決的條件。
此時，您的代碼與頁面要是方方正正，規規整整，就像是磚頭房子一樣，我一定會把你劈掉的。我要是流水般的頁面佈局。
/*======================分割線===================*/
以下節選引用白樹在前端早讀課公眾號上的文章，希望對入門前端的同學有所幫助
白樹——博客園：http://www.cnblogs.com/PeunZhang/p/5294461.html
如何學習前端
記得群里有人問我現在開始學習前端還來得及嗎，種一棵樹最好的時間是十年前，其次是現在，想做什麼就馬上去做，並堅持下去。
對於剛步入前端的同學來說，最重要的應該是學習『基礎』知識，像CSS、JavaScript的基礎原理看多幾遍也不會過時，最好找兩本書系統的學習或者上網找教程如w3school線上教程，然後如我前面提到的找項目或者做demo去實踐，將知識轉化為經驗，並堅持下來，這種學習方式最簡單，進步也最明顯。
有的同學說工作忙沒有太多時間學習，其實可以擠出來，例如我通常會利用每天上班前和下班後的時間，大概有一個鐘在公交或地鐵上，看書或者拿著手機學習，特別是早上上班那段路上，學習效率會很高。
我們知道現在前端的水很深，為瞭解決各種業務問題，提高生產效率，技術創新特別快，那麼具備快速的學習能力是你的核心競爭力之一，並不意味著你每樣新技術都要學，應該根據公司的業務需求選擇適合的框架，其它的瞭解下，用到時再學習也不遲，更何況使用新框架的學習門檻不會太高，容易上手，這點上看，剛步入前端的新人是特別有優勢的，至於想要掌握它的深沉原理，需要花費很多的功夫去學習，這個階段你可能達到資深工程師的高度。
每個人的學習方法可能對自己進步很大但不適合別人，人都是獨一無二的，要結合自己的生活習慣，通過實踐中思考，找到屬於自己的方法。
在學習的過程中，遇到問題是怎麼解決的？
在組內有個畢業生妹子，有一次問我3D旋轉動畫的問題，在說完簡單原理後我想把發個例子給她參考，她拒絕了，說要自己思考怎麼做，我笑著給她點贊。
學習遇到問題懂得『獨立思考』去解決是一項最基礎的能力，這種能力完全可以培養並形成習慣，不管是在哪個行業工作，對個人的提升大有幫助。很可惜，我在博客或者群里見過很多剛步入前端的同學，遇到問題就馬上提問，甚至是要求提供現成的demo。
思考後解決不了問題可以百度或谷歌，例如stackoverflow，需具備一點英語能力。實在解決不了再上群等方式『提問』，可以參考張鑫旭寫的《如何提問才能進階成為前端大神》http://www.zhangxinxu.com/wordpress/2015/05/how-to-ask-web-front-question//
/*======================分割線===================*/
如何做一個好的前端重構工程師
來自 <http://kb.cnblogs.com/page/166970/>
作者: smallni 來源: 騰訊TGideas 發佈時間: 2013-01-05 16:58
從專業角度：
明確的自身定位
目前國內將前端分為重構和JS開發的並不多，雖然PS是重構必用的一個軟體，但要知道重構不是"切圖仔"，切圖只是重構工作內容的一部分。我們沒有理由因為自己是重構，而不去學習其他技術，因為你知道你不會幹一輩子的重構，JS不能丟，同樣的對前端新技術要熟知。重構頁面時應該把大部分的時間花在頁面模塊的抽離、性能優化、易維護性、易用性的探索上，而應該花最少的時間去代碼實現。也許你寫出來的頁面有百萬級的用戶在使用，這裡可能有障礙用戶，所以你要考慮各種用戶的感受與體驗，而不僅僅是局限於代碼的完成度上。
註重前端基礎技能
前端的基礎知識就像一個房子的地基，如果地基打不好，一旦遇到一點地震可能就會倒。同時也像一個城堡的各扇門，哪邊的門造的不好，敵人的槍火就可以馬上攻破，所以打好基礎是前端學習更多知識的基石。CSS屬性的特性、html標簽的語義化、JS的基礎知識、W3C的規範（塊格式化上下文、層疊上下文、框模型等），這些可以多花點時間去學習和鞏固，做到能正確合理的使用某個前端技術方案。
正確對待前沿技術
互聯網發展日新月異，前端技術更新也很快，當我們在學css2時，css3已經風靡全球，當我們在學css3時，css4已經被提上了日程。前端的路上永遠學無止境，所以在某項新技術誕生時，就需要我們正確的去審視。
在做好自己本職工作的同時，保持一顆學習的熱情，新技術可以嘗試使用，但請先一定瞭解為什麼要用這個新技術？使用這個技術能為我們帶來什麼改進？在前端技術上，永遠沒有最好的技術方案，只有最合適的技術方案。最新的不一定是最好的，舊的也不一定是差的，切忌盲目跟風學習新技術，要知道自己正在學的是否能夠學以致用。(筆者註：其實更多的時候並不是某項新技術，技術早就誕生，只是一個新的前端解決方案或標準被推動出來了，如CSS3其實在2003年就誕生了）
更好的溝通能力
我們每天可能要和開發、產品、設計、交互、測試等不同的人打交道，所以這就需要我們有一個更好的溝通協調能力，註重一個更好的溝通技巧，減少溝通上的成本。"一切以用戶的價值為依歸"，這也正是互聯網行業所需要的一種理念，在與其他同事溝通時除了真誠待人以外，還需要多為用戶去考慮：我們真的需要這麼做麽？
有選擇的參加技術論壇
如果自己呆在一個小公司，前端人也不是很多，沒有一個很好的氛圍，那麼這時我們就只能通過兩種方式來拓寬人脈：網路和論壇。網路如QQ群、藍色理想等，而面對面的論壇無疑是最真實的一種拓寬人脈的方式。其實現在國內大的環境下，前端類的技術論壇我自己都數不過來，這時有選擇的參加一個論壇顯得尤為重要，而不該不管自己懂不懂、免費還是收費什麼論壇都去參加，其實適合自己的是最重要的。
關註瀏覽器廠商
10年前，IE統治了大半個地球，如今，其他的各大瀏覽器廠商已擠進全球化份額爭奪戰，最離不開前端的就是瀏覽器，關註瀏覽器廠商的動作與格局可以讓你擁有前瞻性的視角。一些瀏覽器廠商的開發者庫：微軟的MSDN，火狐的MDN，谷歌的開發者庫，歐朋（Opera）的開發者庫。另外可以關註下各瀏覽器廠商的推廣活動，火狐中國會在每一次推出新版本時有體驗活動，微軟的最新的IE10推出時國內也有推廣活動，可以瞭解這些新版本瀏覽器的特性以及對css3\html5的支持性如何。
更多的承擔和分享
在平時更多的去承擔一些額外的工作，譬如在重構團隊的協作規範、編碼規範上提出自己的一些合理化建議，輸出一些利於其他同事更快、更高效提升的文檔。平時在自己工作遇到了一些好的工作方法或者對一些新技術的研究可以拿出來和大家分享。重構的團隊氛圍很重要，誰都不希望呆在一個整天只管自己寫代碼的團隊，那樣不管對於個人還是團隊都是不利的。
更多的思考與總結
思考指的是"意識流"，具體是我們在重構過程中的想法和理念，怎麼想決定了我們怎麼做。
作為重構，很多人拿到設計稿之後就是開始埋頭切圖，用各種"奇技淫巧"實現各種需求，我們甚至不會在拿到設計稿之後仔細的做一下分析：如何做一個合理的架構、如何抽取合適的模塊、如何用更優雅的方式和輕量的代碼實現頁面中的需求。
也許是目前大的環境下在催促著我們不斷的向前跑：各種前端論壇大多數都在講某個技術，糾結於某一技術細節的實現，講爛掉的性能優化，可很少有人去講該如何合理的選擇一個前端解決方案，如何解決重構中遇到的一系列不同場景中的問題，以及最重要的我們自己的職業生涯思考：我們是準備寫一輩子代碼麽？
總結也叫"review"，是複習、回顧的意思，review對於重構來講，顯得尤為重要，定期的項目回顧能夠發現項目中存在的問題從而規避以後再次出現。
當然項目回顧是一方面，更重要的是代碼層面的review，不定期的review可以促使我們在一些代碼的細節把控方面做的更優雅，review除了可以提高代碼的品質外，還能加強團隊的協作精神，以及提高團隊的整體技術能力。顯然這是一件非常有意義的事。團隊成員可以在一起review大家的代碼，發現每個人身上的不足和亮點，不然我們真的是只管埋頭自己代碼的苦逼代碼仔了。
從生活角度：
保持閱讀的熱情
網路的信息是碎片化的，在我們沒有很好的梳理碎片能力的時候，一本實物書籍對於慰藉我們的心靈顯得尤為重要。有時生活、工作會讓人壓的喘不過氣來，這時，我們需要去尋找一種方式去釋放壓力，嗯，閱讀是一種很好的方式。
堅持一項運動愛好
自己的工作方法，梳理好需求的優先順序，預留出一定的時間來放鬆自己，這個放鬆一定要讓自己的筋骨活動開，可以是去打打羽毛球，或者去跑步，再或者去健身。只有讓自己的身體變得強大起來，才有更多的能量值去砍怪升級。
保持樂觀的生活態度
善於捕捉生活中的一些細小的幸福顆粒，我們就會經常活在快樂中。上次在騰訊健康加油站聽了一次關於生活的分享，其中提到"生活就像燉雞湯，有時需要加點調料和沾料"，的確，這些沾料就是發現生活中的細小幸福，做一個樂觀、豁達、開朗的前端人士。調節好工作和生活的平衡，讓自己不要再活的那麼累。
嗯，做個好重構真的挺不容易的，無論是從專業角度還是從生活角度，缺一不可，保持一個樂觀、熱情、積極的心，不斷學習，讓自己活得簡單、快樂，此足矣。
其實，你不僅是在重構代碼，也是在重構人生！
來自 <http://kb.cnblogs.com/page/166970/>
