從面試題看考察知識點(四)

IDE

• webstorm
• sublime
• vscode
• atom
• 插件 插件 插件 ! ! !

Git

• 正式項目都須要代碼版本管理
• 大型項目須要多人協做開發
• Git 和 linux 是一個做者
• 服務器如 : github.com coding.net

git add .   // 添加 新增或者修改的文件
git commit -m "xxx"  // 把修改的東西先提交到本地區域, "xxx" 修改的提示
git checkout xxx  // 用於切換分支或恢復工做樹文件。

git push  // 推送到服務器
git pull  // 從服務器拉下來代碼


git branch  // 分支
git checkout -b xxx  // 新建一個分支 
git checkout xx  // 切換分支
git merge xxx  // 用於從指定的commit(s)合併到當前分支的操做。
複製代碼

git branch  // 查看分支 master
git checkout -b dev  // 建立分支 dev,並切換到dev 分支
git branch  // 查看分支 master dev
git checkout master 切換到,aster
git merge dev // 合併分支
複製代碼

---

AMD

• 不使用模塊化的狀況

  • utils.js getFormatDate函數 底層工具
  • a-util.js aGetFormatDate函數 使用getFormatDate
  • a.js aGetFormatDate 業務代碼,層級引用關係

  // utils.js
  function getFormatDate(date, type) {
      // type = 1, 返回 2019-01-12 格式
      // type = 2, 返回 2019年1月12日 格式
      // ...
  }
  // a-util.js
  function aGetFormatDate(date) {
      // 要求返回 2019年1月12日 格式
      return getFormatDate(date, 2)
  }
  // a.js
  var dt = new Date()
  console.log(aGetFormatDate(dt))
  複製代碼

  • 全局變量污染,可能會覆蓋
  • 引用順序不能亂

• 使用模塊化

  • 直接使用<script src="a.js"></script> 其餘根據依賴自動引用
  • 另外兩個函數, 沒作成全局變量, 不會帶來污染和覆蓋

僞代碼
// utils.js
export {  // 暴露出去
    getFormatDate: function (date, type) {
        // type = 1, 返回 2019-01-12 格式
        // type = 2, 返回 2019年1月12日 格式
        // ...
    }
}

// a-util.js
var getFormatDate = require('util.js')  // 引用
export {  // 暴露出去
    aGetFormatDate: function (date) {
        // 要求返回 2019年1月12日 格式
        return getFormatDate(date, 2)
    }
}

// a.js
var aGetFormatDate = require('a-util.js')
var dt = new Date()
console.log(aGetFormatDate(dt))
複製代碼

• AMD
  • require.js
  • 全局 define 函數
  • 全局 require 函數
  • 依賴 Js 會自動 異步加載
  • 使用 require.js

  // util.js
  define(function() {
      return {
          getFormatDate: function (date, type) {
              if (type === 1) {
                  return '2019-02-14'
              } else if (type === 2) {
                  return '2019年2月14日'
              }
          }
      }
  })
  
  // a-util.js
  define(['./util.js'], function (util) {
      return {
          aGetFormatDate: function (date) {
              return util.getFormatDate(date, 2)
          }
      }
  })
  
  // a.js
  define(['./a-util.js'], function (aUtil) {
      return {
          printDate: function (date) {
              console.log(aUtil.aGetFormatDate(date))
          }
      }
  })
  
  // main.js
  require(['./a.js'], function (a) {
      var dt = new Date()
      a.printDate(dt)
  })
  複製代碼

CommonJS

• nodejs 模塊化規範, 如今被大量用前端, 緣由:

  • 前端開發依賴的插件和庫, 均可以從 npm 中獲取
  • 構建工具的高度自動化, 使得使用 npm 成本很是低
  • CommonJS 不會異步加載JS, 而是同步一次性加載出來

• 使用 CommonJs

// util.js
module.exports = {
    getFormatDate: function (date, type) {
        if (type === 1) {
            return '2019-02-14'
        } else if (type === 2) {
            return '2019年2月14日'
        }
    }
}

// a-util.js
var util = require('util.js')  // 獲取
module.exports = {  // 推出
    aGetFormatDate: function (date) {
        return util.getFormatDate(date, 2)
    }
}

// a.js
var aUtil = require('a-util.js')
module.exports = {
    printDate: function (date) {
        console.log(aUtil.aGetFormatDate(date))
    }
}
複製代碼

AMD 和 CommonJS 的使用場景

• 須要異步加載 JS, 使用 AMD
• 使用了 npm 以後建議使用 CommonJS

上線回滾

• 上線和回滾的基本流程

  • 上線流程要點
    • 將測試完成的代碼提交到git版本庫的master分支
    • 將當前服務器的代碼所有打包並記錄版本號, 輩分
    • 將master分支的代碼提交覆蓋到線上服務器, 生成新版本號
  • 回滾流程要點
    • 將當前服務器的代碼打包並記錄版本號, 備份
    • 將備份的上一個版本號解壓, 覆蓋到線上服務器, 並生成新的版本號

• linux基本命令

  • 服務器使用 linux 居多, serve版, 只有命令行
  • 測試環境要匹配線上環境, 所以也是 linux
  • 常常須要登陸測試機來本身配置,獲取數據

// 登陸
ssh name@serve

mkdir test  // 建立文件夾
ls  // 查看裏面的文件
cd xxx  // 到那個目錄
pwd  // 查看當前路徑
cd ..  // 返回升一級目錄
rm -rf test  // 刪除文件夾 test

cp a.js a1.js  // 拷貝文件
mv a1.js src/a1.js  // 移動

rm a.js  // 刪除文件

vim b.js  // 打開 vim, 並建立

cat a.js  // 查看文件內容
head a.js  // 查看文件前面的內容
tail a.js  // 查看尾部的一點內容

head -n 1 a.js  // 只看第一行的內容
tail -n 2 a.js  // 後兩行的內容

grep '2' a.js  // 搜索
複製代碼

---

頁面加載過程

題目

• 從輸入 url 到獲得 html 的詳細過程
• window.onload 和 DOMContentLoaded 的區別
  • 頁面的所有資源加載完纔會執行, 包括圖片, 視頻等
  • DOM 渲染完便可執行, 此時圖片, 視頻還沒加載完

知識點 :

• 加載資源的形式

  • 輸入 url (或跳轉頁面) 加載 html
  • http://baidu.com
  • 加載 html 中的靜態資源
  • <scrript src="./a.js"></script>

• 加載一個資源的過程

  • 瀏覽器根據 DNS 服務器獲得域名的 IP 地址
  • 向這個 IP 的機器發送 http 請求
  • 服務器收到,處理並返回 http 請求
  • 瀏覽器獲得返回內容

• 瀏覽器渲染頁面的過程

  • 根據 HTML 結構生成 DOM Tree
  • 根據 css 生成 CSSOM
  • 將DOM 和 CSSOM 整合造成 RenderTree
  • 根據 RenderTree 開始渲染和展現
  • 遇到 <script> 時, 會執行並阻塞渲染

---

性能優化

• 多實用內存 緩存或者其餘方法
• 減小 CPU 計算 減小網絡請求

1. 加載資源優化
   • 靜態資源的壓縮合並
   • 靜態資源緩存
   • 使用 CDN 讓資源加載更快
   • 使用 SSR 後端渲染, 數據直接輸出到 HTML 中
2. 渲染優化
   • CSS 放前面, JS 放後面
   • 懶加載 (圖片懶加載, 下拉加載更多)
   • 減小DOM 查詢, 對 DOM 查詢作緩存
   • 減小DOM 操做, 多個操做盡可能合併在一塊兒執行
   • 事件節流
   • 儘早執行操做 (如 DOMContentLoaded)

• 緩存

經過連接名稱控制緩存
<script src="abc_1.js"></script>

只有內容改變的時候,連接名稱纔會改變
<script src="abc_2.js"></script>
複製代碼

• CDN

bootcdn    https://www.bootcdn.cn/
複製代碼

• 使用 SSR 後端渲染

  • 如今 Vue React 提出了這樣的概念
  • 其實 jsp php asp 都屬於後端渲染

• 緩存 DOM 查詢

// 未緩存
var i
for (i=0; i < document.getElementsByTagName('p').length; i++) {
    // todo
}

// 緩存了 DOM 查詢
var pList = document.getElementsByTagName('p')
var i
for (i = 0; i < pList.length; i++) {
    // todo
}
複製代碼

• 合併 DOM 插入

var a = document.getElementById('list')

// 要插入 10個li標籤
var frag = document.createDocumentFragment()  // dom片斷
var x, li
for () {
    // ...
}
a.appendChild(frag)
複製代碼

---

安全性

XSS 跨站請求攻擊

• 寫一篇文章, 同事偷偷插入一段 <script>
• 攻擊代碼中, 獲取 coolie, 發送本身的服務器
• 發佈博客, 有人查看博客內容
• 會把查看着的cookie 發送到攻擊者的服務器

預防 XSS

• 前端替換關鍵字, 例如替換 < 爲 &lt; > 爲 &gt;
• 後端替換

XSRF 跨站請求僞造

• 你已登陸一個購物網站, 正在瀏覽商品
• 該網站付費接口 xxx.com/pay?id=100 可是沒有任何驗證
• 而後你收到一封郵件, 隱藏着 <img src="xxx.com/pay?id=100">
• 你查看郵件的時候, 就已經悄悄的付費購買了

預防 XSRF

• 增長驗證流程, 如輸入指紋 密碼 短信驗證碼