［360前端星計劃］總部學習筆記（6/6）

時間 2019-11-10

原文原文鏈接

［360前端星計劃］BlackJack(21點)（原生JS）javascript

Day01.對前端的認知＋HTTP性能

時間	內容	講師
10：00	開場白	裕波大大
10：15	10個問題	月影大大

14：00	http協議基礎	屈屈老師
16：00	http性能優化	屈屈老師
17：00	推薦閱讀書目	屈屈老師

我是前端工程師！（10個問題）（月影）

預熱

大家平時怎麼學習前端？
- 本次學習僅僅是引導性交流學習
大家都有github嗎？瞭解到什麼狀況？
- 最終的項目代碼提交到github中
- 關於項目的要求：
  - 只要和前端有關。
  - 有創意，新穎。
  - 課程比較滿，設計產品：簡約美，小而精。
善於思考
- html語義化：便於維護（給人閱讀），便於搜索seo（給機器閱讀）
  - 知乎：如何理解 Web 語義化？
  - 染料典故(think):打破束縛

前端工程師是怎樣的人？
- 頁面實現
- 用戶交互
- 網絡安全
- 頁面性能
前端工程師有怎樣的特質？

html
優秀的前端工程師最重要的是什麼？
- 如何成爲最優秀的前端工程師
- 注重基礎的數學算法
平時工做中前端攻城獅主要作哪些事情？
- 他／她們是如何工做的
前端工程師通常涌什麼開發工具和調試工具？
- 他／她們是如何更好地工做的？
  - Sublime Text 3
  - Atom !!!
  - WebStorm
前端工程師在工做中會遇到哪些挑戰？
- 遇到技術難題，他／她們是如何解決的？
成爲前端工程師有哪些樂趣？
- 前端工程師好玩在哪裏？
前端對公司來講重要嗎？
- 一個公司到底須要不須要前端工程師？
前端工程師如何成長？
- 一個前端工程師如何變得更牛？
大家有什麼問題
- 中間人劫持及解決

HTTP與性能（屈屈）

下午：
        1.http協議基礎
        2.WTO（web性能優化）
        3.推薦書目

http協議基礎前端

node.js基礎教程html5

var http = require('http');

http.createServer(function (request, response) {

    // 發送 HTTP 頭部 
    // HTTP 狀態值: 200 : OK
    // 內容類型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});

    // 發送響應數據 "Hello World"
    response.end('Hello World\n');
}).listen(8888);

// 終端打印以下信息
console.log('Server running at http://127.0.0.1:8888/');

http get／post
本身寫個［瀏覽器］（讀取源代碼而不解釋）
cookie session
http抓包、發包工具(fiddler使用與調試)
http歷史java

WTO（web性能優化）
- http請求與相應
  - keep－alive
  - 同域併發限制
  - 域名散列
  - 協議開銷，websocket（無請求頭）適合用來作小而多的包
  - 合併請求
  - 壓縮
  - cache
    - ETagnode
```
ETag或實體標籤（entity tag）是萬維網協議HTTP的一部分。ETag是HTTP協議提供的若干機制中的一種Web緩存驗證機制，而且容許客戶端進行緩存協商。這就使得緩存變得更加高效，並且節省帶寬。若是資源的內容沒有發生改變，Web服務器就不須要發送一個完整的響應。ETag也可用於樂觀併發控制[1]，做爲一種防止資源同步更新而相互覆蓋的方法。
```
    - Expiresjquery
```
...
```
    - cache-controlios
```
...
```
- 瀏覽器請求的三種方式
  - 在地址欄回車、點擊連接；使用所有緩存。
  - f5/cmd＋r；忽略 Expires、cache-control
- 阻塞渲染
  - 樣式內連
  - 頁面加載時間點
- http性能指標
- http性能測量工具
- http瀑布圖
  
  css3
- 推薦書目：
  - 《圖解http》
  - 《http權威指南》
  - 《web性能權威指南》

總結：

上午：月影大大提出並分享了十個問題，主要是對前端工程師的職位正確認知以及思惟方式的突破還有強調基礎算法思惟的重要性。
下午：屈屈大大分享了http

Day02.HTML與CSS精髓

時間 | 內容 | 講師
-----|------|----
上午（一） | html基礎| 文博大大
上午（二） |css基礎 | 文博大大
| |
下午（一） | css進階 | 文博大大
下午（二） | Web移動開發 | 瓜瓜

桌面名牌的製做與其必要性

HTML與CSS（文博）

HTML基礎：

DOCTYPE 聲明的做用是什麼? 嚴格模式與混雜模式如何區分?

HTML 語言已經存在過久了,目前必然會有一些不一樣版本的文檔存在。爲了可以讓瀏 覽器清楚你的文檔的版本、類型和風格,須要在文檔的起始用 DOCTYPE 聲明指定當前文 檔的版本和風格。若是在網頁中提供了版本信息,則能夠有利於驗證頁面中的代碼是否符合 當前的版本和風格。<!DOCTYPE> 聲明位於文檔中的最前面,處於 <html> 標籤以前,告知瀏覽器的解 析器,用什麼文檔類型規範來解析這個文檔。在嚴格模式(標準模式)中,瀏覽器根據規範呈現頁面;在混雜模式中,頁面以向後兼 容的方式顯示,以防止老站點沒法工做。若是 HTML 文檔包含形式完整的 DOCTYPE,那麼它通常以標準模式呈現。對於 HTML 4.01 文檔,包含嚴格 DTD 的 DOCTYPE 經常致使頁面以標準模式呈現。DOCTYPE 不存在 或格式不正確會致使文檔以混雜模式呈現。

html5設計思想
- 兼容已經內容
- 避免沒必要要的複雜性
- 解決現實的問題
- 優雅降級
- 尊重事實標準
- 用戶開發者瀏覽器廠商標準執行者理論完美
語義化的好處
- 可訪問性
- 搜索引擎優化
- 易讀
- 易維護
元數據元素
- base
- title
- script
- style
- link
- noscript
- meta
  - meta的做用
  - meta擴展HTML
    - robots
    - format－detection
    - renderer
      360獨創，點贊
文檔結構
文本語義
a連接
- target
- href
引用
列表
- 有序
- 無序
- 定義列表
圖片的使用
- 圖片的高寬指定
- 經常使用圖片的格式
  - jpg
    - 照片
  - png
    - 色彩較少時使用
    - 能夠半透明
  - gif
    - 沒法半透明
    - 能夠多幀作動畫
HTML公共屬性
- id
- title
- lang
- style
- class
- 自定義 data-*
  - 開發拓展能力
如何作到語義化？
- 清楚瞭解每個標籤和屬性的語義
- html中指描述內容和結構，樣式留給css
- 手寫html，避免食用生成工具
- 命名遵循行業通用標準
naming things
- Microformats
  - hcard/vcard
  - h-product
  - h-recipe
Schema.org
- schema.org
ARIA:Accessible Rich Internet Applications
HTML如何學習
- 教程
  - webplatform.org
  - codecademy
- 手冊
  - the living standard

上午：CSS基礎

css組成
css代碼風格
使用css
- 選擇器
- 字體
  - 襯線字體
  - 無襯線字體
  - sans-serif備用
  - font-size
    - px
    - x%
    - em
      - 通常是相對於font-size計算值的
      - 用在font-size屬性上時，是相對於父元素的font-size計算值
  - line-height
    - 推薦寫法：值使用純數字，不要帶單位
- 文本
  - color
    - rgb/rgba
    - HSL/HSLA
  - text-align
  - text-decoration

下午：css進階

動手練習
- 內容居中
- 繪製三角形
- 簡易佈局
- 媒體查詢佈局
box-sizing
viewport
塊級元素／行級元素
浮動
- 文字環繞
- 清除浮動
  - 僞類 after
  - clear
  - overflow
block formatting context 防止高度塌陷
動畫
- animation
- transition
工程化
- 代碼風格
  - css style guide
  - 工具

移動Web開發（瓜瓜美女）

開發工具
- google chrome
  - 安卓遠程調試
  - ios遠程調試
viewport（總結）
- 設備像素／css像素
- viewport（視口）
  - 默認視口
    - 佈局視口的默認大小
    - 保證pc網頁正常渲染
  - 理想視口
    - 瀏覽器認爲的理想佈局視口大小
    - 理想視口
什麼是響應式設計？
- 在各個寬度大小的設備瀏覽器中均可以有合理的佈局
- 媒體查詢（）
- flexbox
  - 新舊標準，不一樣瀏覽器不一樣實現，可是:
    能夠經過編譯使得全部瀏覽器都支持
- 自動縮放
- 自適應高清屏
  - background-size: 50% auto;
- webFont
- 響應式Javascript
Touch（交互）
- 兼容鼠標事件
- 移動設備旋轉觸發事件
- touchcancel事件
- click延遲
- test
  - 使用touch事件，完成對元素的拖放

總結：

Day03.JavaScript語言

時間	內容	講師
上午（一）	預熱	月影
上午（二）	算法訓練	月影

下午（一）	JavaScript實踐（上）	月影
下午（二）	算法訓練	月影
下午（三）	jQuery開發	嶽文

JavaScript實踐（上）（月影）

第一天

環境安裝，工具熟悉，課程說明
熟悉熱身，挑戰，漸入佳境
javascript語言精髓
次日

預熱

爲何講原生js？
- jQuery會限制發展
- js是基礎
課程內容
- 語言基礎 ⬇️
- 抽象建模 ⬇️
- 運行環境 ⬇️
- 解決問題 ⬇️
如何突破？
- 鞏固
- 練習
- 思考
- 創造
1.The Coding
- 1-1.Coding Style
  - 程序是給人讀的，只是偶爾讓計算機執行一下
  - 練習
    - 判斷一個整數是不是整數，若是是，返回true，不然，返回false
    - 對給定的一個數組，找出其中第二大元素
    - 給定任意一個字符串，返回它的逆序字符串
  - 註釋
  - 縮進
  - 空行
  - 空格
  - 命名
  - 分號
  - 折行
- 1-2.防護性編程
  - 預防代碼運行時由於本身考慮不周全出現問題
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>防護性編程</title>
</head>
<body>
    <script type="text/javascript">
        function a() {
            return 11;
        }

        console.log(a());       //10

        function a() {
            return 10;
        }

        console.log(a());       //10

        //匿名函數方式防止被破壞
        (function() {
            function a() {
                return 11;
            }

            console.log(a());   //11
        })();

        function a() {
            return 10;  
        }

        console.log(a());       //10
    </script>
</body>
</html>
```
- 1-3.types
  - 預防代碼運行時由於本身考慮不周全出現問題
- 1-4.logic
  - 分支
    - 三目表達式與if語句的選擇
    - alert( 1 && 2 )or( 1 || 2 )
  - 循環
    - while,for應該優先使用for
  - 遞歸
    - 給定一個字符串，例如」abacd「，給定一個次序變換後的結果，例如」abcda「，找出能夠完成這一變換的交換堆棧操做，用i表示push，用o表示pop上面的例子變換，結果是：［"ioioioooio"，"iiiiooooiioi"］。
2.The Javascript
- 2-1.Object、Json
  - 實現一個方法，傳入一個對象，返回這個對象的拷貝
    - 淺拷貝
    - 深拷貝
  - 談談 Object、Json的區別
- 2-2.The functions
  - 數組的排序：實現一個方法，將數值以"3"爲中心進行排序，越接近3的排在越前面。
  - 實現一個函數：傳入一系列數字，求這些數字的和。
  - 實現一個方法：將函數的arguments轉換爲一個真正的數組對象。小技巧

jQuery開發（嶽文）

瞭解jq
- 默認標準
- jq fundation
- 特色
  - 輕量級
  - 兼容css3
  - 跨瀏覽器
- 版本分支
  - 1.x
  - 2.x（新特性）
- 測試選擇器的性能

這裏不得不認可的是：

此節課ppt徹底看不清，且語速奇快，等待結束後的ppt發放。

其餘框架

總結：

Day04.現代前端工做流

現代前端工做流（之傑）

Grunt、Gulp的差異
Grunt、Gulp 文件壓縮

Node.js與think.js（成銀）

nodejs基礎

線程概念
高併發需求
高性能
非阻塞
io.js+node.js
規範於commandjs
模塊特性
- 。
- 。
- 。
- 。
- 。
- 。
- 。
模塊加載策略
- 使用模塊名
- 若不是原聲模塊，自動添加js，json，mode後綴查找
模塊緩存
- 設計優勢：只有第一次加載時纔有IO操做
- 緩存在require.cache中
- 刪除模塊緩存
原生模塊
- http
- fs
- url
- path
- process
- query string
- ……
- 總共十幾個，對於實際開發來講，遠遠不夠
推薦閱讀的模塊文檔
- buffer
- http
- console
- npm安裝模塊（27w）：
```
npm install xxx
```
node異步問題
- callback hell
  - 嵌套太嚴重
  - 不能統一處理錯誤
  - try／catch不能捕獲錯誤
- Promise
  - pending
  - resolved
  - rejected
  - 問題
- Generators
  - 使用 * 和yield
  - 問題
    - 語義化不易理解
    - 須要藉助執行器
    - 沒法和和arrows混用
- async functions
  - 基於promise
  - 返回promise
  - 使用async await 更加語義化
  - 支持和arrows一塊兒使用
  - 不用藉助第三方模塊
  - 錯誤捕獲
  - 並行處理
  - 問題
    - stafe－3
    - 沒有runtime支持

var http = require('http');

http.createServer(function (request, response) {

    // 發送 HTTP 頭部 
    // HTTP 狀態值: 200 : OK
    // 內容類型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});

    // 發送響應數據 "Hello World"
    response.end('Hello World\n');
}).listen(8888);

// 終端打印以下信息
console.log('Server running at http://127.0.0.1:8888/');