前端信息汇总

 

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绘画都使用这个对称密匙进行加密

 

29、JSON用法

 

｛“name”:"darren","sex":"male"｝
key是带引号的。
值可以是数字，字符串(放在引号中)，逻辑值，数组(方括号中)，对象(花括号中),null。没有js的undefined, nan值。

 

● 使用eval将json字符串转换成js对象

 

var jsonStr = '{"name":"darren","sex":"male"}';
var obj = eval('('+jsonStr+')');
console.log(obj.name);

 

● 使用JSON.parse将json字符串转换成js对象

 

var jsonStr = '{"name":"darren","sex":"male"}';
var obj = JSON.parse(jsonStr);
console.log(obj.name);

 

JSON.parse还有一个重载方法，第二个参数是一个函数。

 

var jsonStr = '{"name":"darren","sex":"male"}';
var obj = JSON.parse(jsonStr, function(key,value){
     if(key === 'name'){
          return "myname is " + value;
     }
     return value;
});

 

● 使用JSON.stringfy将js对象转换成json字符串

 

var obj = {name:'darren',sex:'male'};
var jsonStr = JSON.stringfy(obj);
console.log(jsonStr);

 

JSON.stringfy也有其它重载。

 

 

 

30、js中的this

 

this的引用取决于函数在哪里被调用。

• 当函数在全局被调用，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

 

如果第一个实参为null，this指向window

 

function fn() {
   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

 

 

 

31、静态网站浏览端输入一个url

 

→浏览器输入一个url

→web服务器接收到一个请求，使用http协议返回给浏览器

→浏览器解析http协议页面呈现

→页面中包含了一些额外资源，比如图片、css、js......这些资源会单独使用http协议把信息返回给当前页面

 

 

 

32、静态网页的缓存

 

对于不变的资源使用缓存技术，让浏览器第一次访问这些静态资源后缓存，第二次访问浏览器就不再需要重复请求了。

 

 

 

33、CDN

当用户请求网站时，根据一个路由算法将请求落地在离用户最近的节点上。

 

 

 

34、http请求，tcp请求

每个http请求其实都是一个tcp请求，这些请求在建立连接和释放连接时都会消耗很多资源。

 

 

35、如何让动态页不被缓存

使用meta标签

 

 

36、动态网页动静分离

让静态的部分当作不变的静态资源处理，让动态的内容作动态处理，在合适的地方将动静内容合并。

 

 

37、动静分离的位置

在服务端，把静态资源交给静态的web服务器来处理；在浏览器端，javascript模版。

 

 

38、Web应用上线之前要考虑的方面

● 能够在主流浏览器上浏览

● 能够在手机端正常浏览

● 版本控制

● 不要想用户直接显示不友好的错误信息

● 用户链接添加属性rel="nofollow"来避免垃圾邮件

● post提交成功后重定向，以防止再次提交引起刷新

● 别让用户思考如何操作

● 防止sql注入

● 别相信用户的输入和请求

● 使用sal散列密码，避免使用md5和sha加密

● 铭感数据使用SSL/HTTPS

● 放置会话(session)劫持

● 避免跨脚本攻击XSS

● 避免跨站请求伪造攻击(CSRF)

● 避免点击劫持

● 必要的地方使用缓存

● 不要使用20kb大小的图片作为重复背景

● 雅座内容gzip/deflate

● 合并样式表和脚本文件，以减少浏览器的发送请求次数

● 优化图片

● HTTP请求次数最小化

● 确保有一个favicon.ico文件在网站的根目录下

● 使用对搜索引擎友好的链接

● 拥有一个xml网站地图，默认路径是sitemap.xml