前端信息汇总
一、Sublime Text的插件javascript
若是想让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，快速书写代码。css
二、JSCityhtml
把源码可视化成建筑物的JS库。前端
三、Flex布局java
W3C提出的布局方案，能够实现各类响应式布局。如今已经获得全部浏览器的支持。node
四、Chrome的皮肤插件web
搜索"DevTools Theme"，下载，输入chrome://flags,找到"Enable Developer Tools experments"，勾选复选框，重启浏览器，打开开发者选项，点击小齿轮，Experments项，勾选"Allow custom UI themes"。算法
五、Chrome插件：Performance-Analyser网页性能分析插件sql
分析http请求，执行期的时间，占比。chrome
六、Chrome插件：FeHelper
json格式化、html格式化、二维码的生成，等等。
七、Chrome插件：POSTMAN
模拟发送请求，简化版的fiddler。
八、Chrome插件：Visual Event
捕获网页元素的各类事件，对于复杂的事件做用不大。
九、Chrome插件：WhatFont
查看网页字体。不鼠标停留在字体上就会显示该字体的名称。
十、Chrome插件：Speed Tracer
性能分析器，比Profiles还强大。能够跟踪事件、查看CSS样式、找到js中内存泄漏、检测js语法，等等。
十一、前端工程师要作的事
● 根据项目特色选择前端技术栈
● 把平面做品实现为HTML/CSS/JavaScript
● 用PS进行图片处理
● 熟悉JavaScirpt，以及框架、组件
● 熟悉前端开发流程：代码检查、精简、模块化CSS、LiveReload，调试
● 跨浏览器、跨设备的解决方法
● 更高效地操做DOM
● 将CSS写得更加清晰
● 代码更易于维护、单元测试
● 大型项目的模块化和组件化
● HTTP协议
● Web容器/HTTP服务器如何工做
● 无状态Web应用的工做原理
● 动态、静态内容如何分离部署(反向代理配置)
● 安全机制如何配置
● 监控机制如何配置
十二、Angular JS
可让你从jQuery各类选择器和回调函数中解脱出来，双向数据绑定和模型是惟一数据来源。不足的地方在于：严重依赖DOM，按DOM中的指令的优先顺序将模版编译，这样让调试和检测执行顺序变得困难；采用一种叫"脏检查"的机制来跟踪数据变化并同步用户界面，任何Angular做用域内的操做都会触发"脏检查"，致使随着绑定的增多应用性能会下降；Angular全部的操做都必须通过它的diget cycle遍历监听器，不然组件不能和数据模型同步，这致使了兼容性问题，若是须要使用第三方Js库，须要使用Angular的$apply函数包装它们，这至关于重构每个JS库只为可以和Angular合做。没有很好地解决依赖注入；陡峭的学习曲线。
1三、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应用；与其余库兼容良好......
1四、如何减小HTTP请求次数
● 合并文件:将多个样式文件和脚本文件合并成一个文件。
● CSS Sprites:将多个图片拼成一副图片，而后经过CSS控制。
● Base64编码：经过编码的字符串将图片内嵌到网页文本中。
1五、减小DOM元素数量
经过document.getElementByTagName('*').length
1六、Gzip压缩传输文件
Gzip一般能够减小70%网页内容的大小，包括脚本、样式表、图片等文件，主流服务器都有相应的压缩支持模块。
1七、避免图片空的src
图片空的src仍然会使浏览器发送请求到服务器。
1八、Cookie优化
Cookie被用来作认证或个性化设置，其信息包含在http报文中。能够在如下几个方面优化：
● 去除不必的cookie
● cookie的大小减到最小
● 设置合适的domain级别
● 设置合适的过时时间
1九、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
2一、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之间造成了链表。
2二、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();
2三、Grunt工具
自动完成一些反复重复的任务，好比压缩、编译、单元测试等。Grunt.js依赖于node.js的npm来管理和安装，首先安装node.js。好比：grunt-contrib-imagemin用来压缩图片，grunt-contrib-uglify用来压缩JavaScript文件，grunt-contrib-cssmin用来压缩CSS文件，grunt-contrib-htmlmin用来压缩html代码。
2四、Spartan浏览器
微软放弃IE，从新推出的Spartan浏览器。
2五、JavaScript的Console
一般用console.log()和console.error()方法，起始有关Console的API还很多，好比console.group(),console.time()，等等。
2六、在浏览器中输入地址而且按下回车键后发生了什么？
→输入地址，按下回车键
→和回车键有关的电流回路闭合
→电流进入键盘的逻辑电路系统
→逻辑电路系统获取到回车键的码值是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封包
对于大部分家庭和小型企业来讲，封包从本地计算机触发，通过本地网络，再经过调制解调器把数字信号转换成模拟信号，进行传输。到达目的地，经过调制解调器，把模拟信号转换成数字信号。
对于使用光纤的，信号一直是数字的，封包直接传送到目的地。
2七、发送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包
2八、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
- 1. ACM信息汇总
- 2. Web前端汇总
- 3. Shr-前端汇总
- 4. 【汇总】前端资源汇总
- 5. SVN错误信息汇总
- 6. postfix报错信息汇总
- 7. 工做信息汇总
- 8. DB2报错信息汇总
- 9. IDEA报错信息汇总
- 10. 2020前端面试汇总
- 更多相关文章...
- • Docker 资源汇总 - Docker教程
- • 浏览器信息 - 浏览器信息
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Docker容器实战(一) - 封神Server端技术
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. ACM信息汇总
- 2. Web前端汇总
- 3. Shr-前端汇总
- 4. 【汇总】前端资源汇总
- 5. SVN错误信息汇总
- 6. postfix报错信息汇总
- 7. 工做信息汇总
- 8. DB2报错信息汇总
- 9. IDEA报错信息汇总
- 10. 2020前端面试汇总