前端基础
-
prototype和__proto___的关系是什么 meta viewport原理
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。它们要解决的问题是相同的，即无视设备的真实分辨率，直接通过dpi，在物理尺寸和浏览器之间重设分辨率
<meta name=”viewport” content=”width=device- width, initial-scale=1, maximum-scale=1″>
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，
如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放
- 域名收敛
在移动网络环境下，减少非必要 DNS 请求，将相关域名收敛成一个，可以尝到缓存的红利，进而可以减少打开页面时间
移动端减少 DNS 解析时间有两种方式：
- 减少 DNS 请求
- 缩短 DNS 解析路径
http 请求过程
DNS 域名解析 -->
发起 TCP 的 3 次握手 -->
建立 TCP 连接后发起 http 请求 -->
服务器响应 http 请求 -->
......略
在这里第一步，也是关键的第一步 DNS 解析，在移动端的 http 请求耗时中，DNS 解析占据了大部分时间。float 和 inline-block
Inline-block是元素display属性的一个值。这个名字的由来是因为，display设置这个值的元素，兼具行内元素（ inline elements）跟块级元素（block elements）的特征。
- 块级元素（block elements）,来源于CSS盒子模型。块级元素包含width height,padding,border与margin，他们的排列方式是从上到下排列。 行内元素，排列方式是水平排列。
- 行内元素（inline elements）排列方式是水平排列。
-
行内块元素（inline-block elements）在内部他的表现类似block元素，比如他拥有block元素的width height,padding,border与margin，而外部的排列方式有类似行内元素，即水平排列，而不是像块级元素一样从上到下排列
虽然设置浮动跟设置inline-block有些特征类似，但两者的区别还是非常明显的: - 文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。
- 水平位置（Horizontal position）：很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。
- 垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。
首屏、白屏时间
http://hushicai.com/2014/04/19/guan-yu-ye-mian-shou-ping-shi-jian.html闭包
当函数可以记住并访问所在的词法作用于时，就产生了闭包，即使函数是在当前词法作用域外执行。
http://yevvb.com/2017/03/17/You-Don%27t-Know-Javascript3/get post 区别
http://www.oschina.net/news/77354/http-get-post-different事件模型
http://www.cnblogs.com/lvdabao/p/3265870.html
http://www.cnblogs.com/lvdabao/p/3266421.html兼容ie的事件封装
// 事件绑定
function addEvent(element, eType, handle, bol) {
if(element.addEventListener){ //如果支持addEventListener
element.addEventListener(eType, handle, bol);
}else if(element.attachEvent){ //如果支持attachEvent
element.attachEvent("on"+eType, handle);
}else{ //否则使用兼容的onclick绑定
element["on"+eType] = handle;
}
}
function removeEvent(element, eType, handle, bol) {
if(element.addEventListener){
element.removeEventListener(eType, handle, bol);
}else if(element.attachEvent){
element.detachEvent("on"+eType, handle);
}else{
element["on"+eType] = null;
}
}
getComputedStyle与style的区别
我们使用element.style也可以获取元素的CSS样式声明对象，但是其与getComputedStyle方法还有有一些差异的。
getComputedStyle方法是只读的，只能获取样式，不能设置；
而element.style能读能写，能屈能伸。
getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素
<p>，getComputedStyle方法返回对象中length属性值（如果有）就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0。
Angular
https://segmentfault.com/a/1190000005836443#articleHeader5
directive
https://segmentfault.com/a/1190000005851663
scope digest
https://github.com/xufei/Make-Your-Own-AngularJS/blob/master/01.md
动态依赖注入
oc.lazyload
前端工程化
https://www.zhihu.com/question/24558375
