前端信息汇总
1、Sublime Text的插件
如果想让Sublime Text锦上添花，这些插件值得尝试。FTPSync,FTP同步工具；SASS Build,编写CSS的预处理器；Package Control，插件管理；Emmet,高效编写HTML和CSS；SublimeLinter，更新时选择并安装需要经常使用的Linter；SublimeEnhancements，边栏菜单的扩充等；PackageResourceViewer,管理包；Git，在Sublime Text中运行Git命令等；Terminal,使用Sublime Text打开项目文件；CSSComb，给CSS属性进行排序；CanIUse，检查浏览器是否支持代码中的CSS和HTML；Alignment,对齐代码；Trmmer,自动删除不不要的空格；ColorPicker,查看或设置颜色的值；MarkDown Editing，查看或编辑Markdown文件；FileDiffs，查看两个不同文件的差异；DocBlockr，为代码建立文档；Snippets，快速书写代码。
2、JSCity
把源码可视化成建筑物的JS库。
3、Flex布局
W3C提出的布局方案，可以实现各种响应式布局。现在已经得到所有浏览器的支持。
4、Chrome的皮肤插件
搜索"DevTools Theme"，下载，输入chrome://flags,找到"Enable Developer Tools experments"，勾选复选框，重启浏览器，打开开发者选项，点击小齿轮，Experments项，勾选"Allow custom UI themes"。
5、Chrome插件：Performance-Analyser网页性能分析插件
分析http请求，执行期的时间，占比。
6、Chrome插件：FeHelper
json格式化、html格式化、二维码的生成，等等。
7、Chrome插件：POSTMAN
模拟发送请求，简化版的fiddler。
8、Chrome插件：Visual Event
捕获网页元素的各种事件，对于复杂的事件作用不大。
9、Chrome插件：WhatFont
查看网页字体。不鼠标停留在字体上就会显示该字体的名称。
10、Chrome插件：Speed Tracer
性能分析器，比Profiles还强大。可以跟踪事件、查看CSS样式、找到js中内存泄漏、检测js语法，等等。
11、前端工程师要做的事
● 根据项目特点选择前端技术栈
● 把平面作品实现为HTML/CSS/JavaScript
● 用PS进行图片处理
● 熟悉JavaScirpt，以及框架、组件
● 熟悉前端开发流程：代码检查、精简、模块化CSS、LiveReload，调试
● 跨浏览器、跨设备的解决方法
● 更高效地操作DOM
● 将CSS写得更加清晰
● 代码更易于维护、单元测试
● 大型项目的模块化和组件化
● HTTP协议
● Web容器/HTTP服务器如何工作
● 无状态Web应用的工作原理
● 动态、静态内容如何分离部署(反向代理配置)
● 安全机制如何配置
● 监控机制如何配置
12、Angular JS
可以让你从jQuery各种选择器和回调函数中解脱出来，双向数据绑定和模型是唯一数据来源。不足的地方在于：严重依赖DOM，按DOM中的指令的优先顺序将模版编译，这样让调试和检测执行顺序变得困难；采用一种叫"脏检查"的机制来跟踪数据变化并同步用户界面，任何Angular作用域内的操作都会触发"脏检查"，导致随着绑定的增多应用性能会降低；Angular所有的操作都必须经过它的diget cycle遍历监听器，否则组件不能和数据模型同步，这导致了兼容性问题，如果需要使用第三方Js库，需要使用Angular的$apply函数包装它们，这相当于重构每一个JS库只为能够和Angular合作。没有很好地解决依赖注入；陡峭的学习曲线。
13、React
React是最新的开源UI框架，是构建Javascript的新方式，由Facebook和Instagram领导。React可以用来构建UI界面，比如作为MVC中的View。React可以用来编写独立的Web组件。React鼓励数据单向流动，相信组件是被数据驱动的状态机，讨厌DOM并尽力避免开发者与DOM打交道。提供了尽可能少的API实现一个UI组件。
使用React的好处是：速度很快，在JavaScript代码逻辑和DOM间引进了一个虚拟DOM，其获取渲染之间的diff，之后在DOM中只改变那些需要改变的；很好的兼容性，提供了一套支持IE8以上的API；模块化，UI组件，每一个模块可以被单独开发、测试，并且能调用其它组件；单向数据流动，FLux是在Javascript应用中创造单向数据层架构；使用纯的Javascript;单页JS Web应用；与其他库兼容良好......
14、如何减少HTTP请求次数
● 合并文件:将多个样式文件和脚本文件合并成一个文件。
● CSS Sprites:将多个图片拼成一副图片，然后通过CSS控制。
● Base64编码：通过编码的字符串将图片内嵌到网页文本中。
15、减少DOM元素数量
通过document.getElementByTagName('*').length
16、Gzip压缩传输文件
Gzip通常可以减少70%网页内容的大小，包括脚本、样式表、图片等文件，主流服务器都有相应的压缩支持模块。
17、避免图片空的src
图片空的src仍然会使浏览器发送请求到服务器。
18、Cookie优化
Cookie被用来做认证或个性化设置，其信息包含在http报文中。可以在以下几个方面优化：
● 去除没必要的cookie
● cookie的大小减到最小
● 设置合适的domain级别
● 设置合适的过期时间
19、CSS优化
● 将样式表置顶，css放在网页的HEAD中让网页显得加载速度更快。
● 避免css表达式
● 使用外部的css文件
● 压缩css文件
○ CSSTidy
○ Minify
○ YUICompressor(编译集成，包含在Nuget中)
○ AjaxMin
○ CSSCompressor
20、优化Javascript
● 把脚本置底
● 使用defer，指定脚本在文档加载后执行
● 使用HTML5中的async关键字，让脚本异步执行
● 使用外部的Javascript文件
● 压缩js文件
○ Packer
○ JSMin
○ Closure compiler
○ YUICompressor(编译集成，包含在Nuget中)
○ AjaxMin
21、js闭包
有权访问另一个函数作用域变量的函数。
function outerFunction(name){
return innerFunction(arg1, arg2){
var item1 = arg1[name];
var item2 = arg2[name];
if(item1<item2){
return -1;
}
if(item>item2){
return 1;
}
if(item1==item2){
return 0;
}
};
}
var out = outerFunction("name");
var result = out({name:"d",age:18},{name:"e",age:19});
以上，outerFunction函数中的匿名函数有权访问name变量，这个匿名函数就是一个闭包，之所以有权访问name变量，是因为匿名函数有一个scope属性，outerFunction函数也有一个scope属性，另外全局还有一个scope属性，匿名函数的scope属性指向outerFunction函数的scope属性，outerFunction函数的scope属性指向全局的scope属性，scope之间形成了链表。
22、js原型
function Person(){
this.Name = "hello";
}
var p = new Person();
→实例有一个_proto_属性
→var p = new Person()相当于p._proto_=Person.prototype
→每个对象，比如这里的Person都有一个prototype属性，prototype属性又有一个_proto_属性
→隐式地还包含这样的关系：Person.prototype._proto_ = New Object();
23、Grunt工具
自动完成一些反复重复的任务，比如压缩、编译、单元测试等。Grunt.js依赖于node.js的npm来管理和安装，首先安装node.js。比如：grunt-contrib-imagemin用来压缩图片，grunt-contrib-uglify用来压缩JavaScript文件，grunt-contrib-cssmin用来压缩CSS文件，grunt-contrib-htmlmin用来压缩html代码。
24、Spartan浏览器
微软放弃IE，重新推出的Spartan浏览器。
25、JavaScript的Console
通常用console.log()和console.error()方法，起始有关Console的API还不少，比如console.group(),console.time()，等等。
26、在浏览器中输入地址并且按下回车键后发生了什么？
→输入地址，按下回车键
→和回车键有关的电流回路闭合
→电流进入键盘的逻辑电路系统
→逻辑电路系统获取到回车键的码值是13
→键盘控制器将码值编码传输
→浏览器获取输入的地址信息
→浏览器把接收到的协议和自带的协议比较，选择使用HTTP或HTTPS协议进行传输
→浏览器检查域名是否在缓存中，如果缓存中没有当前域名就调用gethosbynme库函数
→检查域名是否在本地的Hosts里
→向DNS服务器发送一条DNS查询请求
→对DNS服务器进行ARP查询
→查看路由表，看看目标IP地址是否在路由表中
→查询网络接口的MAC地址，再次发送一个2层的ARP请求
如果主机和路由器直接相连，路由器返回一个ARP Reply。
如果主机链接到一个集线器，集线器会把ARP请求向所有端口广播，返回ARP Reply。
如果主机连接交换机，交换机检查本地CAM/MAC表，看看哪个端口有我们要找的MAC地址，返回ARP Reply。
→主机收到ARP Reply
→使用53端口向DNS服务器发送UDP请求，如果响应包太大，会使用TCP请求
→浏览器得到目标服务器的IP地址和端口号
→浏览器调用系统的socket函数，请求一个TCP流套接字
→流进入传输层。请求封装城TCP segment，目标端口被加入头部，源端口从系统获取
→TCP segment被送到网络层
→在网络层，目标IP以及本机IP加入头部，封装城TCP packet
→TCP packet进入链路层
→链路层在封包中加入frame头部，里面包含内置网卡的MAC地址以及网关(本地路由)的MAC地址，至此TCP封包已经组装完毕，准备发送。
→传输TCP封包
对于大部分家庭和小型企业来说，封包从本地计算机触发，经过本地网络，再通过调制解调器把数字信号转换成模拟信号，进行传输。到达目的地，通过调制解调器，把模拟信号转换成数字信号。
对于使用光纤的，信号一直是数字的，封包直接传送到目的地。
27、发送TCP封包的具体过程
→客户端选择一个初始序列号(ISN)，将设置了SYN位的封包发送给服务端
→服务端接收到SYN包
→服务端选择初始序列号(ISN)
→服务端设置SYN位，表明自己选择了一个初始序列号(ISN)
→服务端把客户端的ISN加1复制到ACK域，并且设置ACK位，表明自己接收到了客户端的一个封包
→客户端发送下一个封包
→客户端把自己的序列号加1
→客户端让自己的ACK加1
→客户端设置自己的ACK位
→客户端发送N个Bytes，将自己的SEQ序列号也增加N
→服务端接收到N个Bytes
→服务端发送一个ACK包，将ACK的值设置为接收到的数据包的最后一个序列号
→客户端关闭，发出一个FIN包
→服务端确认这个FIN包，并且发送自己的FIN包
→客户端使用ACK包确认接收到了FIN包
28、TLS握手
→客户端发送hello信息到服务端，消息中包含了TLS版本，可用的加密和压缩算法
→服务端想客户端发送一个hello信息，消息中包含了TLS版本，可用的加密和压缩算法、服务器的公开证书(包含公匙，客户端使用公匙加密接下来的握手过程)
→客户端根据自己的信任CA列表，验证服务端的证书是否有效
→如果服务端的证书有效，客户端生成一串伪随机数(会被用于生成新的对称密匙)，使用服务器的公匙加密它
→服务端使用私匙解密来自客户端的随机数
→服务端使用上面的随机数生成自己的对称主密匙
→客户端发送一个Finished信息给服务端
→客户端使用对称密匙加密这次通讯的一个散列值
→服务端生成自己的hash值，然后解密客户端发来的信息，检测这2个值是否对应，如果对应，向客户端发送一个Finished信息，也使用协商好的对称密匙加密
→接下来整个TLS绘画都使用这个对称密匙进行加密
key是带引号的。
值可以是数字，字符串(放在引号中)，逻辑值，数组(方括号中)，对象(花括号中),null。没有js的undefined, nan值。
var obj = eval('('+jsonStr+')');
console.log(obj.name);
var obj = JSON.parse(jsonStr);
console.log(obj.name);
var obj = JSON.parse(jsonStr, function(key,value){
if(key === 'name'){
return "myname is " + value;
}
return value;
});
var jsonStr = JSON.stringfy(obj);
console.log(jsonStr);
- 当函数在全局被调用，this指window
function fn() {
console.log( this.a );
}
var a = 2;
fn(); // 2 -- fn单独调用，this引用window
- 隐式绑定:某个对象调用函数，函数中的this指向该对象
function fn() {
console.log( this.a );
}
var obj = {
a: 2,
fn: fn
};
obj.fn(); // 2 -- this引用obj。
- 隐式绑定:某个对象调用函数，函数中的this指向该对象，但，如果对象函数赋值给一个全局变量，再调用全局变量函数，此时的函数中this指向window
function fn() {
console.log( this.a );
}
var obj = {
a: 2,
fn: fn
};
var bar = obj.fn; // 函数引用传递
var a = "全局"; // 定义全局变量
bar(); // "全局"
- this指向call的第一个实参
unction fn() {
console.log( this.a );
}
var obj = {
a: 2
};
fn.call( obj ); // 2
console.log( this.a );
}
var obj = {
a: 2
};
var a = 10;
fn.call( null); // 10
- this指向通过new关键字创建的对象实例
function fn(a) {
this.a = a;
}
var bar = new fn( 2 );
console.log( bar.a );// 2
