前端高頻面試題總結(三)

一:js的作用域?

  • JS作用域也就是JS識別變量的範圍,
  • 作用域鏈也就是JS查找變量的順序
    先說作用域,JS作用域主要包括全局作用域局部作用域ES6的塊級作用域
    全局作用域:也就是定義在window下的變量範圍,在任何地方都可以訪問,
    局部作用域:是隻在函數內部定義的變量範圍
    塊級作用域:簡單來說用let和const在任意的代碼塊中定義的變量都認爲是塊級作用域中的變量,例如在for循環中用let定義的變量,在if語句中用let定義的變量等等
    注:儘量不要使用全局變量,因爲容易導致全局的污染,命名衝突,對bug查找不利。
    2️而所謂的作用域鏈就是由最內部的作用域往最外部,查找變量的過程.形成的鏈條就是作用域鏈

二:h5表單的新屬性?

<form>
        郵箱:<input type="email"><br/>
        數量:<input type="number" value="20" max="25" min="18"><br/>
        電話:<input type="tel"><br/>
        網址:<input type="url"><br/>
        範圍:<input type="range" max="100" min="0"><br/>
        顏色:<input type="color"><br/>
        時間:<input type="time"><br/>
        日期:<input type="date"><br/>
        日期時間:<input type="datetime-local"><br/>
        月份:<input type="month"><br/>
        星期:<input type="week"><br/>
        提交:<input type="submit">
    </form>


  • 其中的屬性及意義爲:
  1. email幫我們自動校驗了格式。

  2. tel:由於全球號碼格式不一樣,格式不太好校驗不過幫我們在移動端點擊該輸入框會切換到數字鍵盤。

  3. url:幫我們校驗了格式不過需要注意的是網址前面需要加上:http://。

  4. number: 類型用於應該包含數值的輸入域。還能設置輸入數字的範圍

  5. range :類型用於應該包含一定範圍內數字值的輸入域。range 類型顯示爲滑動條。還能夠設定數字的限定:

  6. placeholder:佔位符,提示文本

  7. autofocus:自動獲取焦點

  8. autocomplete:自動完成,on打開,off關閉 1.必須成功提交過 2.必須有name屬性

  9. required:必須輸入,如果沒有輸入會阻止提交

  10. pattern:正則表達式的驗證

  11. multiple:允許選擇多個文件,在郵箱中允許輸入多個郵箱地址,用,分割

  12. required必須輸入,如果沒有輸入會阻止提交

三:sass和less的區別?

less和sass最主要的區別是:
less是通過Javascript編譯而sass是通過ruby編譯的,如果沒有引入前端工程化,less會消耗客戶端性能,sass會消耗服務端性能,但是引入前端工程化的話,less和sass在打包階段都會轉化成css,所以不會有區別,只是sass是基於ruby,所以每次npm的時候相對慢一點點。

四:如何實現優化問題

技術方面:
 1、儘量減少HTTP請求個數
 2、避免空的src和href
 3、使用gzip壓縮內容
4、把CSS放到頂部
 5、把JS放到底部
 6、將CSS和JS放到外部文件中
 7、延遲加載
8、預加載
 9、儘量減少iframe的個數
 10、避免404
 11、減少Cookie的大小
 12、優化圖像
 
(1)代碼層面:
• v-if 和 v-show 區分使用場景
• computed 和 watch 區分使用場景
• v-for 遍歷必須爲 item 添加 key,且避免同時使用 v-if
• 長列表性能優化
• 事件的銷燬
• 圖片資源懶加載
• 路由懶加載
• 第三方插件的按需引入
• 優化無限列表性能
• 服務端渲染 SSR or 預渲染
(2)Webpack 層面的優化
• Webpack 對圖片進行壓縮
• 減少 ES6 轉爲 ES5 的冗餘代碼
• 提取公共代碼
• 模板預編譯
• 提取組件的 CSS
• 優化 SourceMap
• 構建結果輸出分析
• Vue 項目的編譯優化
(3)基礎的 Web 技術的優化
• 開啓 gzip 壓縮
• 瀏覽器緩存
• CDN 的使用
• 使用 Chrome Performance 查找性能瓶頸

五:服務端渲染?

Vue.js 是構建客戶端應用程序的框架。默認情況下,可以在瀏覽器中輸出 Vue 組件,進行生成 DOM 和操作 DOM。然而,也可以將同一個組件渲染爲服務端的 HTML 字符串,將它們直接發送到瀏覽器,最後將這些靜態標記"激活"爲客戶端上完全可交互的應用程序。
即:SSR大致的意思就是vue在客戶端將標籤渲染成的整個 html 片段的工作在服務端完成,服務端形成的html 片段直接返回給客戶端這個過程就叫做服務端渲染。
服務端渲染 SSR 的優缺點如下:
(1)服務端渲染的優點:
• 更好的 SEO: 因爲 SPA 頁面的內容是通過 Ajax 獲取,而搜索引擎爬取工具並不會等待 Ajax 異步完成後再抓取頁面內容,所以在 SPA 中是抓取不到頁面通過 Ajax 獲取到的內容;而 SSR 是直接由服務端返回已經渲染好的頁面(數據已經包含在頁面中),所以搜索引擎爬取工具可以抓取渲染好的頁面;
• 更快的內容到達時間(首屏加載更快): SPA 會等待所有 Vue 編譯後的 js 文件都下載完成後,纔開始進行頁面的渲染,文件下載等需要一定的時間等,所以首屏渲染需要一定的時間;SSR 直接由服務端渲染好頁面直接返回顯示,無需等待下載 js 文件及再去渲染等,所以 SSR 有更快的內容到達時間;
(2) 服務端渲染的缺點:
• 更多的開發條件限制: 例如服務端渲染只支持 beforCreate 和 created 兩個鉤子函數,這會導致一些外部擴展庫需要特殊處理,才能在服務端渲染應用程序中運行;並且與可以部署在任何靜態文件服務器上的完全靜態單頁面應用程序 SPA 不同,服務端渲染應用程序,需要處於 Node.js server 運行環境;
• 更多的服務器負載:在 Node.js 中渲染完整的應用程序,顯然會比僅僅提供靜態文件的 server 更加大量佔用CPU 資源 (CPU-intensive - CPU 密集),因此如果你預料在高流量環境 ( high traffic ) 下使用,請準備相應的服務器負載,並明智地採用緩存策略。
如果沒有 SSR 開發經驗的同學,可以參考這篇文章《Vue SSR 踩坑之旅》,裏面 SSR 項目搭建以及附有項目源碼。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章