web前端基础知识

HTML&CSS

对web标准的理解

1. web标准是对web的结构，表现，行为的规范。
2. 标签小写，标签闭合，不乱嵌套。
3. 使用外css和js脚本，提高渲染速度
4. 尽量避免使用行内样式，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版。
5. 标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助。

浏览器内核差异

1. Trident内核(window)IE 浏览器使用的内核
2. WebKit内核（NB 的内核，跨平台）chrome，Safari，塞班手机浏览器，安卓手机浏览器。
3. gecko内核 Firefox内核
   浏览器渲染原理
   1.当用户在地址栏里面输入网址并敲下回车的时候，浏览器开始向服务器发出请求；
   2.当浏览器拿到html页面的时候，开始从上而下进行解释；
   3.当遇到link标签的时候，浏览器会再次向页面进行请求，并根据请求得到的css来重绘页面；
   4.当遇到script标签的时候，浏览器再次请求服务器，并执行得到的js对页面进行重绘；
   5.当遇到图片等其他文件的时候，浏览器也会再次发起请求并根据拿到的文件来对页面进行重绘；
   6.当进行上面这些步骤时，浏览器的重绘回流等是无法避免的，即需要进一步的优化，比如制作雪碧图，避免反复请求，给图片固定宽高等等；
   上面的内容也可以解释为：
   浏览器拿到html、css、js,开始构建一个dom树，页面要显示的各元素都会创建到这个dom树当中，每当一个新元素加入到这个dom树当中，浏览器便会通过css引擎查询css样式表，找到符合该元素的样式规则应用到这个元素上，每一次应用新规则都可能引起重绘回流；

浏览器兼容性问题

http://blog.csdn.net/chuyuqing/article/details/37561313/(附上别人总结的博客链接)

hack

[csshack]（http://www.duitang.com/static/csshack.html）

CSS基本布局盒模型选择器优先级

HTML5

http://www.w3school.com.cn/html5/html_5_intro.asp

CSS3

FLEXBOX

1. flex-direction属性 flex-direction属性决定主轴的方向（即项目的排列方向）。
   
   • row（默认值）：主轴为水平方向，起点在左端。
   • row-reverse：主轴为水平方向，起点在右端。
   • column：主轴为垂直方向，起点在上沿。
   • column-reverse：主轴为垂直方向，起点在下沿。
2. flex-wrap属性
   
   • nowrap 不换行
   • wrap 换行 第一行在上方
   • wrap-reverse 换行 第一行在下方
3. flex-flow
   flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4. justify-content属性 定义了项目在主轴上的对齐方式。
   
   • flex-start（默认值）：左对齐
   • flex-end：右对齐
   • center： 居中
   • space-between：两端对齐，项目之间的间隔都相等。
5. align-items属性定义项目在交叉轴上如何对齐
   
   • flex-start：交叉轴的起点对齐。
   • flex-end：交叉轴的终点对齐。
   • center：交叉轴的中点对齐。
   • baseline: 项目的第一行文字的基线对齐。
   • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
6. align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
   
   • flex-start：与交叉轴的起点对齐。
   • flex-end：与交叉轴的终点对齐。
   • center：与交叉轴的中点对齐。
   • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
   • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
   • stretch（默认值）：轴线占满整个交叉轴。
   • http://www.jianshu.com/p/f9bcddb0e8b4
   • 圣杯布局 优先渲染中间栏 中间栏宽度为100% 左右栏左外边距设为负百分比
   • 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。多了1个div，少用大致4个css属性。

JavaScript

map和set

1. map
   
   • set()
   • has()
   • get()
   • delete()
2. set
   
   • 重复元素在Set中自动被过滤
   • add()
   • delete()

数据类型

number boolean string undefined null object

运算

this的指向问题

http://www.jb51.net/article/42257.htm

对象

1. 数组对象 方法
   
   • join（[分隔符]）
   • reverse()数组翻转
   • valueOf()返回数组值
2. 字符串对象 方法
   
   • toUpperCase() 大写
   • toLowerCase() 小写
   • charAt（索引）
   • indexOf（“字串”）
   • replace(“字串1”,”字串2”) 字串2替换字串1
   • slice(索引i[,索引j]) 返回索引i倒索引j-1的子串
   • substr(start[,length]) 返回特定长度的字串
   • match（/匹配字符/）
   • toString() 返回字符串
   • valueOf()返回字符串
3. 数学对象
   
   • Math ceil(数值) 大于等于该数值的最小整数
   • floor(数值) 小于等于该数值的最小整数
   • random()0到1的随机数
   • round（数值）最接近该数值的整数
   • sqrt(数值) 开平方根
     
     1. 定时器
        用以指定在一段特定的时间后执行某段程序。 setTimeout()： 格式： [定时器对象名=] setTimeout(“<表达式>”，毫秒) 功能：执行<表达式>一次。 clearTimeout()：终止定时器 格式： clearTimeout(定时器对象名)
4. 窗口名称.方法（参数）

function

1. 函数声明提前
2. 函数构造器

继承

1. 使用对象冒充实现继承
2. 采用call方法改变函数上下文实现继承 改变函数内部的函数上下文this，使它指向传入函数的具体对象

闭包

• 外部函数不是必需的。通过访问外部变量，一个闭包可以维持（keep alive）这些变量。在内部函数和外部函数的例子中，外部函数可以创建局部变量，并且最终退出；但是，如果任何一个或多个内部函数在它退出后却没有退出，那么内部函数就维持了外部函数的局部数据。

作用域

原型链

事件

1. JavaScript事件代理（委托）一般用于以下情况：1. 事件注册在祖先级元素上，代理其子级元素。可以减少事件注册数量，节约内存开销，提高性能。2. 对js动态添加的子元素可自动绑定事件。
2. 冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
3. 捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
4. DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。 DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

RegExp

Json

JSON有两种表示结构，对象和数组。
字符串：这个很好解释，指使用“”双引号或’’单引号包括的字符。例如：var comStr = ‘this is string’;
json字符串：指的是符合json格式要求的js字符串。例如：var jsonStr = “{StudentID:’100’,Name:’tmac’,Hometown:’usa’}”;
json对象：指符合json格式要求的js对象。例如：var jsonObj = { StudentID: “100”, Name: “tmac”, Hometown: “usa” };

Ajax

DOM

BOM

内存泄漏

程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。
对于持续运行的服务进程（daemon），必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。
不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。
有些语言（比如 C 语言）必须手动释放内存，程序员负责内存管理。
垃圾回收机制怎么知道，哪些内存不再需要呢？
最常使用的方法叫做”引用计数”（reference counting）：语言引擎有一张”引用表”，保存了内存里面所有的资源（通常是各种值）的引用次数。如果一个值的引用次数是0，就表示这个值不再用到了，因此可以将这块内存释放。

跨域

只要协议、域名、端口有任何一个不同，都被当作是不同的域。
1. 通过jsonp跨域
2. 通过修改document.domain来跨子域
3. 使用window.name来进行跨域
4.

异步装载

1. 对于支持HTML5的浏览器，实现JS的异步加载只需要在script元素中加上async属性，为了兼容老版本的IE还需加上defer属性；对于不支持HTML5的浏览器(IE可以用defer实现)，可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码，你可以把它放在匿名函数中执行，也可以在onload中执行，也可以通过XHR注入实现，也可以创建一个iframe元素，然后在iframe中执行插入JS代码。

模板引擎

前端MVC

MVC是一种设计模式，它将应用划分为3个部分：数据（模型）、展现层（视图）和用户交互（控制器）。换句话说，一个事件的发生是这样的过程：
　　1. 用户和应用产生交互。
　　2. 控制器的事件处理器被触发。
　　3. 控制器从模型中请求数据，并将其交给视图。
　　4. 视图将数据呈现给用户。
（1）MVC： 模型－视图－控制器(Model View Controller)
（2）MVP： 模型－视图－表现类（Model-View-Presenter）
（3）MVVM：模型－视图－视图模型（Model-View-ViewModel）

路由

1. init 监听浏览器 url hash 更新事件
2. route 存储路由更新时的回调到回调数组routes中，回调函数将负责对页面的更新
3. refresh 执行当前url对应的回调函数，更新页面

模块化

1. 模块化
2. 函数封装 这种做法的缺点很明显：污染了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间没什么关系。
3. 对象 为了解决上面问题，对象的写法应运而生，可以把所有的模块成员封装在一个对象中 这样避免了变量污染，只要保证模块名唯一即可，同时同一模块内的成员也有了关系 看似不错的解决方案，但是也有缺陷，外部可以随意修改内部成员
4. 立即执行函数

Canvas

ES6

1. let var const
   
   • let是块级作用域，跟var不同的是，let没有前置功能，不能重复声明
   • const定义的变量不可以修改，而且必须初始化。
   • var分为两种：局部作用域和函数作用域
   • let是块级作用域，函数内部使用let定义后，对函数外部无影响。
2. 箭头函数
   
   • 箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ … }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ … }和return
   • 箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。
   • -
3. promise
   
   • pending进行中
   • fullfilled已成功/resolved
   • rejected已失败
   • then
   • 只有异步操作的结果能决定当前是哪种状态
   • 
     
     1. map 和set
   • set()
   • get()
   • has()
   • delete()

Nodejs