前端的開發過程中主要有以下流程： 編寫代碼->單元測試->檢查語法->整合代碼->生成文檔->壓縮代碼->部署測試環境->測試->發布。
產品最終的結果是原型圖，而原型圖可以理解為設計的草圖
設計師的結果是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中列表間會出現空隙
解決：
1、li中加display:inline;
2、li使用float 然后 clear:both;
3、給包含的文本末尾添加一個空格
4、設置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;