浏览器是如何工作的？ （工作原理）
sublime text 3 快捷键大全以及配置编译环境
socket
变量声明提前
总之声明会提前，赋值等不会提前。
- 是运行的时候先去找局部作用域内的变量 ,找不到再去找全局变量
- host 只把声明提前，赋值不会提前，声明包括：var声明的变量和用function创建的函数
[如果是声明式function， 声明和赋值同时提前。]
变量声明提前4.jpg
* 附代码：
"use strict";
function get1(){
return yy;
var yy = function (){};
}
function get2(){
return yy;
function yy(){};
}
console.log( get1() );
console.log( get2() );
*结果：
undefined //不提前
yy() //提前
- 创建环境变量 执行环境 内部变量什么的推到环境最开始执行
- 你要是不太理解，你可以先记住,var声明的变量和用function创建的函数,在js加载的时候就已经分配好了,然后才会执行js.
可以理解为c语言时候的编译过程
比如你可以这样用
aa();
function aa(){};
但是你不能
aa();
aa=function (){};
link放在头部，script放到尾部的原因：
chrome只渲染一遍（dom+css一起渲染）。firefox渲染两遍（dom+css分别渲染）。 所以css的link放到头部。
父级先加载（从外到内），子级由上到下依次加载。如何加载呢？跟解析有啥关系？如果有脚本阻塞（用defer="defer"或者async="async"(IE不支持)防止阻塞）的话就暂停往后加载。并且索引不到后面的元素。所以script放到尾部。
UI后端，IE：ActiveX
浏览器的引擎
- IE
MIcrosoft ==Trident 三叉戟 - chrome
Google ==Webkit - from Apple + KHTML,Blink 眨眼 - firefox
Mozilla基金会开源组织 ==Gecko 壁虎, - safari
Apple ==Webkit - opera
挪威 ==opera （内存占用低，持有性很强，从不崩溃），Webkit - 360 极速模式，
webkit(chrome 23版本直接拿来用)，
-360 兼容模式，IE7的内核。
总结： 查看浏览器版本，控制台：window.navigator.userAgent
渲染引擎（html/css）、js解释器H5的web database网络里的MIME
type若是非浏览器可以解析的，则会下载存到本地。
虽然浏览器容错很强，但是代码越规范越好。避免问题产生。在业内实现自我价值。
正则
\s是空格，\w是字母数字下划线,[]+表示多个，^[]是非。*[]是？。正则里有特殊意义的都需要转义，即\
CSS
最后一条声明的；分号可以省略。大小写不敏感的。
颜色半透明【IE7+】color: rgba(255,0,0, .4);color:transparent;字体【有时也会影响排版】；
字体是可以被继承的属性之一。font-family:"Arial","宋体","黑体";操作系统不同，字体不一。浏览器会从左到右依次查找字库，编码支持，直到找到."Arial"是苹果系统支持的。font:normal 120px/1.5或者1.5em "微软雅黑"120px/150px或者1.5或者1.5em【字体大小，行高（像素或字体大小的倍数来表示，em表示一个字体，1.5*120px的行高）】被聚焦的时候用 outline【a标签里用的（hover的时候才能看到），
无障碍阅读：连续按 "Tab",可以改变焦点的位置】或者属性tabindex=1user agent stylesheet:浏览器自带的字体，默认的。,
模态化窗口：遮罩层。
布局（定位）,适应于块级标签【对块级定位，带盒子的才有定位】border-top:0;padding-top:0;//若父标签某个方向同时没有边框和内边距，子标签当前方向的外边距会跟它合并。这时。父会继承子的外边距【子失效，父自己的失效，继承来的起效，继承并不彻底，仅适用父小于子的情况。父大于子时，只有父自己的起效。】左右居中，margin:0 auto;很难实现上下居中【可用脚本实现，一般没必要。】
table,数格子，抠格子，容易搞乱，灵活性不会；但兼容性很高。td里要有东西，否则不撑开。
层叠样式表的层叠顺序（css权重优先级）层叠次序
- 优先级递增
- 继承来的样式
- 浏览器默认的
- 选择器优先级
- 标签
- class
- #id
- 相同优先级， 后来居上，即后来的覆盖之前的。
- 如果是组合的选择器，权重计算法则
#id >>> .class >>>tagName
.class + tagName * 2 >>> .class [+ tagName * 1]
- 行内样式（直接在style属性里写的或者脚本改变的，不需要选择器，）
- 属性值后缀 !important 例如：box{color:red !important;}（特殊的字符来提高指定样式规则的应用优先权，使该条样式属性声明具有最高优先级。只跟有!important比较，其他的都不比它低） 。
细节注意：IE6不符合规范的几点：
* 如果出现ID，不管多少个，以最后出现的一个为准。
* 不支持!important。利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important。
* ie6不完全支持!important
* IE支持重定义中的!important，例如：
.yuanxin {color:#e00!important;}.yuanxin {color:#000;}
你将会发现定义了样式class="yuanxin"时，在IE下，字体显示为红色（#e00）。
但不支持同一定义中的!important。例如：
.yuanxin {color:#e00!important;color:#000;}
此时在IE6下不支持，你将会发现定义了样式class="yuanxin"时，字体显示为黑色（#000）。
css hack的机制：
- 属性前缀 _ 或 * IE67。
- 属性值尾部 \9 IE678
- 使用注释的方式【一般提倡这种，因为上面的那种，代码可读性差，样式表的检测器会报错】
实例：也可通过下面的方式来分别增加全局class实现
<!doctype html>
<html>
<head>
IE特有
滤镜【在IE里模拟CSS3的透明，模糊，翻转，偏移复制，闪光，过滤颜色等效果】
-
和css表达式express
padding-top:express(20+"px");或者更复杂的表达式
padding-top:express(document.getElementBy('wd').value+"px");可以应用到：
- 实现实时监测的效果。
- IE可以算整个网页的高度，然后把元素定位到距离顶部一定的高度。
- 也能实现IE下的绝对定位（position : fixed;）的兼容。
-
和behavior【在IE里模拟CSS3的PIE效果】）
- behavior）：【Web 行为的唯一一个浏览器是IE，这些行为是由后缀名 为·htc的脚本文件描述的，
- 它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。】
- IE8及以下，想要模拟css3的radius,shadow等，只需要引入htc文件，behavior：url(PIE.htc);在IE里就会自动创建VML标签。进行复杂页面元素的渲染。
- VML（矢量可标记语言），IE里的画笔，能实现你所想要的图形，结合脚本，可以让图形产生动态效果。
注意：
VML后面会跟H5的SVG进行对比，http://raphaeljs.com/工具非常好的兼容两者，
raphaeljs这是一个基础的库。
另外extJS4, Highcharts图表工具也是兼容两者的。
这三者都是IE6独有的吗？不对。是IE独有的，仅限于在IE里玩。**
CSS选择器
选择器有益于写比较复杂的css和jquery。
基本选择器，*{margin:0;padding:0;}
选择器分组，选择器用逗号分隔，组合为一组，然后样式代码公用。
关联选择器，【有需要就去查表】
父子关系 >，
只是后代 空格，
兄弟前后关系 + -，
所有兄弟关系 变通实现
索引index ul > li:nth-child(1或者2n等){}
第一个 ul > li:first-child(1或者2n等){}属性选择器[没有分组概念，要求精确的属性值]
li[class="third"]{} 注意这种对于 <li class="third f4">不起作用，换成 .third{}可以
选择其 class 属性值以 "top" 开头的元素，并设置其样式：
[class|=top]{ background-color:yellow;}
伪类【标签状态，着重性级别由低到高的顺序】
a:link
a:visited
a:active
a:hover
聚焦标签：所有标签增加属性tabindex=1，都可以聚焦。均有个outline.
a:focus{
outline:1px solid red;
}
鼠标选中状态
::selection{//没有标签的概念了，所有标签都可以选中。必须是双冒号。
color:#fff;
}
伪属性【标签结构】
xxx:first-letter{}【只与一些css属性有效，XXX是块级的才能定义，行内的不行。】
:not(p),非p标签。支持IE9及以上。
ul > li:first-child(1或者2n等){}
p:before{
centent:"345";
}
p:after{
centent:"789";
}
清除浮动
浮动的元素脱离了正常的文档流【子标签不会撑开父标签】
方法一：给没撑开的元素ul【li,float;】后面追加兄弟级别的块级元素，比如div,给它clear:both;
<div style="clear:both;"></div>-
方法二：
ul:after{display:block; content:"."; visibility:hidden;//也可是overflow:hidden，因为有height:0; clear:both; height:0;//只IE下有问题，因为有点（.）会有行高，所以在低端浏览器下还需要下面的。 line-height:0; font-size:0; }
方法三：直接用overflow:hidden，但是CSS3的效果【变换阴影变大时】会出问题，除非没有ＣＳＳ３效果。
CSS3：
-
媒体查询【IE9及以上】
- link media属性（样式差别太大，样式代码太多的时候提倡）
- 和@media两种方式`
-
背景扩展 ,例如图片填充满屏：
background-size:100%;或者background-size:100%,100%;[宽高] background-position：left center;
-
背景渐变
background-image:-webkit-gradient(linear,50% 0%,50% 100%, from(#45B5DA),to(#0382ad));
- border-radius:左上，右上，右下，左下，【圆形：宽高一样，
- border-radius:50%;椭圆：修改宽高】
- box-shadow:左右偏移,上下偏移,阴影宽度，颜色。
- opacity:.5;调整层级,查看透明度。
position:relative;z-index:3; -
可伸缩框【不支持IE】
-webkit-box-align:center;-webkit-box-pack:center;display:-webkit-box;
-
网格模板，做布局用的，是个庞大的布局属性【目前没有浏览器支持】
display:grid; grid-columns：每列的宽度，每列的宽度，每列的宽度; -
多列属性【适用文字较多的时候，比如小说分屏效果。】
column-count：3; 【宽高只限定一个就行，避免混乱，样式有冲突， 就会异常展现，可以通过column-gap：0;去除缝隙。 有时需要增加float】 column-fill：; column-gap：0; -
过渡
transition: 发生在哪些css属性上（应用过渡效果的CSS属性名）,动画周期(间)， 动画模式（过渡曲线）, -
变换（比较庞大的效果变换）
- 旋转
transform:rotateY(0deg);
【每次重新旋转前先复位，rotateY(0deg);】
【rotateZ 像钟表，rotateX像翻笔记本，rotateY像翻书】
transform-origin:center;【旋转动画原点】 - 缩放
transform:scale(2); - 扭曲
transform:skew(30deg,10deg); - 3D景深(透视效果)
perspective:1000;
backface-visibility:hidden;【区分正反面】
- 旋转
-
动画,15Ke-22min
【研究东西，摒弃其他干扰，集中注意力。工作用到了或者平时有空就研究下】
keyframes
animation: mymove 5s linear infinite;
JS
js解释器，每个浏览器都有内置的解析器，比如，chrome或者node.js的
V8环境。【任何一门编程语言运行在计算机的特定环境中， php需要apache等服务环境，java需要自己的JVM虚拟机】代码编辑器：推荐sublime或者webstorm等
简单的可用在控制台调试。
核心的一点是：表达式运算结果（返回值）可当做全新的变量、单独的变量进入下一步的运算,undefined标示没有返回结果。
运算优先级，【记一下，用熟练需要写大量的代码来磨。】
-
Js大小写敏感
NULL是普通变量名(未定义)。、-
typeof可返回的类型有
number（NaN），string，object（null或者数组），boolean，undefined，function typeof typeof undefined（不管是啥）//String
type of 可返回的类型.jpg 特征性的判断是否数组的方法
A instanceof Array或者!!A.length严谨的方法，
({}).toString.call([1,2])或者Object.prototype.toString.call([1,2])【对象的原型的字符串对象的call方法】，JQ的源码都是这样判断的，Object.prototype.toString.call(new Date())-
运算符的优先级 ：
var v = 1; v += ("9"&6) || (.45|0) ? Math.PI : Math.max(2,3) * (5 - 4)
1，括号，属性运算符，方法；
2，单目运算符：++，--，！
3，数值运算符(有自己的优先级)：+，-，*，/，%；
4，位运算和逻辑运算
5，三目运算符，true ? a:b;
6，赋值运算符（多个的话，从后往前运算）
7，对象里：的运算级别最低。{name: nameU}【name只是个名字，nameU才是对象的引用】，每个变量都是个对象，拥有方法.toString().
非数字和数字比较结果都是false.jpg
复杂逻辑运算的短路.jpg
位运算演示.png 数组对象的方法：
.push()，添加一项
.join("+").添加分隔符分隔各项，拼接各项。判断的时候 多用全等 ===，不用==。
属性运算符（索引对象）
用a.name和a["name"]
异同
-
相同点：都可以存，且取出来的值完全一样；
-
不同点是：只能用a["name"]的两种情况，key名不规则，里面含有点的时候，key名不确定的时候。用a.name性能要高，但是差异微小，除非访问量在亿级以上的时候。
-
标示否定意义的有：
0
NaN
""
null
undefined!0表示true,!1表示false 取整方法，1255.98328 | 0 或者
Math.floor()【因为位运算都是整数运算】
Math.max()位运算符 | 和 & 以及 ^ (异或)运算的精确结果，即确定的数值，再换算成boolean类型。
switch case
只考虑等于情况，开关进入，不管跳出 （往下一直执行，知道遇见break）。需要代码break设置跳出，
一大票的实例：九九乘法表，【\n是换行符，\t是制表符，8个空格】【切换盘符d:,跳目录cd 目录】
面向对象封装。
注意传入的参数要有一定的意义，并简答，通俗易懂。
return 变量；来告诉方法外的对象，你哪个变量给它用，否则console会undefined【这个变量就是方法对外暴露的变量（结果字符串）【提倡】，或者把功能移入方法里，这样什么都不用暴露】arguments，类数组对象(可以转化成数组)，key是从0开始的数字，拥有length，可把它当数组来循环用。但是没有排序等方法。
字符串与任何的数字比较都是false【处理方法；过滤，如果不是数字的话先改成0 】
求最大最小数【只是排序的第一步】
三目运算符
x? y:z 【等价于if/else】x是一个boolean类型,若x为true,运算结果是y,若x为false,则运算结果是z.质数：
质数（prime number）又称素数，有无限个。一个大于1的自然数，除了1和它本身外，不能被其他自然数（质数）整除，换句话说就是该数除了1和它本身以外不再有其他的因数；否则称为合数。
程序编写关键是：只要有一个能被整除就不再是质数
** 实例**
-
是不是质数
打印1000以内的质数。
代码优化
1. 跳出return，减少循环次数
2. 找数学上的规律length，减少循环运行次数
3. 找出1000以内有多少个平方？-
裴波那切数列-递归案例以及实现要素( 结束标志 + 可递归算法 )
【没太懂，再听：19ke,15min】
递归:* 描述 ，程序调用自身的编程技巧称为递归（ recursion）。递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算，大大地减少了程序的代码量。递归的能力在于用有限的语句来定义对象的无限集合。一般来说，递归需要有边界条件、递归前进段和递归返回段。当边界条件不满足时，递归前进；当边界条件满足时，递归返回。 * 递归定义，就是在运行的过程中调用自己。 * 构成递归需具备的条件： 1. 子问题须与原始问题为同样的事，且更为简单； 2. 不能无限制地调用本身，须有个出口，化简为非递归状况处理。 * 实例
* 应用
用递归求解比迭代求解更简单，
数据的结构形式是按递归定义的。
如二叉树、广义表等，由于结构本身固有的递归特性，则它们的操作可递归地描述。
* 递归的缺点：
递归算法解题相对常用的算法如普通循环等，运行效率较低。因此，应该尽量避免使用递归，除非没有更好的算法或者某种特定情况，递归更为适合的时候。在递归调用的过程当中系统为每一层的返回点、局部量等开辟了栈来存储。递归次数过多容易造成栈溢出等。
普通对象
的key的引号可加可不加，如果有特殊字符最好加上。
json里的key必须加引号，val里只要是显式变量【字面值（literal）】就可，不能写function，正则，也不能叠加引用。json按照字符串的识别规则。方法
* 只定义，不调用（方法名()）就不会执行，代码没有意义。解析器也不会解释，只有在运行的时候才去解析。没有语法错误（整个解析出错了），里面的代码没有意义。
同级的可用随意调用。
-
子方法与父的关系
一：只能为父掉用，
二：子的变量的作用域只是子方法，父却不能用子的变量。
三：子可用父方法里的变量，-
练习( 简单排序算法的原理及实现 )，参考 地址 http://runjs.cn/detail/m1pgexjv
-
-
冒泡排序：相邻的交换。
【比较合适数组。】一次只排正序一对数（从前往后依次查看一旦发现有反顺序就排一次， 再排下一个数（跟下一个数比较），排到队尾再回到队首继续排序，一直到所有项的顺序都正确） 这样就会把最大的排到最后，第二大的排到倒数第二。。。 -
选择排序：每次找到最小的换到目标位置(最前或者最后)。
【在链式里比较合适】选择排序（Selection sort）是一种简单直观的排序算法。 它的工作原理是每一次从待排序的数据元素中选出最小（或最大）的一个元素， 存放在序列的起始位置，直到全部待排序的数据元素排完。 选择排序是不稳定的排序方法 （比如序列[5， 5， 3]第一次就将第一个[5]与[3]交换，导致第一个5挪动到第二个5后面）。 插入排序：给当前元素插入有序数列
-
快速排序，拿首元素将数列分开，小的放左边，大的放右边，是个递归过程#####
整个排完后（比如100个，首元素左侧20个数，右侧79个数），循环再排左侧和右侧的子数组。【太复杂了，可以自己试试】
这样原来顺序就正确的，就没动位置，效率较高，性能较好。
-
合并排序：存储一份数组的数组，以备合并使用。
-
递归实例：
目标：由源数据拼接省市县的json格式数据，province.js,逻辑好复杂（多级联动，太多级就更复杂）。逻辑性很强，很多调试方法需要耐心折腾。。。。没听懂，自己折腾试试吧
20课，01:42min或者更早01:10min-
闭包：
-
方法定义和调用的时间点不同，决定了变量的值不同。如下实例：
var students = [
{name: "小明"},
{name: "小虎"},
{name: "珊珊"},
{name: "小慧"},
{name: "大胖"}
];
var sports = [
"踢足球",
"打棒球",
"踢毽子",
"跳绳子",
"拔河"
];
for (var i = 0; i < students.length; i++) {
//循环时就执行，
sport = sports[i];
//调用的时候才会执行，这时sport = ‘拔河’;
students[i].play = function(){
console.log( this.name + sport );
};
};
for (var j = 0; j < students.length; j++) {
students[j].play();
};
VM95:19 小明拔河
VM95:19 小虎拔河
VM95:19 珊珊拔河
VM95:19 小慧拔河
VM95:19 大胖拔河
解决方法一闭包
* 写匿名方法,写在括号里，使优先级提升，然后加括号（调用这个方法，即调用自身）
* 方法参数，只对内，基础类型（数字字符串布尔型的显示变量）参数，是复制（如果是引用的话，则是引用的复制）一份来用，有自己的运行环境，不受外界环境影响）：
var students = [
{name: "小明"},
{name: "小虎"},
{name: "珊珊"},
{name: "小慧"},
{name: "大胖"}
];
var sports = [
"踢足球",
"打棒球",
"踢毽子",
"跳绳子",
"拔河"
];
for (var i = 0; i < students.length; i++) {
(function(_i){
var sport = sports[_i];
students[_i].play = function(){
console.log( this.name + sport );
};
})(i);
};
for (var j = 0; j < students.length; j++) {
students[j].play();
};
执行结果
小明踢足球
小虎打棒球
珊珊踢毽子
小慧跳绳子
大胖拔河
**解决方法二 **
给元素的index属性赋值，绑定在对象上面。这样会给dom增加负担，影响性能。比如百度地图（LBS），用svg绑定标签，给上万级别的标签加index负担很大。【？this】所以选闭包的模式
-
经过测试，数组的项没有index属性。
for (var i = 0; i < students.length; i++) {
sports[i].index = i
students[i].play = function(){
console.log( this.name + sports [this.index] );
};
};
for (var j = 0; j < students.length; j++) {
students[j].play();
};
运行结果小明undefined 小虎undefined 珊珊undefined 小慧undefined 大胖undefined
如何看API
-
eval("");灵活但不严谨。js代码混淆，它还可以把字符串转成json：parseJson或者（eval("")）;
eval.jpg -
Number
number.jpg
数字转换.jpg - 编码解码
浏览器默认只支持ascii编码（256以内的），一些字符和标点符号，协议上不支持中文等Unicode编码，所以传之前先转成这些字符。（中文传到地址栏，若是get请求会默认转成ISO-8859-1格式）往地址栏传的时候需要进行处理，比如以下方法：
- escape(),在线native2ascii工具，Unicode转换为ascii编码
- encodeURI()：转换为ISO-8859-1格式，
- 全局对象
任何运行环境都有全局对象
顶层对象在不同的环境是不一样的。
- 浏览器里的是window
- node里是GLOBAL，切换node环境命令：node
- 数学Math
- 保留几位数，两种方法
(31232.12333443).toFixed(2) //"31232.12"
Math.round(123.456 * 100)/100 //123.46，方法优先级最高
- 顶层内置对象
var a = b ={},a,b都是对象的引用，只是复制了一份引用
-
所有顶层的这些都是方法，当方法的时候是方法，当对象的时候，就要知道它是谁产生的，构造方法（是由自己方法产生的）方法产生的。
当类看是 构造方法，当实例是 对象，有自己的构造方法
Function.constructor//Function()Function.constructor === Function//true Object = 1 //1，给Object改了 Object.constructor // Number() Object = ({}).constructor //Object(),可以找回来 -
显示创建 var o = {}
隐式创建或者标准创建 var o = new Object();
对象的创建.jpg
对象的创建2.jpg prototype,原型或者模子/模型或者类似java接口，跟模板一样，修改之后，会全都改掉。
Object.prototype.name='xiaoming';
var o = {};o.name; //"xiaoming"
Object.prototype.name='xiaoming1232';
var t=new Object();t.name;"//xiaoming1232"
delete Object.prototype.name //true 删除对象引用关系，唯独数组不是。
t.name;//undefined-
原型扩展是当工具用的，它的对象本身是不应该使用的，所以就用到了hasOwnProperty()
o.age = 10;o.hasOwnProperty('name');//false o.hasOwnProperty('age');//true for-in 会把实例的所有属性（内置的和继承来的扩展属性）都循环出来，
21ke 01:33min
01:43minObject.constructor === Function //true
-
Object instanceof Function //true
instanceof-constructor.jpg
类的原型.jpgvar MyObject = function (){};//定义一个类，类名是驼峰，方法都是小写的 MyObject.prototype = new Array();//定义类的原型（类java接口）， 只有数组才有join和push方法 MyObject.prototype.play = function (){//扩展一个新方法 console.log(this+"")//打印字符串 }; MyObject.prototype.toString= function (){//改写原有的方法，修改了类的原型（模子）， 所有该类的实例也一同被改掉 return "["+this.join(",")+"]"; //拼接数组形式的字符串 }; var obj = new MyObject();//定义一个实例对象 obj.play();obj.push(1);obj.play();obj.push(1);obj.play();obj.push (1);obj.play();obj.push(1);-
其他
- 编码的括号里内容左右均留空格，这样避免写不上内括号。养成习惯
-
cmd 清屏是：cls,
跳回来：ctrl+C+C-
Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。
-
Node是一个Javascript运行环境(runtime)。
-
实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快，性能非常好。Node对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。
-
急需练习的
md或者简书来写笔记
http://www.jianshu.com/p/f992705d795d
http://www.jianshu.com/users/00ac3d5d475f/latest_articles
IE滤镜等
css3
递归
常用排序算法
闭包
-
漏讲的内容：
- 3个P中的jsp
- 实例( css多级联动菜单 )
