前端一些基础的重要的知识

5.call 和 apply 都是为了改变函数体内部 this 的指向。
    二者的作用完全一样，只是接受参数的方式不太一样。

 var func1 = function(arg1, arg2) {};

//可以通过 func1.call(this, arg1, arg2);   
//或者 func1.apply(this, [arg1, arg2]); 来调用

 

var pet={
    words:'xxx',
    speak:function(say){
        console.log(say +' '+this.words)
    }
}
var dog={
    words:'wang'
}
pet.speak.call(dog,'miao')//miao wang
//调用pet.speak方法，并且speak里的this指向dog，与原来的上下文无关
//第二个参数(及后面的参数)是speak方法的传参

继承：

function Pet(words) {
　　this.words = words;
　　this.speak = function () {
　　　　console.log(this.words)
　　}
}
function Dog(words) {
　　Pet.call(this, words)
　　//调用Pet，并且Pet里面的this指向Dog,意思是Pet里this定义的方法和属性，Dog同样有
}
var dog = new Dog('wang')

 如果call/apply第一个参数是null，那么this就是指向window

bind和上面两个不同的是bind返回的是一个函数，必须调用()来执行：

var pet = {
　　words: 'xxx',
　　speak: function (say) {
	console.log(say + ' ' + this.words)
　　}
}
var dog = {
　　words: 'wang'
}
pet.speak.bind(dog)('miao') //miao wang 
//pet.speak.bind(dog,'miao')()//miao wang 等价于上面

 

7.渐进增强和优雅降级

　　渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
　　优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

9.一个标准的AJAX：

        var xhr = new XMLHttpRequest(); //IE6及之前的版本要使用ActiveXObject
        xhr.onreadystatechange = function () {//每当readyState改变都会触发readystatechange
            if (xhr.readyState == 4) {
                //readyState的状态为: 0 open() 1 send() 2 正在传输数据=3 接收全部数据=4
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                    //处理 xhr.responseText等
                } else {
                    //处理错误
                }
            }
        };
        xhr.open('get', 'example.txt', true);//第三个参数表示是否异步发送请求
        xhr.setRequestHeader('MyHeader','MyValue');
        xhr.send(null);

AJAX是什么？在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容的技术。

AJAX的过程：

　　1、创建XMLHttpRequest对象

　　2、创建HTTP请求（open方法）

　　3、设置响应HTTP请求状态变化的函数

　　4、发送HTTP请求

　　5、获取异步调用返回的数据，DOM局部更新

10.webSocket、ajax轮询、长轮询

　　WebSocket是Web应用程序的传输协议，它提供了双向的，按序到达的数据流。
　　他是一个HTML5协议，WebSocket的连接是持久的，他通过在客户端和服务器之间保持双工连接，服务器的更新可以被及时推送给客户端，而不需要客户端以一定时间间隔去轮询。
　　只需要经过一次HTTP请求,只需要一次握手，整个通讯过程是建立在一次连接/状态中，也就避免了HTTP的非状态性，服务端会一直知道你的信息，直到你关闭请求。
　　ws和wss: 与http和https类似。ws是不安全的，wss是安全的。

　　　ajax轮询：浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。

　　　长轮询long poll：浏览器发起请求后，一直等待服务器直到它返回信息，处理信息后再次发起长轮询。

11.HTTP和HTTPS

　　HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TLS），这个时候，就成了我们常说的HTTPS。
　　TLS:安全传输层协议

　　默认HTTP的端口号为80，HTTPS的端口号为443。

12.HTTP1.0和HTTP1.1的区别

（1）HTTP 1.0规定浏览器与服务器只保持短暂的连接，浏览器的每次请求都需要与服务器建立一个TCP连接。

　　 HTTP 1.1支持持久连接，在一个TCP连接上可以传送多个HTTP请求和响应。

（2）HTTP 1.1增加host字段

　　在HTTP1.0中认为每台服务器都绑定一个唯一的IP地址，因此，请求消息中的URL并没有传递主机名（hostname）。

　　但随着虚拟主机技术的发展，在一台物理服务器上可以存在多个虚拟主机，并且它们共享一个IP地址。

　　所以HTTP 1.1中增加Host请求头字段，WEB浏览器可以使用主机头名来明确表示要访问服务器上的哪个WEB站点。

（3）HTTP1.1增加了100状态码。

14.Http 2.0

　　1.改进传输性能,在应用层和传输层之间增加一个二进制分帧层，实现低延迟和高吞吐量

　　2.多路复用,允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息

　　3.头压缩

　　4.服务端推

20.Repain(重绘)和Reflow(回流)

　　注：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。

　　总结：如果变化影响了布局，则会触发回流。如果变化只是一些背景色之类的不影响布局，则只会发生重绘。

　　回流比重绘严重性要高得多。

　　避免方法：尽量少地修改DOM样式，特别是在JS里。CSS里尽量不要二次赋值样式。

16.em和px和rem

　　绝对值px，相对值em，默认1em=16px

　　如果父元素定义字体大小16px，那么子元素定义1em，大小就是16px

　　em计算公式： em值 x 父元素的font-size = px值

　　rem的计算公式：rem值 x HTML的font-size =px值

15.defer和async

没加关键字的话，先加载执行script，然后再渲染后续文档元素

async   加载执行script，同时渲染后续文档元素（一起跑），（无论是哪种方式，执行js时，DOM渲染都是会停止的）

defer  加载scrpit的同时渲染后续文档元素，但是只有全部元素解析完才开始执行script

 蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。

17.对前端模块化的认识

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
AMD 是提前执行，CMD 是延迟执行。
AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

　　require.js写法:

//index.js
require(['./content.js'], function(animal){
    console.log(animal);   //A cat
})
//content.js 
define('content.js', function(){ 
　　return 'A cat'; 
})

　　CommonJS写法：

//index.js
var animal = require('./content.js')

//content.js
module.exports = 'A cat'

　　ES6写法：

//index.js
import animal from './content'

//content.js
export default 'A cat'

19.display:none和visibility:hidden的区别

　　display:none  隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。产生reflow与repaint

　　visibility:hidden  隐藏对应的元素，但是在文档布局中仍保留原来的空间。只产生repaint

23.CSS样式优先级

CSS中class第二个声明总是比第一个具有优先权, 而且id具有更高的优先级，行内样式具有最高的优先权。在属性最后加上  !important ，这个属性就最高的优先权
!important >内联样式> id > class > tag

21.position:absolute和float属性的异同

   共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

   不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。

22.伪元素和伪类

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素

伪元素：

属性              描述                       CSS版本
::first-letter    向文本的第一个字母添加特殊样式。  1
::first-line      向文本的首行添加特殊样式。       1
::before          在元素之前添加内容。            2
::after           在元素之后添加内容。            2

伪类：

属性            描述                             CSS版本
:active        向被激活的元素添加样式。                1
:focus         向拥有键盘输入焦点的元素添加样式。       2
:hover         当鼠标悬浮在元素上方时，向元素添加样式。  1
:link          向未被访问的链接添加样式。              1
:visited       向已被访问的链接添加样式。              1
:first-child   向元素的第一个子元素添加样式。           2
:lang          向带有指定 lang 属性的元素添加样式。     2

38.如何删除一个cookie

1.将时间设为当前时间往前一点。

var date = new Date();

date.setDate(date.getDate() - 1);//真正的删除

setDate()方法用于设置一个月的某一天。

2.expires的设置

document.cookie = 'user='+ encodeURIComponent('name')  + ';expires = ' + new Date(0)

26.null和undefined的区别

null是一个表示"无"的对象，转为数值时为0；   typeof null //"object"

undefined是一个表示"无"的原始值，转为数值时为NaN ;typeof undefined //"undefined"

null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。 

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。

31.异步加载和延迟加载

1.异步加载的方案： 动态插入script标签

2.通过ajax去获取js代码，然后通过eval执行

3.script标签上添加defer或者async属性

4.创建并插入iframe，让它异步执行js

5.延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。

33.ajax的缺点

 1、ajax不支持浏览器back按钮。

 2、安全问题 AJAX暴露了与服务器交互的细节。

 3、对搜索引擎的支持比较弱。

 4、破坏了程序的异常机制。

 5、不容易调试。