如何學習頁面重構/對頁面重構理解

筆者是前端小白一枚，在往前端頁面重構方向學習成長中，今天花了一天時間學習相關的文章

在這裏集合一些關於重構基礎概念和成長建議，但願能對想了解和學習頁面重構的同窗有所幫助

文章中提到的相關文章均說明連接地址，利於說明文章來源，也方便讀者深刻探討

抱着學習的態度看這些文章，我也但願可以在文章中加入本身學習的一些想法，歡迎你們評論探討

 

/*==========================正文分割線=========================*/

 

學前端的小白第一次聽到頁面重構會問，前端工程師和重構工程師有什麼區別？

那麼下面在知乎上的問題可讓你有必定的理解

 

前端工程師和網頁重構工程師兩者有什麼區別和聯繫？

來自 <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

來源：知乎

著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

 

我有寫過一篇關於這二者的對比

一、頁面重構須要具有足夠的耐心，反反覆覆；js工程師要不重複本身。

二、頁面重構須要瞭解設計師的想法；js工程師須要瞭解後端工程師的想法。

三、頁面重構偏藝術，須要想象力；js工程師偏程序，須要邏輯思惟。

四、頁面重構要關注css3，用代碼實現各類效果；js工程師要關注html5，瞭解新的js api。

 

做者：周文彬

連接：https://www.zhihu.com/question/19858246/answer/14726052

來源：知乎

著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

 

 /*======================分割線========================*/

 

看完了知乎上的回答，你可能會以爲回答的內容有些抽象，那到底重構是作什麼的？

頁面重構師

頁面重構師，從事的工做簡單的說就是「將設計稿轉換成web頁面」，工做內容能夠簡單到直接把PSD從PS裏導出成網頁，也可複雜到須要考慮頁面中每一個標籤的使用，考慮「頁面性能」。

單純的頁面重構，所涉及到的工做內容通常是「分析設計稿=>切圖=>寫HTML和CSS」，雖然看起來不多，但要作好這份工做，絕非所想的那麼容易。緣由很簡單：工做內容單一，在時間和工做量上必會很苛刻，每每跟設計師的工做時間是3:1，即設計師給三天的時間，製做只給一天的時間完成；在這種工做強度下，不少人都是靠着對這份工做的喜好在維持着，一旦工做熱情消失，很容易就會變得枯燥，保持熱情也成了重構工做者（也許是全部參加工做的人）應該具有的能力。

重構不單是作出頁面，而是作出好頁面：

1.結構完整，可經過標準驗證

2.標籤語意化，結構合理

3.充分考慮到頁面在站點中的做用和重要性，並對其進行有針對性的優化

1、設計稿的分析——對設計稿的分析能力

1. 能分清設計稿中的公共與私有的部分

2. 在1的基礎上對各部分的實現方式有一個初步的方案（包括如何切圖、寫結構、寫樣式）

3. 在1的基礎上，準確的給出各部分的實現方案（包括如何切圖、寫結構、寫樣式）

4. 在3的基礎上，能同時考慮方案的擴展性、複用性及頁面性能（包括如何切圖、寫結構、寫樣式）

5. 在4的基礎上，考慮整站的結構分佈（包括文件分佈、目錄結構）

上面這些都是在還沒開始動手製做以前所要作的。

2、切圖

切圖是指將設計稿切成便於製做成頁面的圖片。都有個誤區，以爲切圖就是把圖片切出來，其實並不徹底是這樣，還包括把切出來的圖片合併到一塊兒，

怎麼切、從哪切才能將性能最大化，說「切圖是一門藝術」徹底不爲過。

切圖也能夠劃分紅幾個階段：

1. 切成所須要的圖片（如何將須要的部分切出來）

2. 在1的基礎上，對切出來的圖片進行一些優化（包括壓縮文件大小、選擇圖片類型）

3. 在2的基礎上，規劃切出來的圖片（包括文件分佈）

4. 在3的基礎上，考慮總體的性能（包括合併圖片、壓縮文件大小）

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的基礎上，樣式寫法的優化（包括技巧的應用）

還有一點是對所遇到問題的解決能力，這一點在不一樣的階段均可能會遇到，因此沒有寫到上面。

若是你已經達到或超過三、四、5，恭喜你，你已是一個職業的「頁面重構工做者」了。爲了咱們自身的發展，關注新技術、技術創新、提升用戶體驗、審美觀、程序腳本的實現方式等，也是十分必要的。你們一塊兒進步吧。

來自 <http://baike.baidu.com/link?url=EEaNzQUA7rFpIRXDhdppbtJALT9deUibvugT_txpbgZ5v2GXTiaWF_M797iP_drfCrZI87fE3nvapsclHYA0za>

/*========================分割線========================*/

 

頁面重構的工做內容你已經知道了， 那麼你還有一個很重要的方面要注意，那就是與網頁設計師的溝通配合

 

乾貨！網頁設計與重構那些事兒

http://www.uisdc.com/website-reconstruction

 

另外一個話題：與重構有關的，有時候設計師也不斷的抱怨頁面仔作出的頁面沒有設計稿上的好看，不是間距大了就是間距小了，不是字體小了就是字體大了，不是圖片壓縮的太厲害就是壓根圖片切少了，或者動畫也不是咱們想要的效果。。。。越到這些我不能全怪他們，咱們也有責任，畢竟他們不是設計，可是我我的的觀點是重構須要一些PS技巧或設計理論，在設計師沒有時間走查頁面的時候也能輸出比較高質量的頁面。

市面上大大小小的瀏覽器幾十種，常見的大體也有十來種，因爲每一個瀏覽器自身渲染頁面的差別，並非同一個頁面在全部瀏覽器上看到的都同樣，我大體用90%的還原度來衡量吧，也可能有些設計師要求重構100%還原，那我表示那位重構至關苦逼，保證頁面跟設計稿90%一致，有很多工做須要設計師和重構共同參與的，比喻設計師在時間容許的狀況下作好標註，哪一個地方多少像素，用什麼顏色值，高度是多少等標註在頁面上。

重構者不關關注代碼自己，也能夠跳出代碼看看視覺表現層，若是確實對幾像素看不出來，能夠截圖放在psd上作對比，這個方法很容易本身發現問題，成本也比較低。

在表格作網頁時期，圖片和圖標幾乎都是單個的，加載一張圖片就是一次http請求，服務器就要讀取一次，頻繁的讀取再加上大量的用戶不斷的訪問，極可能讓服務器承受不起而掛機。所以須要儘量的減小http請求，合併背景圖是一個頗有效的辦法。

一般背景圖的輸出質量百分比能夠調在60-80%，對比較重要的icon、圖片能夠調爲100%輸出高質量圖片。

在網頁加載過程當中，或由於網速緣由圖片暫時沒有加載出來而出現短期空白，建議給該區域預先定義好背景色，以提示用戶該區域是有內容的。

鼠標停在圖片上時，適當的添加title或者alt，以方便用戶在圖片加載失敗時能夠知道這張圖片是幹什麼用的。

按需加載，異步加載，相似蘋果官網上不少地方用到了異步加載，好處是提升主要頁面的加載速度，用戶須要的時候才加載其餘附件頁面。

少用CSS濾鏡，如今應該不多人用了，基本都是採用優雅降級或提示用戶升級瀏覽器。

網站上線前壓縮CSS和JS文件，注意記得備份。

 

我喜歡用這個詞，雖然本身並無達到代碼優雅，作到代碼優雅還須要不斷的努力，一些細節足夠讓專家看到你是否具有職業化素養，這裏就不班門弄斧了，仍是看圖吧~

原文地址：站酷

做者：@Lerroyli 騰訊MIG無線研發部網頁美術設計師

 

/*======================分割線===================*/

 

張鑫旭大大則是在他的博文中引入了"門派"的觀點，文章很是長。

在學習過程當中也常常能搜到張鑫旭大大相關博文，每一篇文章都特別有張鑫旭獨特文風，

做爲一個前端入門者，在此表示深深的感謝

強烈建議能看到這裏的讀者能夠去拜訪張鑫旭大大的原版博文，相信讀者會對重構有一個更深的理解。

<http://www.zhangxinxu.com/wordpress/2010/08/css%E9%A1%B5%E9%9D%A2%E9%87%8D%E6%9E%84%E4%B9%8B%E2%80%9C%E9%97%A8%E6%B4%BE%E2%80%9D%E4%B9%8B%E5%88%86/>

在這裏截取部分文末做者寫文的初衷和希冀。

 

CSS頁面重構之「門派」之分

5、CSS頁面重構「門派」意識與包容心

爲什麼要提出「門派」這個概念，我想我但願你們都能以一顆包容的心態對看到其餘同行的CSS代碼以及頁面重構方式。

就拿上面QQ校友按鈕與自適應按鈕的例子舉例吧，可能有些同行在使用某一個按鈕時發現這個按鈕的虛框不對稱，可能心中就會暗想，這個網站或者這個頁面製做人員不重視細節，離我仍是有些差距的；可能有喜歡自適應按鈕的同行看到QQ校友或是其餘不少網站定寬按鈕時，會暗想，這些網站的前端技術真是不咋地，按鈕一點重用性都沒有。

最後的結果多是相互鄙視與不屑。

其實大可沒必要，我是體會到了一顆包容的海納百川的心態對於自身的成長很是的重要。

千萬不要拿着本身的那套準則趨評判別人的代碼，去指手劃腳。

您站在直線的A點，怎麼能輕易的就明白B點處所包含的思想呢。

咱們應該作的是以一顆開放的心態去看待別人您目前看似不屑的代碼與頁面重構方式，並從中學習到新的東西。

這種心態決定了咱們成長的高度。咱們要一直保持飢渴的狀態，不要固守本身的那套東西，靈活，吸取與變化。

因此，您要是發現某個頁面某處在IE6下有3像素的偏移，不要輕易斷言，這裏是個bug，這個頁面工程師火候不夠。

或許是這個工程師更看重的頁面擴展性與CSS代碼的數量，對這種通常用戶根本不會注意的問題，其沒有必要再寫一個hack去解決；

您要是看到頁面上的按鈕將文字也做爲圖片切進去了，不要以爲這個工程師功力不夠，以爲這樣子按鈕毫無重用性，或許人家更看重的是視覺體驗，寧肯多作幾張圖，多幾個按鈕，也要有更好的視覺體驗效果。

6、實用指導意義

雖然沒有明確的「門派」的概念，可是實際上，CSS界確實有隱性的「門派」之分的。

知道這個也是有必定的實際意義的，例如在找工做的時候，（我的觀點，僅供參考），若是您要進入騰訊公司，要清楚騰訊公司寫頁面更看重的是什麼，做爲一個頗具規模的大互聯網公司，其流程規範等都已經相對很是成熟了，前輩們繼承下來的東西不是你所能左右的，您所能作的就是代碼風格也頁面重構思想要與之相符。

若是您固守你本身那一套，好比說將擴展性與重用性放在首位，對於體驗尤爲是兼容性（各個瀏覽器一致）放在次席的話，到頭不幸的確定是你本身。你須要就是對其產品頁面的CSS代碼（命名，風格）以及HTML重構思想進行一番研究。

對於大公司，說句可能不對的話，中規中矩地寫你的CSS代碼，這每每反而是最好的。

要是，之後，我羽翼漸豐，有幸可以面試他人的話，我更看重的將會是對方的CSS與HTML代碼的重用性與擴展性是否足夠高，CSS代碼是否足夠簡潔，性能是否足夠高，對於所謂的兼容性（也重要）不是最早決的條件。

此時，您的代碼與頁面要是方方正正，規規整整，就像是磚頭房子同樣，我必定會把你劈掉的。我要是流水般的頁面佈局。

 

來自 <http://www.zhangxinxu.com/wordpress/2010/08/css%E9%A1%B5%E9%9D%A2%E9%87%8D%E6%9E%84%E4%B9%8B%E2%80%9C%E9%97%A8%E6%B4%BE%E2%80%9D%E4%B9%8B%E5%88%86/>

 

/*======================分割線===================*/

如下節選引用白樹在前端早讀課公衆號上的文章，但願對入門前端的同窗有所幫助

白樹——博客園：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/>