基礎強化

• 1. 聊一聊前端存儲。
     (1)老朋友cookie
     (2)短暫的sessionStorage
     (3)簡易強大的localStorage
     (4) websql 與indexeddb
     詳細見 https://segmentfault.com/a/1190000005927232

• 2. BFC
     (1) w3c 規范中的 BFC 定義
     浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline- blocks, table-cells，和 table- captions），以及 overflow 值不為 visiable'的塊級盒子，都會為他們的內容創建新的BFC（塊級格式上下文）。
     在 BFC 中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的 margin 值所決定的。在一個 BFC 中，兩個相部的塊級盒子的垂直外邊距會產生折疊。
     在 BFC 中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣（border-left)（對于從右到左的格式來說，則觸碰到右邊緣）。
     (2) BFC 的通俗理解：
     首先 BFC 是一個名詞，是一個獨立的布局環境，我們可以理解為一個箱子（實際上是看不見 摸不著的），箱子里面物品的擺放是不受外界的影響的。轉換為 BFC 的理解則是：BFC 中的元素的布局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）并且在一個 BFC 中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。
     詳細參見
     http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
     https://www.zhihu.com/question/28433480

前端工程化

• 3. 場景：你是第一天來公司上班的，項目代碼托管在 Gitlab，項目地址: gt@lab.com: org/project.gt，現在有一處代碼需要你修改。請下完成此項任務中，與 git/gitlab相關的操作步驟。
     第一步：$> ssh-keygen-trss-zhangsan@abc.com
     第二步：拷貝公鑰到 gitlab
     第三步：$> git config -global user name zhangsan => $> gitconfig-globaluser.emailzhangsan@abc.com
     第四步：$> gitclonegit (@lab. com:org/project.git
     第五步：$> git checkout -b project-20170227- zhangsan- bugfix
     第六步：修改代碼
     第七步：git status
     第八步：git add
     第九步：git commit- am ' bugfix
     第十步：git push- set-upstream origin project20170227- zhangsan- bugfix

• 4. CSS, JS 代碼壓縮，以及代碼 CDN 托管，圖片整合。
     (1) CSS, JS 代碼壓縮
     可以應用 gulp 的 gulp- uglify, gulp- minify-CSs 模塊完成；可以應用 webpackf 的 Uglify Jsplugin 壓縮插件完成。
     (2) CDN
     內容分發網絡（CDN）是一個經策略性部署的整體系統，包括分布式存儲、負載均衡、網絡請求的重定向和內容管理 4 個要件。主要特點有：本地 Cache 加速，鏡像服務，遠程加速，帶寬優化。關鍵技術有：內容發布，內容路由，內容交換，性能管理。CDN 網站加速適合以咨詢為主的網站。CDN 是對域名加速不是對網站服務器加速。CDN 和鏡像站比較不需要訪客手動選擇要訪問的鏡像站。CDN 使用后網站無需任何修改即可使用 CDN 獲得加速效果。如果通過 CDN 后看到的網頁還是舊網頁，可以通過 URL 推送服務解決，新增的網頁和圖片不需要 URL 推送。使用動態網頁可以不緩存即時性要求很高的網頁和圖片。CDN 可以通過 gt 或 SVN 來管理
     (3) 圖片整合
     減少網站加載時間的最有效的方式之一就是減少網站的 HTPい請求數。實現這一目標的一個有效的方法就是通過 CSS Spritesーー將多個圖片整合到一個圖片中，然后再用 CSS來定 位。缺點是可維護性差。可以使用百度的 fis/webpack 來自動化管理 sprite

• 5. 如何利用 webpack 把代碼上傳服務器以及轉碼測試？
     (1) 代碼上傳
     可以使用 sftp-webpack-plugin，但是會把子文件夾給提取出來，不優雅。可以使用 gulp + webpack 來實現
     (2) 轉碼測試
     webpack 應用 babel 來對 ES6 轉碼，開啟 devtool: "source-map"來進行瀏覽器測試。應用 karma 或 mocha 來做單元測試。

• 6. 項目上線流程是怎樣的？
     (1) 流程建議
     模擬線上的開發環境
     本地反向代理線上真實環境開發即可。（apache, nginx, modest 均可實現）
     模擬線上的測試環境
     模擬線上的測試環境，其實是需要一臺有真實數據的測試機，建議沒條件搭 daily 的，就直接用線上數據測好了，只不過程序部分走你們的測試環境而已，有條件搭 daly 最好。
     可連調的測試環境
     可連調的測試環境，分為 2 種。一種是開發測試都在一個局域網段，直接綁 hosts 即可，不在一個網段，就每人分配一臺虛擬的測試機，放在大家都可以訪問到的公司內網，代碼直接往上布即可。
     自動化的上線系統
     自動化的上線系統，可以采用 Jenkins。如果沒有，可以自行搭建一個簡易的上線系統，原理是每次上線時都抽取最新的 tunk 或 master，做一個 tag，再打一個時間戳的標記，然后分發到 cdn 就行了。界面里就 2 個功能，打 tag，回滾到某 tag，部署。
     適合前后端的開發流程
     開發流程依據公司所用到的工具，構建，框架。原則就是分散獨立開發，互相不干擾，連調時有 hosts。可綁即可。
     (2) 簡單的可操作流程
     代碼通過 gt 管理，新需求創建新分支，分支開發，主干發布
     上線走簡易上線系統
     通過 gulp+ webpack 連到發布系統，一鍵集成，本地只關心原碼開發
     本地環境通過 webpack 反向代理的 server
     搭建基于 linux 的本地測試機，自動完成 build+push 功能

• 7. 工程化怎么管理的？
     gulp 和 webpack

     
     

8. git 常用命令
   Workspace：工作區
   Index/ Stage：暫存區
   Repository：倉庫區（或本地倉庫）
   Remote：遠程倉庫
   詳細參見：http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html

• 9. Webpack 和 gulp 對比
     Gulp 就是為了規范前端開發流程，突現前后端分離、模塊化開發、版本控制、文件合并與壓縮、mock 數據等功能的一個前端自動化構建工具。說的形象點，"Gulp 就像是一個產品的流水線，整個產品從無到有，都要受流水線的控制，在流水線上我們可以對產品進行管理。”另外，Gup 是通過 task 對整個開發過程進行構建。
     Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔等到實際需要的時候再異步加載。通過 loaders 的轉換，任何形式的資源都可以視作模塊，七如 Commonjs 模塊、AMD 模塊、ES6 模塊、CSS、圖片、JSON、Coffeescript、LESS 等
     Gulp 和 Webpack 功能實現對比：從基本概念、啟動本地 server、sass/less 預編譯、模塊化開發、文件合并與壓縮、mock 數據、版本控制、組件控制八個方面對 Gulp 和 Webpack 進行對比。
     詳細參見 http://www.tuicool.com/articles/e632EbA

• 10. Webpack 打包文件太大怎么辦？
      webpack 把我們所有的文件都打包成一個 JS 文件，這樣即使你是小項目，打包后的文件也會非常大。可以從去除不必要的插件，提取第三方庫，代碼壓縮，代碼分割，設置緩存幾個方面著手優化。
      詳細參見http://www.lxweimin.com/p/a64735eb0e2b

• 11. 不想讓別人盜用你的圖片，訪問你的服務器資源該怎么處理？
      目前常用的防盜鏈方法主要有兩種：
      (1) 設置 Referer：適合不想寫代碼的用戶，也適合喜歡開發的用戶
      (2) 簽名 URL：適合喜歡開發的用戶
      詳細參見: https://yq.aliyun.com/articles/57931

• 12. 精靈圖和 base64 如如何選擇？
      css 精靈，用于一些小的圖標不是特別多，一個的體積也稍大，比如大于 10 K（這個沒有嚴格的界定）。
      base64, 用于小圖標體積較小（相對于 css 精靈），多少都無所謂。字體圖標，用于一些別人做好的圖標庫（也有少數自己去做的）用起來比較方便，他的圖標只能用于單色，圖標用只能于一種顏色。

• 13. webpack怎幺引入第三方的庫?
      jQuery實例:

entry: {
page: 'path/to/page.js',
jquery: 'node_modules/jquery/dist/jquery.min.js' }
new HtmlWebpackPlugin({ 
filename: 'index.html', 
template: 'index.html',
inject: true,
chunks: ['jquery', 'page'] // script 
})

• 15. 用過Nginx嗎?都用過哪些?
      nginx是一個高性能的HTTP和反向代理服務器。
      常使用場景:
      (1)反向代理
      (2)網站負載均衡
      詳細參見: http://www.cnblogs.com/hobinly/p/6023883.html

移動端布局與適配