怎麼加快網頁編寫速度？

01-04

今天被主管說編寫網頁速度太慢了，大概用了8-9個小時完成一個網頁靜態主頁的編寫和動態（js）廣告的加入。網頁就是一般的企業網站（音樂類培訓公司）。但是自己一路上會很認真的去寫，包括一些樣式的調整。有時會卡在某個效果上面，比如經常對導航的li的位置調整等等。所以想問問，怎麼加快自己編寫網頁的速度？
————————————————————————————————————————————
【整理】（全都是知友的知識，感謝你們，希望我能全部消化）

方法

從布局開始到掌握細節，明確把握整體。仔細觀察設計圖，劃分區域，相似區塊歸類。

整理自己常用的CSS組件以及特殊代碼和樣式，集合自己的一套命名方式，隨時調用。

加強HTML語義了解，細化調整，控制好每一個元素，不讓網頁一層不變。

學會查找資料，收集常用知識，做好HTML基礎。

微創新，熟練運用公共架構，節省編寫成本。

練習手速，慢不要緊，要慢得有效率，有理由。過程迭代，及時反饋。多思考，忌浮躁。

工具

插件：zencoding（emmet）

CSS樣式：sassless

JS：coffeescript

調試工具：firebug(firefox)、chrome調試器

站點

網頁設計和設計靈感的12個無價站點

Blueprint: A CSS Framework

Web標準化 DIV+CSS專題

css和javascript在IE和Firefox中二十三個不同點

前端開發懶人時代已到來

GitHub Pages

我也覺得你太慢了，你應該不是第一次設計網頁了。

做碼農的，如果是搞工程應用的，比如寫網頁之類的工作，一定要學會查找資料，廣泛閱覽，收集輪子。否則書到用時方恨少，卡到一個小問題上半天解決不了是很讓人沮喪的。不過前提是該具備的基礎知識要先打牢固，比如不同瀏覽器對同樣的HTML標籤和CSS樣式的展示方式（可搜索「CSS hack」），對JS中某些特定對象的處理方式等。然後再去看別人做好的東西就事半功倍了，回頭再做自己的網頁時，能直接用的就拿來用（注意別侵權），或者按自己理解了的重寫一遍，時間上肯定比你閉門造車快多了。功夫都是先跟別人學，等融會貫通了自然獨成一派才能有所創新。

給你幾個輪子：

網頁設計和設計靈感的12個無價站點

Blueprint: A CSS Framework

Web標準化 DIV+CSS專題

css和javascript在IE和Firefox中二十三個不同點

一開始寫的慢是正常的。至於說速成的那些方法，要注意不要把一些壞習慣當成好習慣養成了。前端里有不少人完成頁面的效率是高的，但是用了錯誤的方法，以至於可維護性變差。而且一旦養成了這種習慣和思維定式，以後再改是很痛苦的。

1）先做整體，再做細節！看到設計圖，首先要有一個整體的把握。

2）有自己整理的css「組件」。

3）zencoding 插件！

4）加強熟悉HTML語義。練習ID，class命名。即合理，又規範。

如果你已經有了一定基礎，可以嘗試這麼辦：

1.寫的層面，你可以利用工具簡寫。

html：利用zencoding，或者emmet for sublime
css：利用sass或者less
js：考慮coffeescript
詳細可以參閱：http://blog.youyo.name/archives/lazy-frontend-developer.html

2.提升一點，你基於一個成型的可拓展的工具積累類庫、插件、做封裝等。

你可以關注jQuery社區，積累你覺得好的jQ插件，把你通用的代碼也寫成插件
你可以關注seajs社區，積累一些適用於自己的cmd模塊
你可以活躍於github，star一些好的庫，用的時候很方便找到他

先寫這麼多，以後想到回來修改，希望對你有用。

磨刀不誤砍柴工, 稱手工具, 菜鳥推薦IDE例如webstorm,高手就不用我推薦了,你們用記事本vi st是不會出錯的

花時間學習調試器 chrome的調試器和firefox里的firebug之類的,事半功倍

1樓的, zen coding 新版叫 emmet 出來挺久了,很不錯

唯手熟爾,每天瘋狂幹活,提高APM,如果腦子跟不上手速就繼續做到麻木,如果手速跟不上腦速就繼續做到麻木

方向錯了,打字再快也沒用,平時多學習,基礎也好技巧也好

例如我這種從業四五年的老油條,最影響工作效率的就是需求變動.和需求不明確.. 打字再快也比不上變化..

緩解方案就是,

做事之前確認好方方面面,避免一些遺漏影響評估

OO的去寫CSS和JS,以不變應萬變

最近在嘗試 BEM,一種高效率的詭異CSS寫法...

等待其他人的好方法。

-----------------------------------------------我是胡說八道的分割線------------------------------------------

慢工出細活，寫程序經常寫著寫著就想加個新功能，結果就是導致時間變長，排除手生搜索資料所花的時間，這部分時間是硬性的，除非你不加這部分功能。

但你添加這個功能或做得更好一些，所花的時間變長，主管就會覺得你慢。

原理：還記得咱們打開網頁太慢時那個一轉一轉的小圈么？還記得咱們安裝軟體的時候那個進度條么？

快速迭代，過程反饋。先給主管一個基礎的模板，添一個功能or改一部分標籤就給主管反饋一下。

這樣雖然本質上你幹活的速度沒有增加，但是主管會知道你一直在幹活，所花的時間是必要的。

寫網頁肯定是有技巧和方法的，對於一個簡單的網頁來說，按照下面的思路寫是最好的，也是我幾年來總結出來的：

1、在製作一個網頁的時候，一定要有設計圖。不是那種草圖，是那種有公司設計部門已經設計好的網頁圖片。

2、仔細觀察圖片，把網頁分區塊，從上到下依次劃分出來。比如網頁頭部、導航、第一屏、廣告區、第二屏、廣告區2、頁尾等等。

3、根據劃分好的區塊找共同點開始寫css，最好能重用，把相似的區塊歸類。

4、細化調整，網頁中不可能有一成不變的，讓每一個元素都可以隨意控制。簡單的增加和減少類，寫公共類。

5、使用css框架和建立自己的css庫，這是一個好的方法，很多大的公司已經開始使用這個了。比如百度和騰訊，看他們的開發博客就能知道這些東西，多學習。

6、一些特殊的樣式代碼及時保存，不要寫重複性的代碼。

熟能生巧。開始的時候網頁架子慢慢搭，之後每次修改都會感謝自己花了時間在搭架子上。

很奇怪，8、9小時不覺得很慢啊。你們需求開始前，不會排期嗎？我覺得正常的流程是這樣的：提出需求，開發去預估下時間（肯定要含有buffer和聯調的時間）給老大。只要在這個時間完成，老大你什麼都不要說！我可是按時完成的！

當然，如果為了提高開發效率，除了本身技能和技巧需要熟練，通過適當的工具也是可以提高效率的：比如jade、stylus、coffee、工作流構建工具等。

加油！要自信啊，不要讓leader牽著頭走！他付多少錢，就招什麼樣的人才。你也是在不斷工作，不斷學習。他憑什麼不給你工作中學習、試錯的時間成本。如果他要直接找個分分鐘搞定的高手，那就需要拿出更高的工資。

使用各種框架

8、9個小時如果還包含中間出問題的時候上網搜索解決方案的話，對新手來說，其實不算慢了。

質量是第一位的，要那麼快做什麼呢。

一回生，二回熟嘛，多寫寫就快了。

火雲邪神不是也說過么：天下武功，唯快不破。

拋棄ie可以減少至少30%的代碼