Browser

Derek

Derek

共用平台課 前端工程師

F2E TW 掃地工

大C專案前端架構規劃

＆

共用模組開發

Worldwide Browser Usage

簡單來說

IE已死，有事燒紙

所以接下來的課程會跳過IE情境

BUT

凡事都有那個but

產品如果有用到

還是要乖乖去GOOGLE

 

CAN I USE 神站不解釋

Rendering Engine

 

一張圖秒懂

跨瀏覽器議題

經驗＋大量閱讀

你會知道哪些事情可以做

Javascript Engine

Browser, Headless Browser, or Runtime JavaScript Engine
Mozilla Spidermonkey
Chrome V8
Safari JavaScriptCore
IE and Edge Chakra
PhantomJS JavaScriptCore
HTMLUnit Rhino
TrifleJS V8
Node.js V8
Io.js* V8

V8

跟車子相關的請找Rex 大大

JS engine

not this time

決定你如何最佳化你的 Javascript

Browser Render

運作原理

讓我們從時間軸來看

HTML

markup

HTML element

with attr

A Standard HTML

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

不夠？來看Real World吧

HTML head

  • meta data
  • link file
  • 注意blocking issue

HTML Tags

不要只會用DIV

靈活運用html tags 可以事半功倍

結構標籤

語意標籤

多媒體標籤

<div>, <h1...h6>, <span>...

<header>, <article>, <content>...

<media>, <audio>, <img>...

DOM

Document Object Model

DOM object

其實就真的把它想成是一個個Object

Text

  • 屬性
  • 方法
  • 事件

擁有『繼承』的屬性

以及HTML上自定義的屬性

產生DOM tree

<!DOCTYPE html>
<html>
<head>
    <title>Web page parsing</title>
</head>
<body>
    <div>
        <h1>Web page parsing</h1>
        <p>This is an example Web page.</p>
    </div>
</body>
</html>

每個節點就是一個DOM element 

Document

  • 當前瀏覽器載入的網頁
  • 共同屬性跟方法（by document type)
  • ！＝＝window
  • 查找範圍是整份文件

Document Fragment 是不同的東西

學React 必需得懂的概念

Node

  • 跟nodeJS沒關係
  • 提供共同的方法給element
  • 通常拿來做上下左右父子element的查找

EventTarget

EventTarget.addEventListener()

於 EventTarget 物件上註冊指定事件的監聽器。

EventTarget.removeEventListener()

移除 EventTarget 物件上的指定事件監聽器。

EventTarget.dispatchEvent()

對此 EventTarget 物件派送（dispatch）一個事件物件，也就是於此 EventTarget 物件上觸發一個指定的事件物件實體。

簡單來說

  1. ​確保你取得的是一個DOM element
  2. 知道哪些屬性是你新增的、哪些是原生的
  3. 知道所擁有的API 方法是繼承自誰
  4. 了解事件監聽機制

很重要的是

不要輕易去改變原生方法

至少先去把繼承鍊練習個30遍

Rendering Tree

DOM + CSS

Frames

CSS + DOM

 

一個查找匹配的過程

css

請看另外一張投影片

JS in Browser

JS事件模型

  • DOM 0級 （原生）
  • IE（凸）
  • DOM 2級（DOM事件）

Event wrapper

var eventUtils={
     // 添加句柄
     addHandler:function(element,type,handler){
       if(element.addEventListener){
         element.addEventListener(type,handler,false);
       }else if(element.attachEvent){
         element.attachEvent('on'+type,handler);
       }else{
         element['on'+type]=handler;
       }
     },
     // 删除句柄
     removeHandler:function(element,type,handler){
       if(element.removeEventListener){
         element.removeEventListener(type,handler,false);
       }else if(element.detachEvent){
         element.detachEvent('on'+type,handler);
       }else{
         element['on'+type]=null;
       }
     },
    //获取事件对象
    //IE模型中event是一个全局唯一的对象绑定在window对象上
    getEvent:function(event){
       return event?event:window.event;
    },
    //获取类型
    getType:function(event){
     return event.type;
    },
    getElement:function(event){
     return event.target || event.srcElement;
    },
    //阻止默认事件
    preventDefault:function(event){
     if(event.preventDefault){
      event.preventDefault();
     }else{
      event.returnValue=false;
     }
    },
    //阻止冒泡
   stopPropagation:function(event){
   if(event.stopPropagation){
     event.stopPropagation();
   }else{
     event.cancelBubble=true;
    }
   }
  }

DOM Events

one for all

DOM 事件流

addEventListener

  • 可以自訂事件
  • 預設冒泡
  • true => 事件捕獲
  • Jquery 

Return false

  • event.preventDefault
  • event.stopPorpagation
  • return false

Reflow/ Repaint

deck

By Derek silenceshia

Made with Slides.com

deck

  • 411

More from Derek silenceshia