前端開發的通常流程

前端的開發過程當中主要有如下流程： 編寫代碼->單元測試->檢查語法->整合代碼->生成文檔->壓縮代碼->部署測試環境->測試->發佈。
產品最終的結果是原型圖，而原型圖能夠理解爲設計的草圖
設計師的結果是psd文件，他是不少個圖層疊加在一塊兒的結果，而前端的工做結果html頁面，是把不少圖層上的效果，有機的用html組織起來的過程。
前端是把轉化後html交給下游服務端開發工程師，或叫後臺開發，這個html裏邊包括一些交互的js文件等。總的來講前端是一個承前啓後的崗位。
——————————
領導或甲方提出需求，而後產品分析需求，而且根據需求畫出原型圖，而後根據原型圖出設計稿。
出完設計稿團隊評審，事後交與前端製做靜態頁面，而後靜態頁面，交與設計審覈，事後交給開發人員，進行動態數據的添加。
添加完以後，發佈測試環境，產品測試領導審覈，成功後，直接發佈產品環境。或進行版本迭代。
這是整個的一個設計，開發，部署的流程。
————————

此段來自做者：豪情
連接：https://www.zhihu.com/question/32039469/answer/54382815
來源：知乎

產品經理下達任務----UI作圖-------前端根據UI的圖作效果-----與後臺人員交流

工做中流程：
早上開早會，產品經理下達命令，講述昨天完成任務，今日目標。

關於項目中的介紹：
通常有工做經驗的人，經常使用的動態效果都會本身封裝一個插件，好比說圖片輪播，翻頁，TAB切
換頁面，這個時候面試官必定會問你，讓你解釋一下怎麼封裝的，這個時候就把源碼跟解釋一下就行
由於如今行業移動端比較火，先說移動端的項目！

移動端的項目：
用xxxjs作的，用這個JS實現了什麼效果，在總體頁面用什麼佈局模式，都適配那些，若是作到
適配的，介紹一個頁面，從上到下，移動端會有上拉加載，下拉刷新，換頁面加載，這些效果
要提早查好項目中的這些效果看源碼知道是怎麼作的，和麪試官直接說就能夠了，在這個項目
中遇到了哪些問題 如何解決的。（多說項目中的用到哪些技術，這些技術用在項目中的好處）

例如：
我作這個項目用到了
iscroll.js 解決頁面不支持彈性滾動，不支持fixed引發的問題~，實現下拉刷新，滑屏
，縮放等功能~，

在登陸註冊頁，ios下軟鍵盤彈出時擋住了登陸文本框，經檢查最外面盒子用了固定定位，ios
儘可能不要用固定定位。

出現閃屏
解決：消除transition閃屏
.css{ 
/*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/ 
-webkit-transform-style: preserve-3d; 
/*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/ 
-webkit-backface-visibility: hidden; 
}

PC端的項目：

都調了哪些瀏覽器的兼容，在作這個項目中遇到的問題，如何解決的。

例如： IE6 垂直列表間隙的問題
問題：
li中有a且設置display:block時，ie6中列表間會出現空隙
解決：
一、li中加display:inline;
二、li使用float 而後 clear:both;
三、給包含的文本末尾添加一個空格
四、設置width

IE6背景閃爍的問題
問題：
連接、按鈕用CSS sprites做爲背景，在ie6下會有背景圖閃爍的現象。緣由是:IE6沒有
將背景圖緩存，每次觸發hover的時候都會從新加載
解決：
能夠用JavaScript設置ie6緩存這些圖片：
document.execCommand("BackgroundImageCache",false,true);

關於frame
問題：
在IE中能夠用 window.testFrame 取得該frame，FF中不行
解決方法：
window.top.document.getElementByIdx_x("testFrame").src = 'xx.htm'
window.top.frameName.location = 'xx.htm'

禁止選取網頁內容問題：FF須要用CSS禁止，IE用JS禁止解決方法：IE: obj.onselectstart = function() {return false;}FF: -moz-user-select:none;