前端常見問題

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頭。

相關文章