前端开发总结

页面渲染

访问 ： 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标签*必须*放在最前面，任何其余内容都*必须*跟随其后！ -->