对前端的一点小理解

个人对前端的一点小理解

1.浏览器的渲染原理

解析

1. 解析HTML/SVG/XHTML，产生一个DOM Tree。(将标签逐层分开，逐步解析。)
   
   • 解析 CSS 会产生 CSS Rule Tree。(建立CSS Rule Tree 是对照着 DOM Tree 来的)
   • Javascript，脚本，主要是通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree.
   • 解析完成后，浏览器引擎会通过 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 过程。
       
     • CSS 匹配 HTML 元素是一个相当复杂和有性能问题的事情。所以，你就会在N多地方看到很多人都告诉你，DOM 树要小，CSS 尽量用 id 和 class，不要过渡层叠下去

渲染

1. 计算 CSS 样式
   
   • 构建 Render Tree
   • Layout – 定位坐标和大小，是否换行等…
   • 开始画图。

#

• Repaint——屏幕的一部分要重画

• Reflow——从开始。Reflow 的成本比 Repaint 的成本高很多。

  下面这些动作有很大可能会是成本比较高的。
  
  1.当你增加、删除、修改 DOM 结点时，会导致 Reflow 或 Repaint。
  
  2.当你移动 DOM 的位置，或是搞个动画的时候。
  
  3.当你修改 CSS 样式的时候。
  
  4.当你 Resize 窗口的时候（移动端没有这个问题），或是滚动的时候。
  
  5.当你修改网页的默认字体时。

  视频链接：打开 Wikipedia 时的 Layout/reflow

  ---

2.css部分

选择器

• 元素选择器
• id选择器
• class选择器
• 子元素选择器
• 相邻选择器
• 群组选择器（效率较高！）

选择器优先级

id选择器 > 类选择器 > 元素选择器

继承性

继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代

• 
  
• css的某些样式是具有继承性的。但是多数边框类属性，背景和边框的属性都是不能继承的。
• 权重决定样式被采用的优先级
  

1. h1 {color:blue;}特性值为：1
   
   • p em {color:purple;}特性值为：2
     
   • .apple {red;}　 特性值为：10
     
   • p.bright {color:yellow;} 特性值为：11
     
   • p.bright em.dark {color:brown;}　 特性值为：22
     
   • #id316 {color:yellow}　 特性值为：100
   • 在特殊框架下，被继承的特性值为0，如果没有其他规则应用于这个继承元素，任何显示声明的规则都会覆盖其继承样式。
   • 可以人为改变权重。
   
   

   ---

3.js部分

事件流

事件流：从页面中接收时间的顺序，事件传播的流程。

dom事件流同时支持捕获型事件，冒泡型事件，但捕获型时间会县发生。

一个完整的事件流是:window -> document -> body -> div -> button -> button -> div -> body -> document -> window

事件类型

事件类型：用来说明发生什么类型事件的字符串

1.表单事件：
submit事件；reset事件；click事件；change事件；focus事件（不冒泡） （IE和ES5支持冒泡的focusin）；
blur事件（不冒泡） （IE和ES5支持冒泡的focusout）；input事件（ES5 textinput提供更方便的获取输入文字的方案）

2.Window事件
：load事件；DOMContentLoaded事件；
；readyStatechage事件
；unload事件
；beforeunload事件
；resize事件
；scroll事件

3.鼠标事件：
click事件；
dbclick事件；
mouseover事件（冒泡）；
mouseout事件（冒泡）；
mousedown事件；
mouseup事件；
contextmenu事件；
mouseenter事件（不冒泡）；
mouseleave事件（不冒泡）；
mousewheel事件（FF DOMMouseScroll事件、DOM3 wheel事件）；
4.键盘事件：
keydown事件；
keyup事件；
keypress事件；

摘自：http://www.cnblogs.com/charling/p/3553230.html

事件对象

**事件对象：在触发事件时，会产生一个事件对象event。对象中包含着与事件有关的信息。

事件处理

事件处理：对象化编程的一个很重要的环节

过程：发生事件 - 启动事件处理程序 - 事件处理程序作出反应。

事件的处理可以是JS语句，但一般用特定的自定义函数。

事件处理程序（event handler）：是处理或响应事件的函数，它也叫事件监听程序（event listener）。应用程序通过指明事件类型和事件目标，在Web浏览器中注册它们的事件处理函数。

事件处理程序的调用顺序：多个事件处理程序调用规则如下:

1. 通过HTML属性注册的处理程序和通过设置对象属性的处理程序一直优先调用；
2. 使用addEventListener()注册的处理程序按照它们的注册顺序依次调用
3. 使用attachEvent()注册的处理程序可能按照任何顺序调用，所以代码不应该依赖于调用顺序；

笔者水平有限，如有错误请大家指正