頁面渲染
訪問 : 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標籤*必須*放在最前面,任何其他內容都*必須*跟隨其後! –>
写评论
很抱歉,必須登入網站才能發佈留言。