1、gulp和webpack的區別

gulp

gulp強調的是前端開發的工作流程，我們可以通過配置一系列的task，定義task處理的事務（例如文件壓縮合并、雪碧圖、啟動server、版本控制等），然后定義執行順序，來讓gulp執行這些task，從而構建項目的整個前端開發流程。

PS：簡單說就一個Task Runner

webpack

webpack是前端資源模塊化管理工具和打包工具。可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等需要時再異步加載。通過 loader的轉換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、AMD 模塊、ES6 模塊、CSS、圖片、JSON、Coffeescript、LESS 等。

PS：webpack is a module bundle

兩者區別

• gulp是側重于前端開發的整個過程的控制管理。著重于控制流程。例如自動刷新頁面，雪碧圖，壓縮js,css,編譯less,檢查語法等。
• webpack側重于模塊打包。把開發中所有資源都看做模塊。webpack是通過loader(加載器)和plugins（插件）對資源進行處理。是模塊化方案。不管是AMD/CMD/ES6風格的模塊化，都能編譯成瀏覽器認識的js。

2、XSS和CSRF

• XSS：跨站腳本（Cross-site scripting，通常簡稱為XSS）是一種網站應用程序的安全漏洞攻擊，是代碼注入的一種。它允許惡意用戶將代碼注入到網頁上，其他用戶在觀看網頁時就會受到影響。這類攻擊通常包含了HTML以及用戶端腳本語言。

• CSRF：跨站請求偽造（英語：Cross-site request forgery），也被稱為 one-click attack 或者 session riding，通?？s寫為 CSRF 或者 XSRF， 是一種挾制用戶在當前已登錄的Web應用程序上執行非本意的操作的攻擊方法。

1

• XSS： 通過客戶端腳本語言（最常見如：JavaScript） 在一個論壇發帖中發布一段惡意的JavaScript代碼就是腳本注入，如果這個代碼內容有請求外部服務器，那么就叫做XSS！

• CSRF：又稱XSRF，冒充用戶發起請求（在用戶不知情的情況下）,完成一些違背用戶意愿的請求（如惡意發帖，刪帖，改密碼，發郵件等）。

XSS和CSRF攻擊的防御

• 防御XSS攻擊
  1，對用戶表單輸入的數據進行過濾，對javascript代碼進行轉義，然后再存入數據庫；
  2，在信息的展示頁面，也要進行轉義，防止javascript在頁面上執行。

• 防御CSRF
  1，所有需要用戶登錄之后才能執行的操作屬于重要操作，這些操作傳遞參數應該使用post方式，更加安全；
  2，為防止跨站請求偽造，我們在某次請求的時候都要帶上一個csrf_token參數，用于標識請求來源是否合法，csrf_token參數由系統生成，存儲在SESSION中。

4、網站優化之盡量避免重定向(301/302)

• 就是當用戶瀏覽器或搜索引擎訪問某個舊的網址時，服務器告訴瀏覽器或搜索引擎，「該網頁已經搬家了，新家的地址是……，請使用新地址來訪問該網頁」
• HTTP重定向又分為永久重定向(HTTP狀態碼為301)和臨時重定向(HTTP狀態碼為302)。永久重定向就表示該網址已經搬到到一個永久居住的「新家」，臨時重定向就表示該網址搬遷到了一個臨時居住的「公寓」
• 在某些情況下，我們可能需要將站點中的某個文件移動到一個新的位置或更改該文件的名稱。此時，用戶可能仍然會輸入以前收藏的網址來訪問該網頁文件，因此，我們需要盡量保證以前的網址和新的網址都能夠訪問到最新的網頁內容。

5、高度不固定的行內塊級元素垂直居中

• .box1{display: table-cell;vertical-align: middle;text-align: center; } 復制代碼
• .box6 span{position: absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-50%);text-align: center;} 復制代碼

• vertical-align屬性只對行內元素有效，對塊內元素無效！

鏈接

6、如何自定義一個promise

7、怎么選型Angular和Vue

9、ayanc和await

10、模塊化和commonJS的區別

11、移動端自適應

12、pwa，小程序

13、談談This對象的理解

• this是js的一個關鍵字，隨著函數使用場合不同，this的值會發生變化。
• 但是有一個總原則，那就是this指的是調用函數的那個對象。
• this一般情況下：是全局對象Global。 作為方法調用，那么this就是指這個對象

14、“use strict”;是什么意思 ? 使用它的好處和壞處分別是什么？

ECMAscript 5添加了第二種運行模式："嚴格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下運行。 設立"嚴格模式"的目的，主要有以下幾個：

優點：

• 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
• 消除代碼運行的一些不安全之處，保證代碼運行的安全；提高編譯器效率，增加運行速度；為未來新版本的Javascript做好鋪墊。
• 注：經過測試 IE6,7,8,9 均不支持嚴格模式。

缺點：

• 現在網站的 JS 都會進行壓縮，一些文件用了嚴格模式，而另一些沒有。
• 這時這些本來是嚴格模式的文件，被merge后，這個就合并到了文件的中間，不僅沒有指示嚴格模式，反而在壓縮后浪費了字節。

15、new操作符具體干了什么呢?

1、創建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數的原型。
2、屬性和方法被加入到 this 引用的對象中。
3、新創建的對象由 this 所引用，并且最后隱式的返回 this 。

16、一個頁面從輸入 URL到頁面加載顯示完成，這個過程中都發生了什么？（流程說的越詳細越好）

• 查找瀏覽器緩存
• DNS解析、查找該域名對應的IP地址、重定向（301）、發出第二個GET請求
• 進行HTTP協議會話
• 客戶端發送報頭(請求報頭)
• 服務器回饋報頭(響應報頭)
• html文檔開始下載文檔樹建立，根據標記請求所需指定MIME類型的文件文件顯示

{瀏覽器這邊做的工作大致分為以下幾步：
加載：根據請求的URL進行域名解析，向服務器發起請求，接收文件（HTML、JS、CSS、圖象等）。 解析：對加載到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部數據結構（比如HTML的DOM樹，JS的（對象）屬性表，CSS的樣式規則等等）}

3、angular跨控制器傳遞參數

• 1、rootScope
  原理：所有的應用都有一個rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。 $rootScope 可作用于整個應用中。是各個 controller 中 scope 的橋梁。用 rootscope 定義的值，可以在各個 controller 中使用

• 2、用地址Url傳值——用$location獲得地址欄里的參數

• 3、通過事件的方式
  首先介紹一下angular中的事件廣播：

  • $on(name,handler) 注冊一個事件處理函數，該函數在特定的事件被當前作用域收到（從父級或者子級作用域）時將被調用。
  • $emit(name,args) 向當前父作用域發送一個事件，直至根作用域。
  • $broadcast(name,args) 向當前作用域下的子作用域發送一個事件。

• 4.通過服務
  在angular中服務是一個單例，所以在服務中生成一個對象，該對象就可以利用依賴注入的方式在所有的控制器中共享。

總結

以上是生活随笔為你收集整理的前端技术面——（js基础二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。