瀏覽器內核、CSS盒子模型、獲取當前url參數、服務器主動推送到客戶端

[html] 常見的瀏覽器內核都有哪些?并介紹下你對內核的理解
[css] 說說你對css盒子模型的理解
[js] 寫一個獲取當前url查詢字符串中的參數的方法
[軟技能] 網頁應用從服務器主動推送到客戶端有那些方式?
題目來源:
作者:浪子神劍
鏈接:http://www.lxweimin.com/p/baecd5ea9fd9

一、常見瀏覽器內核,簡要理解

Trident內核:IE使用的內核
Blink/Chromuium內核:新一代的chrome內核
Webkit內核:常被稱為chrome內核,但其實chorm內核早就改用Blink
Gecko內核:開源,常被稱為FireFox內核
Prosto內核:Opera以前使用的內核。
就是瀏覽器的渲染引擎和js引擎,一個好的內核在渲染速度以及優化上都能更好的增加瀏覽器的用戶體驗

二、CSS盒子模型

有標準盒子模型和IE盒子模型兩種(不知道在哪弄的這兩張圖)
標準盒子模型:元素寬高等于content區域的寬高


IE盒子模型:元素的寬高等于border+padding+content區域的寬高

三、獲取當前url查詢字符串中參數

window.location可獲得當前路徑的所有信息

function params() {
  const search = window.location.search
  search = search.substr(1)
  const res = {}
  if (!search) return res
    search.split('&').map(item => {
      const [key, value] = item.split('=')
      res[key] = decodeURIComponent(value)
  })
  console.log(res) 
}

四、網頁應用從服務器推送到客戶端的方式

webSocket
WebSocket 是一種在單個 TCP 連接上進行全雙工通信的協議
WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單,允許服務端主動向客戶端推送數據。在 WebSocket API 中,瀏覽器和服務器只需要完成一次握手,兩者之間就直接可以創建持久性的連接,并進行雙向數據傳輸。

eventsource(SSE)
EventSource 接口是 Web 內容與服務器發送的事件的接口。一個 EventSource 實例打開一個持久連接 HTTP 服務器,它發送事件的 text/event-stream 格式。連接保持打開狀態,直到通過調用關閉 EventSource.close()。
與 WebSockets 不同,服務器發送的事件是單向的。也就是說,數據消息是從服務器到客戶端(例如用戶的 Web 瀏覽器)沿一個方向傳遞的

Web Push
就是用戶訂閱了一個站點的 Web Push 服務后,即使用戶關閉了瀏覽器,一旦站點主動發送推送消息,用戶都能收到,只要你的電腦是開著的。這是目前谷歌和蘋果在 Chrome 和 Safari 上都力推的一種全新推送服務,Firefox 最近也加入了這個陣營。
但是由于需要 GCM 支持,所以這個方法并不常見

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。