一些前端基礎(chǔ)問(wèn)題

  1. typeof出來(lái)的類(lèi)型
    • number, string, boolean, object, function, undefined
  2. 隱式類(lèi)型轉(zhuǎn)換的情形
    • 加減乘除號(hào)，+ - * /
      • +號(hào)用作數(shù)字相加時(shí)，累加數(shù)字，1 + true = 2
      • +號(hào)用作字符串連接時(shí)，把其他非字符串轉(zhuǎn)為字符串
      • null會(huì)轉(zhuǎn)換為0，undefined轉(zhuǎn)換為NaN
      • NaN不等于NaN，這是由浮點(diǎn)數(shù)的精度決定的
    • isNaN
      • isNaN()判斷NaN不可靠，因?yàn)闀?huì)存在隱式轉(zhuǎn)換
        • isNaN('foo' || undefined || {} || {age: 'foo'}) // 都為true
        • 使用 x !== x 來(lái)判斷是否為NaN
        • 或者使用ES6的Number.isNaN(要檢驗(yàn)的值)
    • 真值運(yùn)算，if && ||
      • false, 0, -0, “”, NaN, null, undefined，會(huì)轉(zhuǎn)換為false
      • 有一個(gè)可以具有默認(rèn)值得可選參數(shù)的函數(shù)會(huì)讓真值判斷失效
        • function point(x, y) { if (!x) { x = 320; } if (!y) { y = 240; } return { x: x, y: y }; }
      • 檢測(cè)undefined的更加準(zhǔn)確的方法是用typeof操作，可以區(qū)分開(kāi)0和undefined
        • function point(x, y) { if (typeof x === "undefined") { x = 320; } if (typeof y === "undefined") { y = 240; } return { x: x, y: y }; }
      • 或者 if (x === undefined) { ... }，利用參數(shù)與undefined作比較
  3. call, apply, bind
    • call的第一個(gè)參數(shù)是要綁定this的對(duì)象，第二個(gè)參數(shù)開(kāi)始是原有函數(shù)中的參數(shù)
    • apply第一個(gè)參數(shù)同call，后面的參數(shù)傳數(shù)組
    • bind是在函數(shù)本身后面加要bind的對(duì)象，并且要使用表達(dá)式函數(shù)，而不是聲明式函數(shù)
  4. 作用域
    • 作用域鏈：當(dāng)前作用域找不到，就去父級(jí)找
    • 函數(shù)作用域是定義時(shí)候產(chǎn)生的，不是執(zhí)行時(shí)候產(chǎn)生的
  5. 閉包
    • 函數(shù)作為返回值
    • 函數(shù)作為參數(shù)傳遞
    • 產(chǎn)生作用域鏈
  6. 前端使用異步的場(chǎng)景
    • 定時(shí)任務(wù)
    • 網(wǎng)絡(luò)請(qǐng)求
    • 事件綁定
  7. 跨域
    • 瀏覽器有同源策略，不允許ajax訪(fǎng)問(wèn)其他域的接口
      • 協(xié)議、域名、端口，有一個(gè)不同就算跨域
    • 可跨域的三個(gè)標(biāo)簽
      • img的src
      • link 、script 使用CDN
      • script用于JSONP
    • JSONP
    • 服務(wù)器端設(shè)置http header
  8. cookie, sessionStorage, localStorage的區(qū)別
    • cookie
      • 用于客戶(hù)端和服務(wù)器端通訊
      • 存儲(chǔ)量只有4KB
      • 所有http請(qǐng)求都帶著，會(huì)影響獲取資源的效率
      • API簡(jiǎn)單，需要封裝才能使用 document.cookie
    • sessionStorage，localStorage
      • 最大5M
      • 不用在請(qǐng)求中帶著
      • setItem(key, value), geiItem(key)
      • iOS safari隱藏模式下，localStorage.getItem會(huì)報(bào)錯(cuò)，，簡(jiǎn)易使用try catch封裝
    • 區(qū)別
      • 容量
      • 是否攜帶到ajax中
      • API易用性
  9. 模塊化
    • 需要異步加載JS，使用AMD
    • 使用npm之后建議使用CommonJS
  10. 渲染頁(yè)面的過(guò)程
    • 加載資源的形式
      • 輸入U(xiǎn)RL或跳轉(zhuǎn)頁(yè)面加載html
      • 加載html中的靜態(tài)資源
    • 輸入U(xiǎn)RL到得到html的過(guò)程（加載一個(gè)資源的過(guò)程）
      • 瀏覽器根據(jù)DNS服務(wù)器得到域名的IP地址
      • 向這個(gè)IP的機(jī)器發(fā)送http請(qǐng)求
      • 服務(wù)器收到、處理并返回http請(qǐng)求
      • 瀏覽器得到返回內(nèi)容
    • 瀏覽器渲染頁(yè)面的過(guò)程
      • 根據(jù)html結(jié)構(gòu)生成DOM Tree
      • 根據(jù)CSS生成樣式（CSSOM）
      • 將DOM和CSSOM整合成RenderTree
      • 根據(jù)RenderTree開(kāi)始渲染和展示
      • 遇到script標(biāo)簽時(shí)，會(huì)執(zhí)行并阻塞渲染
  11. window.onload和document.DOMContentLoaded
    • 前者是全部資源加載完才執(zhí)行，包括圖片視頻
    • 后者是DOM渲染完即可執(zhí)行，無(wú)需照顧圖片視頻
  12. 性能優(yōu)化
    • 原則
      • 多使用內(nèi)存、緩存或其他方法
      • 減少CPU計(jì)算，減少網(wǎng)絡(luò)請(qǐng)求
    • 從哪入手
      • 加載頁(yè)面和靜態(tài)資源速度
        • 靜態(tài)資源的壓縮合并，把加載或請(qǐng)求數(shù)量減少
        • 靜態(tài)資源緩存
        • 使用CDN讓資源加載更快
          • CDN是不同區(qū)域的網(wǎng)絡(luò)優(yōu)化，就近加載
        • 使用SSR（后端渲染），數(shù)據(jù)直接輸出到html中
    • 頁(yè)面渲染速度
      • CSS放在前，JS放在后
      • 懶加載
      • 減少DOM查詢(xún)，對(duì)DOM查詢(xún)做緩存
      • 減少DOM操作，多個(gè)操作盡量合并在一起執(zhí)行
      • 事件節(jié)流
      • 盡早執(zhí)行操作，如DOMContentLoaded
  13. 安全性
    • XSS，跨站請(qǐng)求攻擊
    • XSRF，跨站請(qǐng)求偽造
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容