HTML&&CSS基础知识点整理

HTML&&CSS基础知识点整理

一、WEB标准：一系列标准的集合

1. 结构（Structure）：html   语言：XHTML[可扩展超文本标识语言]和XML[可扩展标记语言]
2. 表现（Preasentation）:css
3. 行为（Behavior）：JS[DOM+ES]

其中一些小的具体要求：

• 结构：标签小写、闭合、不能随意嵌套
• CSS+JS：精良使用外链，不用行内

优点：

1. 易于维护
2. 页面响应快
3. 可访问性高
4. 提高设备兼容性
5. 易被解析（搜索引擎）

Ps：

• 可维护性：出现问题时，修复Bug成本低且维护性好，还有一点是代码能够被其他开发人员理解。
• 可访问性：所有人都能理解，解析

二、浏览器内核

> - IE：Trident内核(多称：IE内核)
> - Chrome：Webkit内核 ==>  Blink内核
> - Firefox：Gecko内核(多称：IE内核)
> - Safari：Webkit内核
> - Opear：Preato====>Webkit内核  ====>  Blink内核

三、渲染原理

1、涉及到的概念

• Dom Tree：浏览器将Html解析成属性的数据结构
• Parse(构建Dom树)：生成Dom树的行为
• Css Rule Tree：浏览器将Css解析成属性的数据结构
• Render Tree：DOM和CSSOM合并后生成Render Tree
• Construct(构建渲染树)：解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如），构建渲染树
• Layout：根据Render Tree已知各个节点以及节点之间的从属关系，计算节点在屏幕中的位置
• Painting：根据Layout算出来的结果，通过显卡，把内容滑倒屏幕上
• Reflow(回流)：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，这个回退的过程

2、==步骤==

1. 解析HTML：浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
2. 解析CSS：将CSS解析成 CSS Rule Tree 。
3. 生成渲染树：根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
4. 布局渲染树：已知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标
5. 绘制渲染树：遍历render树，并使用UI后端层绘制每个节点。

3、Reflow{重构/回流/重排}(对应Layout 改变了计算结果)

当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。==每个页面至少需要一次回流，就是在页面第一次加载的时候(第一次布局也称作回流)==。

reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏：display:none和visibility:hidden）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

4、Repaint/Redraw{重绘}(对应Painting 改变了屏幕显示样式)

改变某个元素的背景色、文字颜色、边框颜色等等==(外观属性)==不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸==(布局)==没有变。

5、触发Reflow条件

1. 页面渲染初始化；(无法避免)
2. 添加或删除可见的DOM元素；
3. 元素位置的改变，或者使用动画；
4. 元素尺寸的改变——大小，外边距，边框；
5. 浏览器窗口尺寸的变化（resize事件发生时）；
6. 填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变；
7. 读取某些元素属性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE)　

6、触发Repaint条件

• 改变元素外观属性。如：color，background-color等。

7、Reflow和Repaint的关系

在回流(重排)的时候，浏览器会使布局发生变化。完成回流将变化后的新页面绘制到页面上，则触发重绘。

反之，重绘时不会不一定会使布局发生变化，这不一定触发重排(回流)

有些情况下，比如修改了元素的样式，浏览器并不会立刻reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫==异步 reflow 或增量异步 reflow==。但是在有些情况下，比如==resize== 窗口，改变了页面默认的字体等。对于这些操作，==浏览器会马上进行 reflow==。

==重排(回流)必定会引发重绘，但重绘不一定会引发重排(回流)==

8、display:none和visibility:hidden

1. display:none 的节点不会被加入Render Tree，如果某个节点最开始是不显示的，设为display:none是更优的
2. visibility: hidden 的节点会被加入Render Tree
3. display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。

9、优化重排重绘

==重绘重排的代价：耗时，导致浏览器卡慢==

• 需要大量重绘重排的场景，例如：动画

优化：

• ==浏览器==自己的优化：==(多次攒一次)==浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。
• ==程序员==注意的优化：减少重绘和重排就是要==减少对渲染树的操作==，可以合并多次的DOM和样式的修改。并减少对style样式的请求。以下：

1. 直接改变元素的className(==一次改变多个需要同样的样式变化的元素==)
2. display：none；先设置元素为display：none；然后进行页面布局等操作；设置完成后将元素设置为display：block；这样的话就只引发两次重绘和重排；(将重绘重排隐藏起来操作)
3. 不要经常访问浏览器的flush队列属性；如果一定要访问，可以利用缓存。将访问的值存储起来，接下来使用就不会再引发回流
4. 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；(==操作复制节点，将改变后的节点一次重新绘制==)
5. 将需要多次重排的元素，position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响到其他元素；(==脱离文档会不会再影响页面布局==)
6. 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document；(==一次改变多个==)
7. ==尽量不要使用table布局==

---

四、依赖管理

五、AMD、CMD和CommonJs

1. 前端模块规范有三种：CommonJs,AMD和CMD。

* CommonJs用在服务器端，AMD和CMD用在浏览器环境
* AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
* MD 是 SeaJS 在推广过程中对模块定义的规范化产出。
* AMD:提前执行（异步加载：依赖先执行）+延迟执行
* CMD:延迟执行（运行到需加载，根据顺序执行）

2. 模块

模块就是实现特定功能的文件，把几个函数放在一个文件里就构成了一个模块。
需要的时候加载这个文件，调用其中的函数即可。

（1）函数写法

   function f1(){
　　　　//...
　　}
　　function f2(){
　　　　//...
　　}

==缺点==：
这样做会==污染全局变量==，无法保证不与其他模块发生==变量名冲突==，而且==模块成员之间没什么关系==。

（2）对象写法

 var module = {
　　　　star : 0,
　　　　f1 : function (){
　　　　　　//...
　　　　},
　　　　f2 : function (){
　　　　　　//...
　　　　}
　　};
 module.f1();
 module.star = 1;

==优点==：模块写成一个对象，模块成员都封装在对象里，通过调用对象属性，访问使用模块成员。
==缺点==：==暴露了模块成员==，==外部可以修改模块内部状态==。

（3）立即执行函数

   var module = (function(){
　　　　var star = 0;
　　　　var f1 = function (){
　　　　　　console.log('ok');
　　　　};
　　　　var f2 = function (){
　　　　　　//...
　　　　};
         return {
            f1:f1,
            f2:f2
         };
　　})();
    module.f1();  //ok
    console.log(module.star)  //undefined

==优点==：外部无法访问内部私有变量

3.CommonJs

CommonJS是服务器端模块的规范，由Node推广使用。
由于服务端编程的复杂性，如果==没有模块很难与操作系统及其他应用程序互动==。

CommonJS规范:

• 一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该==模块内部定义的变量，无法被其他模块读取==，除非定义为==global==对象的属性。
• ==输出模块变量==的最好方法是使用==module.exports==对象。
• ==加载模块使用require==方法，该方法==读取一个文件并执行==，==返回文件内部module.exports对象==

使用方法如下：

//math.js
exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
};

//increment.js
var add = require('math').add;
exports.increment = function(val) {
    return add(val, 1);
};

//index.js
var increment = require('increment').increment;
var a = increment(1); //2

问题：

require 是同步的。模块系统需要同步读取模块文件内容，并编译执行以得到模块接口。
但在浏览器端问题多多。

原因：

浏览器端，加载 JavaScript 最佳、最容易的方式是在 document 中插入script标签。
但脚本标签天生异步，传统 CommonJS 模块在浏览器环境中无法正常加载。

解决思路

1. 开发一个服务器端组件，对模块代码作静态分析，将模块与它的依赖列表一起返回给浏览器端。 这很好使，但需要服务器安装额外的组件，并因此要调整一系列底层架构。
2. 另一种解决思路是，用一套标准模板来封装模块定义：

define(function(require, exports, module) {

  // The module code goes here

});

这套模板代码为模块加载器提供了机会，使其能在模块代码执行之前，对模块代码进行静态分析，并动态生成==依赖列表==。

//math.js
define(function(require, exports, module) {
  exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
  };
});

//increment.js
define(function(require, exports, module) {
  var add = require('math').add;
  exports.increment = function(val) {
    return add(val, 1);
  };
});

//index.js
define(function(require, exports, module) {
  var inc = require('increment').increment;
  inc(1); // 2
});

4.AMD(异步模块定义)

* AMD是"Asynchronous Module Definition"的缩写。

* 由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数RequireJS

* AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出

* 采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

==RequireJS主要解决两个问题：==

• 多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
• js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

==RequireJs采用require()语句加载模块，不同于CommonJS，它要求两个参数：==

• 第一个参数[module]，是一个数组，里面的成员就是要加载的模块；
• 第二个参数callback，则是加载成功之后的回调函数。math.add()与math模块加载不是同步的，浏览器不会发生假死。

require([module], callback);

require([increment'], function (increment) {
　   increment.add(1);
});

==define()函数==

• RequireJS定义了一个函数 define，它是全局变量，用来定义模块:
• define(id?, dependencies?, factory);

==参数说明：==

• id：指定义中模块的名字，可选；如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。
• 依赖dependencies：是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。

依赖参数是可选的，如果忽略此参数，它应该默认为["require", "exports", "module"]。然而，如果工厂方法的长度属性小于3，加载器会选择以函数的长度属性指定的参数个数调用工厂方法。

• 工厂方法factory，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
      exports.verb = function() {
          return beta.verb();
          //Or:
          return require("beta").verb();
      }
  });

==RequireJs使用例子==

• require.config是用来定义别名的，在paths属性下配置别名。然后通过requirejs(参数一，参数二)；
• 第一个参数是数组，传入我们需要引用的模块名
• 第二个参数是个回调函数，回调函数传入一个变量，代替刚才所引入的模块。

main.js
//别名配置
requirejs.config({
    paths: {
        jquery: 'jquery.min' //可以省略.js
    }
});
//引入模块，用变量$表示jquery模块
requirejs(['jquery'], function ($) {
    $('body').css('background-color','red');
});

引入模块也可以只写require()。requirejs通过define()定义模块，定义的参数上同。在==此模块内的方法和变量外部是无法访问的==，只有通过return返回才行.

//将该模块命名为math.js保存。
//math.js
define('math',['jquery'], function ($) {//引入jQuery模块
    return {
        add: function(x,y){
            return x + y;
        }
    };
});

//main.js引入模块方法
require(['jquery','math'], function ($,math) {
    console.log(math.add(10,100));//110
});

5.CMD

* CMD 即Common Module Definition通用模块定义
* CMD规范是国内发展出来的
* CMD有个浏览器的实现SeaJS
* SeaJS要解决的问题和requireJS一样，只在