前端開發總結

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

頁面渲染

訪問 : https://coolshell.cn/articles/9666.html

1)瀏覽器會解析三個東西:
一個是HTML/SVG/XHTML,事實上,Webkit有三個C 的類對應這三類文件。解析這三種檔案會產生一個DOM Tree。
CSS,解析CSS會產生CSS規則樹。
Javascript,指令碼,主要是通過DOM API和CSSOM API來操作DOM Tree和CSS Rule Tree.

2)解析完成後,瀏覽器引擎會通過DOM Tree 和 CSS Rule Tree 來構造 Rendering Tree。注意:
Rendering Tree 渲染樹並不等同於DOM樹,因為一些像Header或display:none的東西就沒必要放在渲染樹中了。
CSS 的 Rule Tree主要是為了完成匹配並把CSS Rule附加上Rendering Tree上的每個Element。也就是DOM結點。也就是所謂的Frame。
然後,計算每個Frame(也就是每個Element)的位置,這又叫layout和reflow過程。

3)最後通過呼叫作業系統Native GUI的API繪製。

常見的瀏覽器核心引擎

Trident: IE瀏覽器;

Gecko: Firefox瀏覽器;

webkit: Safari,Google Chrome,遨遊3,獵豹,百度瀏覽器;

Presto:Opera的核心

CSS 相容性寫法:

-webkit- ,針對safari,chrome瀏覽器的核心CSS寫法
-moz-,針對firefox瀏覽器的核心CSS寫法
-ms-,針對ie核心的CSS寫法
-o-,針對Opera核心的CSS寫法

瀏覽器中多個標籤頁的通訊

可以利用 localStorage 或 cookie 進行通訊

// 兩種方法設定 localStorage
localStorage['location.href'] = location.href;
localStorage.setItem('location.href', location.href);
// 兩種方法獲取 localStorage
console.info(localStorage['location.href']);
console.info(localStorage.getItem('location.href'));

定義JQuery的作用域
 (function ($) {
 })(jQuery);

meta 標籤作用

<meta charset=”utf-8″>
        <!– IE 支援通過特定的 <meta> 標籤來確定繪製當前頁面所應該採用的 IE 版本。除非有強烈的特殊需求,否則最好是設定為 edge mode,從而通知 IE 採用其所支援的最新的模式。–>
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

        <meta name=”viewport” content=”width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>
        <!– 上述3個meta標籤*必須*放在最前面,任何其他內容都*必須*跟隨其後! –>

前端開發 最新文章