一位女程序猿前端學習7天之「旅」的故事

    好長時間沒有寫博客了，距離上一篇的博客是4月3號，這段時間一直忙着筆試，面試，培訓。故事先從面試開始吧，講講本身的面試和感悟。一個從小在南方長大的孩紙，從沒有去過北方，帶着憧憬和一絲絲的懼怕，託着行李，揹着書包，開始了爲期9天的北京之旅。下面的故事會很長，但願你們有耐心讀完。

4月9號

   收到360的筆試通知過了，而後須要完成前端星計劃的項目，花了3天時間，把項目作完了，而後交了，感受本身作的不是很好，農曆和陰曆之間的轉化算法不清楚，因此這一塊的功能就沒有作，雖然在網上看到過這部分的代碼，但仍是沒有copy上去原本不抱但願的，而後15號的晚上，接到360奇舞團波波老師的電話，通知讓去北京培訓，培訓完後，進行最後一輪篩選，有點猶豫要不要過去，由於，若是最後沒有選上，時間，金錢，精力都白白浪費了。事實證實這種想法是錯的，真的沒有白去 

  原本我也是打算要去北京的，由於接到三個面試都是在北京的，因此準備16號去北京一塊兒面了，而後接到波波老師的通知，便將票改簽到19號去北京。

4月20號 

  19號晚上出發，而後20號達到北京，相對其餘全國各地的同窗，我來的很早，由於21號和HR約了面試，對於這三個面試，多是已經有offer保底的了，我不是很擔憂，經驗教訓，千萬不要不要這麼想，這個一會和你們詳聊。到達北京後，一位師兄去接的我，真的很是很是感謝師兄，人好並且代碼技術很厲害，哈哈！師兄把家讓給我住，本身去和別人擠去了，感動ing，而後20號就睡過去了，坐車坐的昏天暗地。

4月21號

  早上七點鐘起牀，作了兩個小時的公交，達到望京soho，和HR約的是11點，不想說soho真的很高大上，這裏面的大小公司不少，而後我到達16樓，找到了Darel敢玩公司，開始了面試之旅，HR找了個面試官，看起來精神萎頓，無精打彩的，我估計是累的，程序員的宿命。拿着個人簡歷，看着簡歷，不說話，我就主動和他說。

  1：你githubl裏面放了些什麼項目？

  2：談到css動畫效果？我給他看我作的項目，涉及到無縫滾動的效果，面試官以爲我這種作法不優化問我有木有其它方法，我不太清楚，而後他給我講了。。。。。。

  3：面試官很直接，問我帶電腦沒有，我說帶了，他說開代碼。。。。。

  4：問我margin能不能爲負數的問題？面試官讓我敲代碼，我就開敲了，（這個是本身給本身埋坑了，有的話不應說就不要說）

  5：面試官問我，了不瞭解公司？爲何想來公司？對前端的就業前景怎麼樣？--好像答的不夠理想。這個問題仍是得找下中規中距的答案。。。。。

  6：在敲代碼的過程當中，爲了避免冷場，我努力的找面試官說話，事實證實，我是錯的，面試官好像很不喜歡別人問他問題，不應問的不要問，等到面試官讓你問他問題的時候再問

  差很少聊了半個多小時，我才知道，他們公司只有他一我的作前端，加上作Andriod和Ios，研發部加起來一共6我的，他要負責移動端和pc端。個人天，難怪無精打彩，小公司就是小公司，總人員加起來30多我的。後來，就沒有後來了，當天晚上問了HR，掛了。。。。。

  這個面試的反思就是：和麪試官聊天，不要太嘻嘻哈哈，正式專一，不然給人的印象可能就是不踏實，不務實。

  面完Darel敢玩公司後,吃個飯，我就坐上公交坐了2個小時,去面下午的人人的面試。

  首先是，HR拿給我一份筆試題，4頁的原生JS，不過都是基礎題目，我感受不難，寫完差很少花了一個小時，而後HR就找了個程序員面我。

  一面：程序員

  1：看我簡歷，簡歷上附有做品和項目網址，而後他針對性的問了一些問題，看我博客和一些做品。

  2：拿着他的APPLE電腦，叫我回答一些前端的問題，好比浮動，清除浮動；null和undefined的區別;setTimeout的原理，這個給我代碼，問我輸出的值是多少；還有URL加密和解密的問題；跨域問題等等

  問的不是很難，但筆試題目我有的回答錯了，但我仍是很冷靜的分析。差很少聊了40分鐘吧，面試官說，OK我這邊沒問題，你等下，我去幫你叫下O面（前端主管面）

 二面：前端主管面

  我感受他問的也不是很難。只想說，這個前端主管的眼神好堅決，我和他一直對視着，他問我問題的時候，也一直看着我。然而，我就和他對視着，哈哈哈。

 1：json和jsonp以及AJAX的區別？

 2：如何解決跨域問題？我本身給本身埋坑了，說了iframe，然而我也不太深刻了解。我說了五種方法。。。。。

 3：聊到TCP和IP，udp，http,https的問題？前端主管一直揪着udp和tcp的問題不放，事實是並不瞭解UDP，又是本身給本身埋坑，機智的我，把話題轉過去了，然而前端主管還揪着這個問題不放，我就說，這方面我不太瞭解。。。。。。

 4：針對個人筆試題目，寫了整整四大頁的筆試題目，寫的我頭暈目眩的，面試官問了一些問題。。。。。。

 5：是否瞭解公司？這個問題，好像每一個面試官都會問

 差很少聊了40多分鐘吧，我表現的好像還不錯，回答的也不錯。前端主管就叫我等着，找人來面我。。。。

 我感受這兩個面試官，和我都挺合拍的，聊的來，哈哈哈，性格上都很開放，有激情，動力，活力。。。反正和我上午面的那個面試官的精神狀態，徹底不同。。。。。

 三面：HR面

  hr面，反正很輕鬆了，問啥你就回答啥，眼睛看着對方，展現本身的自信，不要低着頭，這是我總結出來的，說話看着對方，是對對方的尊重和真誠，自信。跟我聊實習工資，到崗日期，啥啥啥的，我的性格啊，家庭地址，反正是一堆的我的信息之類的，如實回答就好了。

  面試到此結束，原本22號還有一個窮遊網的面試，但22號要去360大廈進行培訓上課了，因此，我就推了。

 4月22-4月27

  從22號-27號即是在360大廈總部度過的，首先介紹一下北京吧，從網申-筆試-參加360前端星雲計劃-北京培訓，一路路刷人，本身也算幸運的，能過來上課。雖然一路上奔波勞累，但也算值了。這麼多從全國各個選拔過來的小夥伴，以及一羣優秀的老師（都是360技術高管）給咱們上課，收穫很大很大啊！

  每一個老師都給咱們講解了涉及前端的各個不一樣領域的東西。主要包括：http、TCP服務器端原理，JavaScript的開發規範，移動端的介紹，thinkjs（創始人李雲銀老師親自授課）和nodejs，前端架構流，cdn託管，以及如何讀懂技術文檔（編寫javascript高級程序設計的譯者李鬆峯老師講解），每個前沿技術，對本身都是一個衝擊，收穫真不是通常的大啊！真的要很是感謝這些老師，IT界的技術大牛，程序員的境界原來這麼美！

  每個領域，老師們又引伸出了不少前沿的學習工具和新技術，總之，收穫不少啊！列舉一下這些天涉及到的知識點，供學習前端的孩紙參考。按照時間的前後

【22.上】
1.語義化的理解
2.font awesome
3.深入理解問題的原理，修煉代碼的細節
4.與用戶打交道，交互變簡單，跟人打交道，複雜東西簡單化公司日報
5.javascript-的語言重要性腳本，服務器，客戶端，硬件方面
算法，可視化，數據交互，與後端的連接，新的技術，行業的標準w3c標準
chrome下開發，斷點調試工具。研究代碼，而不是複製代碼
關注新技術，寫技術，業務分隔,200人作前端
5.代碼規範，pc jquery mobile MVC think.js ios 安卓app 編譯部署的技術
學習 積累沉澱 分享
程序 模型與思考 掌握本身的方法論，造成體系的東西，js的安全問題
6.中間人攻擊--
客戶端  ----->服務器端  
加私鑰的問題A->B->C 同時給AC加私鑰

【22.下】
1.HTTP與性能優從輸入url到頁面加載完的過程當中都發生了什麼事情？
2.UDP和TCP
3.三次握手，四次揮手
4.請求響應報文格式   TCP Clint/think.js
5.TCP Server升級爲HTTP server
6.亂碼問題
7.什麼是http狀態
8：header的分類 content-length來表示其長度
9：壓縮content-Encoding:gzip
10:get和post的區別？
11：cookie的理解？
12：Accept-Encoding/Content-Encoding
13:抓包工具 wireshark|fiddle|firebug|IE8+自帶工具
14：發包工具 telnet/curl | fiddle
15:http的歷史
16：http性能優化問題？
17：keep-alive減小後續的握手時間
18：同域併發控制？
19：模塊拆分致使更多的請求||合併請求
20：壓縮
21：緩存的問題 Etag||expires|cache-control|
22：瀏覽器請求的三種方式？F5|cmd+r|忽略Expires和cache-control,發起協商請求
23:樣式內聯|
24:用戶心理?
   BigPipe|異步加載|按需加載|加載提示|進度條|預判行爲|
25：http性能指標 Yslow
26：http瀑布圖
27：《圖解http 上野宣》《http權威指南》《web性能權威指南》

【23.上】

1.HTML的關鍵點（doctype與渲染模式|語義化）
2.doctype的做用？文檔聲明|
3.渲染模式 ？w3c標準模式|準標準模式
4.xhtml class必須小寫|屬性爲單引號|含有結束標籤
5.html設計思想？兼容已有內容|避免沒必要要的麻煩|解決現實問題（localstorage/geoloaction）|優雅降級|尊重事實標準|用戶》開發者》瀏覽器廠商》標準制定者》
6.html5標籤（nav|embedded）
7.語義化（元素，屬性及屬性值都擁有語義含義）
8.語義化的好處？可訪問性|便於seo|易讀|易維護
9.base:指定基準url及連接打開方式（traget爲空白）|meta：頁面元數據
10：使用meta擴展html？<blockquote>--一段文字的引用|ol有序|ul無序
11：<figure> alt:當圖片不被識別時，或者在客戶端時，阻止圖片加載，則此時可用alt來表示說明
12；lang屬性--規定元素內容的語言
13：如何作到語義化？瞭解標籤的語義|手寫html，避免生成工具|遵照行業通用標準|行爲樣式結構分開
14：微格式|schema.org|ARIA
15：webplatform.org--學習網站
16：代碼風格？rel:指定外部引入的資源與當前頁面的關係
17：簡單選擇器的選擇組合
18：繼承-重疊樣式，某些屬性會自動繼承其父元素的值，除非顯示指定的一個值19：字體系列|‘font-size|px em（通常是相對於font-size的計算值）  百分比
20：顏色的關鍵字rgba-解決使用opacity時，遮罩層和文字全部的東西都變爲了半透明的狀況。
21：HSL：顏色值，飽和度，亮度
22:對齊方式？justify：分散對齊，適用於多行纔會起做用，

【23.下】
1.盒模型和視覺可視化模型
2.viewport可視區域 視口
3.塊級元素，inline-block元素自己是行級，
4.排版流（文檔流）
  在排版流中塊級元素獨佔一行，塊級元素會受到浮動元素的影響
5.float浮動
6.如何清除浮動？clear|BFC
  浮動元素會對後續的行級元素產生影響
  ：before|:after|僞元素，僞類
7.BFC：塊級格式化上下文，把本身裏面的東西框起來，包括浮動，使其不影響外面的元素
  BFC的建立：overflow:hidden|overflow:auto|BFC不會和塊級元素重疊
  BFC做用：雙欄佈局|清除浮動|防止margin重疊
8：position:fixed相對於viewport進行固定的
9：堆疊層次 z-index
10：兄弟選擇器 h2~p--跟h2並列的共樣式
  input:checked~nav{}---當選擇框被選擇後，對nav進行一系列的操做
11：background size背景圖片的大小
12.transition :all 2s--全部的都一塊兒發生變化
13：代碼風格
14:代碼規範：BEM|smacss
15:css預處理器：less|sass|postcss
16：mobile和pc端
17：viewport
18:Media Query-媒體查詢
19：flebox屬性

【24.上】
1.變量的賦值？動態綁定|動態類型
2.JQuery
3.zepto下data方法只能處理字符串

【25.上】
1.前端工做流問題
2.合併圖片的好處？減小內存開銷|減小請求的次數
3.grunt-編譯管理工具 grunt-cli(可解決版本問題，針對不一樣的版本進行兼併)|
4.js的注意點？代碼審查->編譯-> 合併->壓縮
5.針對css？預編譯(sass|less|stylus)->後處理(autoprefixer|Mixin)->合併->壓縮
6.圖片處理？壓縮->合併（css spirte）
7.完整處理？處理js->處理css->處理圖片->自動化測試->處理版本(cdn處理)->發佈上線
8.開發版本？提供靜態服務器|只作基礎編譯|實時編譯|
9.GULP與Grunt的區別？
10.GULPfile.js配置|執行？
11.webpack配置|和webpack執行
12.FIS配置工具

【25.下】
1.讀寫文件
2.建立http服務
3.c10k問題
4.Nginx-異步非阻塞的問題--即高性能的HTTP和反向代理服務器
5.io.js
6.node.js的模塊--基於CommonJS
  一個單獨的文件就是一個模塊|
  var circle=require('.\circel.js')-相對路徑的方式
  絕對路徑
7.模塊加載的策略
8.刪除模塊緩存
9.原生模塊 http|url...
10.npm--把全部的模塊進行統一管理，直接將npm打包到node裏面
11.node.js框架--express|koa|sails.js|think.JS
12.ES6/7特性以下：語法改進|開發方便|
13.arrows 省略function關鍵字和return|
14.classes/extends繼承類/super調用方法
15.template strings
16.destructuring
17.default+rest+spread
18.modules
19.node.js最大的問題？異步的問題
20.callback hell  嵌套嚴重|不能統一處理錯誤|try/catch不能捕獲錯誤
21.promise--pedding（可轉換爲另外的兩種狀態）|resolved（成功）|rejected(失敗)
22.callback包裝爲promise
23.promise的問題？this指向問題|局部變量須要藉助外部變量才能進行
24.generators function *gen(){}
25.generators問題？語義不易理解|須要藉助執行器|沒法與arrows一塊兒使用|好比yield *yield
26.AsYnc functions--基於promise|返回promise|使用async/wait更加語義化|錯誤捕獲|並行處理|問題？
   1.stage-3
   2.沒有Runtime支持
27.Babel 基於v8  Babel is a javascript compiler
28.ES6/7+Babel
29.demo npm install -g npm@3 -
   demo npm thinkjs module admin
   admin->controller->user.js->
   view->admin->

【26.上】
1.組織與結構 LC
2.崗位分工以及分工合做流程
  技術發展路線圖
  前端後端架構模式
3.web平臺部--9個部門
4.網站架構
5.網站架構模式 MVC分層|分割|分佈式|集羣|緩存|異步|冗餘|自動化|安全
6.高性能？前端性能優化|服務器性能優化|存儲性能優化
7.前端性能優化？
  減小HTTP請求|使用瀏覽器緩存|啓用壓縮|css放在頁面最上面，js放在下面|減小cookie傳輸|cdn加速|
  延遲一切能延遲的：bigRender,switchable|就近原則
8.分佈式緩存：緩存熱點數據、hash算法取模，memcache，
9.高可用？getlab/git
10.代碼協做管理
11.導航業務分析
12.技術一覽？導航特徵頁面簡單|數據靜態化|使用NGINX,異步，抓取文件到本地文件
13.前端架構|瀏覽器優化技術|cdn|動靜分離，靜態資源獨立部署|DNS|應用開發架構|開發框架
   動態頁面靜態化|業務拆分|虛擬化服務器|分佈式消息|分佈式緩存|數據採集與監控|瀏覽器數據採集|服務器性能數據採集|系統監控報警|架構誤區

【26.下】
1.原型：prototype是js構造器的一個特殊的屬性，它上面的全部的屬性和方法被它的全部實例所共享。
2.asynchronous
  異步：是單線程的javascript處理觸發任務。
3.document ready
4.捕獲階段在最外層，先於內層
  若是中間存在阻止冒泡的話，會將後面的事件推到最前面進行，即捕獲階段。
5.transform-origin:0 45px
   Math.cos(Math.PI*2*p)*145+'px'
        sin
6.兼容性？框架底層封裝和polyfill（實現標準庫)
7.return [].slice.call(arguments).reduce(function(a,b){return a+b;})--支持多個傳參

【27.上】
1.使用cdn以及開發工具
2.影響網絡傳輸速度的因素
3.cdn是什麼？接管dns|用戶訪問cdn節點|cdn節點內容來自源站
4.dig|nslookup--可看到dns解析
5.cdn的優點？之前端角度看cdn
6.用於cdn加速的內容有哪些？
7.靜態資源？依據url定位資源|內容容許被cdn節點緩存
8.cookie.frame.domain
9.動態資源是什麼？能夠被cdn加速嗎？
10.jsonp方式的調用？經過動態添加的方式。改變script中的src
11.合理回源
12.靜態頁面資源
13.前端公共庫
14.ISP--運營商
15.流媒體加速
16.chrome|IE
17.高級js程序設計--李鬆峯老師
18.如何閱讀和翻譯？
19.如何把翻譯一本書？
20.注意積累
 

總結

  總而言之，收穫不少，方向更加明確了，知道本身要學習哪些東西，雖然東西不少，慢慢來，很感謝360的各位大牛，分享本身的一些乾貨，相信，通過培訓的46名同窗將來都能進入很棒的互聯網公司。（忘了說了，一塊兒上課的有兩位清華大學的學生，還有一半的研究生），嗚嗚，感受本身弱爆了，不過，學到了不少東西。

  雖然360面試掛了，但我仍是大三，還有機會，秋招能夠繼續，哈哈哈，努力好好修煉，此次北京培訓，對本身的眼界和技術各方面，都有了一個從新認識。前方很美好，繼續努力，繼續修煉。對於360面試的問題，比較細節，本身須要增強各方面的聯繫，多敲代碼，多思考，多總結！

  好了，碼了3個小時的字，一位女程序員的故事到此結束，但願正在學習前端的大家，看到這篇文章都能有所收穫，一字一句，都是本身的真實感覺。將來很美好，咱們都要作一個努力上進的人，比你優秀，比你有天賦，比你學校好的人，太多太多，你只有更努力，更上進，更勤奮！加油！