前端常見問題

KingJames發表於2018-06-13
前端

position 有哪些值？ relative 和 absolute 區別？

  1. absolute 生成絕對定位的元素，相對於static定位以為的第一個父元素進行定位。將對 象從文件流中拖出，使用 left ， right ， top ， bottom 等屬性相對於其最接近的一個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件，則依據 body物件。而其層疊通過z-index屬性定義
  2. Fixed 生成絕對定位元素，相對於瀏覽器視窗進行定位。
  3. Relative 生成相對定位元素，相對於其正常位置定位。
  4. Static 預設值，沒有定位，元素出現在正常流中。
  5. Inherit 規定應該從父元素繼承 position 屬性的值。

前端效能優化

  1. 減少http請求。合併多個CSS檔案和js檔案，利用CSS Sprites整合影像。
  2. 減少DOM節點。
  3. 避免404：HTTP請求時間消耗是很大的，因此使用HTTP請求來獲得一個沒有用處的響應（例如404沒有找到頁面）是完全沒有必要的，它只會降低使用者體驗而不會有一點好處。
  4. 避免空的影像src
  5. 減小Cookie大小，針對Web元件使用域名無關的Cookie
  6. 將CSS程式碼放在HTML頁面的頂部，避免使用CSS表示式，使用 link代替@import.
  7. 將JavaScript指令碼放在頁面的底部。
  8. 將JavaScript和CSS作為外部檔案來引用：在實際應用中使用外部檔案可以提高頁面速度，因為JavaScript和CSS檔案都能在瀏覽器中產生快取。
  9. 優化圖片大小
  10. 通過CSS Sprites優化圖片
  11. 不要在HTML中使用縮放圖片

jsonp是什麼，怎麼進行跨域請求的？

json 是一種資料格式,jsonp 是一種資料呼叫的方式。你可以簡單的理解為 帶callback的json就是jsonp.

SONP是一種非正式傳輸協議，該協議的一個要點就是允許使用者傳遞一個callback引數給服務端，然後服務端返回資料時會將這個callback引數作為函式名來包裹住JSON資料，這樣客戶端就可以隨意定製自己的函式來自動處理返回資料了。 很簡單，就是利用script標籤沒有跨域限制的“漏洞”（歷史遺蹟啊）來達到與第三方通訊的目的。當需要通訊時，本站指令碼建立一個script元素，地址指向第三方的API網址，形如：

<script src="http://www.example.net/api?param1=1&param2=2"></script>
複製程式碼

並提供一個回撥函式來接收資料（函式名可約定，或通過地址引數傳遞）。 第三方產生的響應為json資料的包裝（故稱之為jsonp，即json padding），形如： callback({"name":"hax","gender":"Male"}) 這樣瀏覽器會呼叫callback函式，並傳遞解析後json物件作為引數。本站指令碼可在callback函式裡處理所傳入的資料。 補充：“歷史遺蹟”的意思就是，如果在今天重新設計的話，也許就不會允許這樣簡單的跨域了嘿，比如可能像XHR一樣按照CORS規範要求伺服器傳送特定的http頭。

相關文章