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

时间 2019-11-15

标签前端一些基础重要知识繁體版

原文原文链接

5.call 和 apply 都是为了改变函数体内部 this 的指向。
两者的做用彻底同样，只是接受参数的方式不太同样。javascript

 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就是指向windowjava

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

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.渐进加强和优雅降级github

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

9.一个标准的AJAX：web

        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

AJAX的过程：浏览器

　　一、建立XMLHttpRequest对象安全

　　二、建立HTTP请求（open方法）服务器

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

　　四、发送HTTP请求

　　五、获取异步调用返回的数据，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的缺点

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

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

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

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

 五、不容易调试。