前端面试复习要点

最新推荐文章于 2021-12-27 00:16:00 发布
最新推荐文章于 2021-12-27 00:16:00 发布
阅读量212 收藏
点赞数
文章标签： 前端 面试 网络 ViewUI
原文链接：https://juejin.im/post/5ca32dff6fb9a05e37093340
版权

一、HTML和CSS

页面布局的方法

1、浮动布局（布局简单，兼容性好，但是浮动元素脱离文档流）

2、绝对定位布局（布局快速，元素脱离文档流）

3、弹性盒子布局（自应性好，兼容性差）

4、多列布局（宽度自适应）

5、table布局（兼容性好）

HTML5新特性

1、拥有更多的语义化的标签

比如：header footer nav section article aside dialog

2、更好的表单

input输入框有更多的输入类型：
  • color（选取颜色）
  • data（日期选择器）
  • email（e-mail 地址的输入域）
  • month（选择月份）
  • number（数值输入域）
  • range（一定范围内数字值的输入域）
  • search（用于搜索）
  • tel（定位电话号码字段）
  • time（时间）
  • url（URL输入域）
HTML5新增的表单属性
  • placehoder 输入框默认提示，在用户输入后消失。
  • required 是一个布尔值，要求输入域不能为空。
  • pattern 描述一个正则表达式用于验证input元素的值
  • min和max 设置元素最大最小值
  • step 为type为number的输入域规定合法的数字间隔
  • multiple 是一个 boolean 属性。规定上传元素中可选择多个值
  • autofocus 是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。

3、视频和音频

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
复制代码
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
复制代码

4、Canvas绘图

canvas标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形

5、地理定位

HTML5 Geolocation API 用于获得用户的地理位置，鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的

window.navigator.geolocation {
    getCurrentPosition:  fn  用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn  清除定位监视
}&emsp;
复制代码
navigator.geolocation.getCurrentPosition(
    function(pos){
    	console.log('用户定位数据获取成功')
    	console.log('定位时间：',pos.timestamp)
    	console.log('经度：',pos.coords.longitude)
    	console.log('纬度：',pos.coords.latitude)
    	console.log('海拔：',pos.coords.altitude)
    	console.log('速度：',pos.coords.speed)
    
    },    //定位成功的回调
    function(err){ 
    	console.log('用户定位数据获取失败')
    }        //定位失败的回调
)
复制代码

6、拖放API

拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放

7、web Storage

使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为：

localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

  • 保存数据：localStorage.setItem(key,value);

  • 读取数据：localStorage.getItem(key);

  • 删除单个数据：localStorage.removeItem(key);

  • 删除所有数据：localStorage.clear();

  • 得到某个索引的key：localStorage.key(index);

8、webSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送

9、Web Worker

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。 web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行

  • dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发，。

  • darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。

  • dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。

  • dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。

  • dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。

  • drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

  • dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

css盒模型

css盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

css盒模型分为两种两种标准：一种是标准模型，一种是IE模型

从上图中发现，标准盒模型的宽高就是内容（content）的宽高，而IE盒模型的宽高则是由内容（content）+内边距（padding）+边框（border）的宽高的总和。

二、DOM事件类

事件流

事件流描述的是从页面中接受事件的顺序，事件流分为冒泡流和捕获流

###事件冒泡

IE事件流叫做事件冒泡，就是事件开始是由最具体的元素（目标元素）接收，然后逐级向上传播到较为不具体的节点（文档），如图所示

事件捕获

事件捕获是从Document接收到事件，然后逐级向下传播到目标元素，如图所示

事件对象event

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

下图是事件对象常用的属性方法

事件委托

事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。

优点：减少事件注册，节省内存、简化了dom节点更新时，相应事件的更新。 缺点：事件委托基于冒泡，对于不冒泡的事件不支持

三、HTTP协议类

http与https

http:超文本传输协议，用于从WWW服务器传输超文本到本地浏览器的传输协议。 https:是以安全为目标的HTTP通道，即HTTP下加入SSL层，HTTPS的安全基础是SSL。

区别

  • http传输的数据是明文的，https传输的数据是经过SSL加密的
  • https协议需要ca证书，费用较高。
  • 使用的链接方式，端口也不同，一般http的端口是80，https的端口是443

https的工作原理

客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤：

  • 1、客户使用https url访问服务器，则要求web服务器建立ssl链接
  • 2、web服务器接收到客户端的请求之后，会将网站的证书（证书数中包含了公钥），传给客户端。
  • 3、客户端和web服务器开始协商ssl链接的安全等级
  • 4、客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。
  • 5、web服务器通过自己的私钥解密出会话密钥
  • 6、web服务器通过会话密钥加密与客户端之间的通信。

http报文的组成部分

http报文由请求报文和响应报文组成

http请求方式

  • 1、GET (获取资源)
  • 2、POST (传输资源)
  • 3、PUT (更新资源)
  • 4、DELETE (删除资源)
  • 5、HEAD (获得报文首部)

GET与POST的区别

  • GET在浏览器回退是无害的，而POST会再次提交请求
  • GET请求会被浏览器主动缓存，而POST不会，除非手动设置
  • GET请求在URL中传送的参数是有长度限制的，而POST没有限制
  • GET参数通过URL传递的，POST放在Request body中
  • GET请求参数会被完整的保留在浏览器历史记录中，而POST中的参数不会被保留
  • GET请求只能进行url编码，而POST支持多种编码方式
  • GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息
  • 对参数的数据类型，GET只接受ASCII字符，而POST没有限制

http状态码

  • 1xx: 指示信息-表示请求已接收，继续处理
  • 2xx：成功-表示请求已被成功接收
  • 3xx：重定向-要完成请求必须进行更进一步的操作
  • 4xx：客户端错误-请求有语法错误或请求无法实现
  • 5xx：服务端错误-服务器未能实现合法的请求

http常见的状态码

  • 200 OK:客户端请求成功
  • 206 Partial Content: 客户发送一个带有Range（范围）头的GET请求，服务器完成了它
  • 301 Moved Permanently：所有页面已经转移到新的url
  • 302 Found：所请求的页面已经临时转移至新的url
  • 304 Not Modified：客户端有缓存的文档并发出一个条件性的请求，服务器告诉客户，原来缓冲的文档还可以继续使用
  • 403 Forbidden：对请求页面的访问被禁止
  • 404 Not Found：请求资源不存在
  • 500 Internal Server Error：服务器发生不可预期的错误原来缓冲的文档还可以继续使用
  • 503 Server Unavailable：请求未完成，服务器宕机

四、javascript篇

原型链

1、创建对象的方法

    //第一种方式：字面量
    var o1 = {name: 'o1'};
    var o2 = new Object({name: 'o2'});
    
    //第二种方式：通过构造函数
    var M = function (name) {
        this.name = name;
    };
    var o3 = new M('o3');
    
    //第三种方式：Object.create
    var p = {name: 'p'};
    var o4 = Object.create(p);
    
复制代码

2、原型对象

每个函数被创建的时候都会有一个prototye属性，这个属性会指向函数的原型对象。默认情况下每个原型对象又都会获取一个constructor属性，这个属性包含一个指向prototype属性所在函数的指针(指向构造函数)

    //创建构造函数
    function Person (name) {
        this.name = name;
    }
    //在Person函数的原型对象上增加一个方法
    Person.prototype.sayName = function (){
        console.log(this.name)
    }
    //Person的原型对象中的constructor属性指向Person函数
    Person.prototype.constructor===Person  //true
    //创建child实例
    var child = new Person ('xiaoming');
    child.sayName()   //xiaoming
    
复制代码

3、原型链

function Foo1(){
   this.name1 = '1';
}
function Foo2(){
   this.name2 = '2';
}
Foo2.prototype = new Foo1();
function Foo3(){
   this.name3 = '3';
}
Foo3.prototype = new Foo2();
var foo3 = new Foo3();
console.dir(foo3)

console.dir(foo3.name1);  //1
3个函数通过__proto__链接起来形成原型链，继承就是通过这个原理来的
复制代码

4、instance of VS constructor

  • instanceof 原理：检查左边对象与右边对象是否在同一条原型链上。

  • constructor原理：取对象的proto属性指向的prototype对象上的constructor字段。

5、new运算符的原理

  • 创建一个空对象，它的__proto__等于构造函数的原型对象（可以用Object.create()完成）
  • 构造函数以第1步创建的对象做为上下文，是否会返回一个对象
  • 若第2步返回了对象，则使用该对象作为新实例，否则用第1步创建的对象作为新实例
var myNew = function (func) {
    var o = Object.create(func.prototype)
    var i = func.call(o)
    return typeof i === 'object' ? i : o
}
复制代码

6、继承

js要实现继承，我们需要一个父类，代码如下：

// 定义一个动物类
function Animal (name) {
    // 属性
    this.name = name || 'Animal';
    // 实例方法
    this.sleep = function(){
        console.log(this.name + '正在睡觉！');
    }
}
// 原型方法
Animal.prototype.eat = function(food) {
    console.log(this.name + '正在吃：' + food);
};
复制代码
1、原型链继承

核心：将父类的实例作为子类的原型

function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

//&emsp;Test Code
var cat = new Cat();
console.log(cat.name);  //cat
console.log(cat.eat('fish')); //cat正在吃：fish
console.log(cat.sleep());   //cat正在睡觉！
console.log(cat instanceof Animal);  //true 
console.log(cat instanceof Cat);    //true
复制代码

特点：

  • 父类原型上的属性方法，子类都能访问到
  • 实现简单

缺点：

  • 1、来自原型对象的所有属性被所有实例共享
  • 2、创建子类实例时，无法向父类构造函数传参
2、构造函数继承

核心：就是子类构造函数内部调用父类构造函数（使用call或者apply方法）

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);  //Tom
console.log(cat.sleep());  //Tom正在睡觉
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
复制代码

特点：

  • 1、创建子类实例时，可以向父类传递参数
  • 2、可以实现多继承（call多个父类对象）

缺点：

  • 1、只能继承父类的属性方法，不能继承原型对象的属性方法
  • 2、每个子类都有父类函数的属性方法，影响性能
3、组合继承

核心：通过原型链实现对原型属性和方法的继承，通过构造函数来实现对实例属性的继承。

function Cat(name){
  Animal.call(this); //第一次调用父类
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();  //第二次调用父类
//改变构造函数的指向
Cat.prototype.constructor = Cat;

// Test Code
var cat = new Cat();
console.log(cat.name); //Tom
console.log(cat.sleep());//Tom正在睡觉！
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true
复制代码

特点：

  • 1、避免了原型链和构造函数的缺陷，融合了两者的优点

缺点：

  • 1、调用了两次父类构造函数
4、寄生组合式继承

核心：通过寄生方式，砍掉父类的实例属性

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 创建一个没有实例方法的类
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //将实例作为子类的原型
  Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);  //Tom
console.log(cat.sleep()); //Tom正在睡觉！
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
复制代码

特点：

  • 解决组合继承调用两次父类的缺陷

7、封装

blog.csdn.net/CCwm0129/ar…

闭包

闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放

this的指向

JS中的this不是指向定义他的位置，而是在哪调用它它就指向哪里，箭头函数中的 this 是依赖于所在函数的上下文的，类似于继承的关系。

五、通信类

什么是同源策略？

同源策略限制从一个源加载的文档或脚步如何与来自另一个源的资源进行交互（协议、域名、端口这3个构成一个源）。这是一个用于隔离潜在恶意文件的关键的安全机制

限制的内容

  • Cookie、LocalStorage和IndexDB无法读取
  • DOM无法获取
  • AJAX请求不能发送

跨域通信的几种方式

  • JSONP
  • Hash
  • postMessage
  • WebSocket
  • CORS

1、JSONP

原理：利用script标签的异步加载来实现的，script标签src属性中的链接可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

举个例子：

function test(data){
    //打印后端传过来的数据
    console.log(data) //data为{a:1,b:2}
}
var url="http://www.x.com/test?callback=test"//向x.com/test告诉他要调用的函数名是“test”
//后台拦截到callback，知道要生成一个调用方法，方法名是test，并传递参数，后台处理生成如下（数据虚构）
test({a:1,b:2})
//然后前端通过script标签去访问并执行，上面的东西
var script = document.createElement('script');
    script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script); 
//然后就会调用页面的test方法，这就是jsonp的实现原理。
复制代码

把js封装成一个通用组件

function myjsonp(URL,callback,callbackname){
	//给系统中创建一个全局变量，叫做callbackname，指向callback函数
	//定义
	window[callbackname] = callback;
	//创建一个script节点
	var oscript = document.createElement("script");
	//和image不一样，设置src并不会发出HTTP请求 
	oscript.src = URL;
	oscript.type = "text/javascript";
	//script标签的请求是在上树的时候发出，请求的是一个函数的执行语句
	document.head.appendChild(oscript);
	//为了不污染页面，瞬间把script拿掉
	document.head.removeChild(oscript);
}


//使用
myjsonp("http://sclub.jd.com/productpage/p-1217508-s-0-t-3-p-1.html?callback=abcdefg",function(data){
	console.log(data);
},"abcdefg");

复制代码

2、hash

原理：原理是利用location.hash来进行传值。

//利用hash,场景是当前页面A通过iframe或frame嵌入了跨域的页面B
//在A中的伪代码如下：
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'data';

//在B中的伪代码如下：
//onhashchange事件是用来监听当前页面的hash有没有改变
window.onhashchange = function () {
    var data = window.location.hash;
}
复制代码

3、postMessage

举例来说，父窗口http://a.com向子窗口http://b.com发消息，调用postMessage方法就可以了

a页面

<iframe id="frame1" src="http://127.0.0.1/JSONP/b.html" frameborder="1"></iframe>
document.getElementById('frame1').onload = function(){
    //contentWindow返回的是iframe的window对象，所以后面可以接着调用document方法
    var win = document.getElementById('frame1').contentWindow;
    win.postMessage("我是来自a页面的","http://127.0.0.1/JSONP/b.html")
}
复制代码

b页面

window.onmessage = function(e){
    e = e || event;
    console.log(e.data);//我是来自a页面的数据
    console.log(e.source);//发送消息的窗口对象
    console.log(e.origin);//发送消息窗口的源
}
复制代码

4、WebSocket

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现

5、CORS

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

参考资料：www.ruanyifeng.com/blog/2016/0…

六、安全类

CSRF

1、基本概念

CSRF,即(Cross-site request forgery), 中文名为跨站请求伪造。是一种挟持用户在当前已登录的Web应用程序上执行非本意的操作的一种攻击方式。

2、攻击原理

举个例子：当用户通过身份认证登录了网站A，这时候网站A的cookie会保存在浏览器中，然后用户又访问了网站B，这时候网站B会有一个引诱点击，这个引诱点击往往是个链接，这个链接指向的就是网站A的API接口，因为浏览器会自动上传cookie，当网站A对身份重新确认发现是合法用户，所以就执行这个接口的动作。

综上所诉：要完成一个CSFR攻击，受害者必须依次完成两个步骤

  • 1、登录受信任的网站A，并在本地生成Cookie
  • 2、在不登出A的情况下，访问了危险网站B

3、防御措施

Token验证：CSRF原理中访问漏洞接口的时候浏览器只上传了cookie，没有手动的上传一个token。这个token是用户登录注册甚至只是访问网站A，服务器会自动向用户本地存储一个token，在用户访问各个接口的时候，如果没带这个token，服务器就不会通过验证。所以当用户点击引诱链接，这个链接只会自动携带cookie，但是不会自动携带token

Referer验证 （Referer指的是页面来源）：服务器通过判断页面来源是不是自己站点的页面来源，如果是就执行接口动作，如果不是一律拦截。

XSS

1、基本概念

XSS就是跨域脚本攻击

2、攻击原理

反射型：发出请求时，XSS代码出现在URL中，作为输入提交到服务器端，服务器端解析后响应，XSS代码随响应代码一起传给浏览器，最后浏览器解析执行XSS代码。整个过程像一次反射，故叫反射型XSS

储存型：也叫持久型XSS，主要是将XSS代码发送到服务器（不管是数据库、内存还是文件系统等。），然后在下次请求页面的时候就不用带上XSS代码了

3、防范措施

  • 对重要的cookie设置httpOnly, 防止客户端通过document.cookie读取cookie。服务端可以设置此字段
  • 是服务端要进行过滤

七、算法篇

  • 排序（快速排序、冒泡排序、选择排序）
  • 递归

排序

###1、快速排序

原理：

  • 在数据集之中，选择一个元素作为“基准”。
  • 所有小于“基准”的元素，都移到“基准”的左边，所有大于“基准”的元素，都移到“基准”的右边。
  • 对“基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。
    var quickSort = function(arr) {
    
        //如果数组长度小于等于1无需判断直接返回即可
        if (arr.length <= 1){ return arr; }
        
        var pivotIndex = Math.floor(arr.length / 2);
        
        //取基准点的值,splice(index,1)函数可以返回数组中被删除的那个数
        var pivot = arr.splice(pivotIndex, 1)[0];
        console.log(pivot)
        var left = [];
        var right = [];
        
        for(var i = 0; i < arr.length; i++){
            if (arr[i] < pivot){
                left.push(arr[i]);
            } else {
                right.push(arr[i]);
            }
        }
        
        //递归执行以上操作,对左右两个数组进行操作，直到数组长度为<=1； 
        return quickSort(left).concat([pivot], quickSort(right));
    }
复制代码

2、冒泡排序

原理：

  • 1.比较相邻的两个元素，如果前一个比后一个大，则交换位置。

  • 2.第一轮的时候最后一个元素应该是最大的一个。

  • 3.按照步骤一的方法进行相邻两个元素的比较，这个时候由于最后一个元素已经是最大的了，所以最后一个元素不用比较

function bSort(arr) {
  var len = arr.length;
  for (var i = 0; i < len-1; i++) {
    for (var j = 0; j < len - 1 - i; j++) {
         // 相邻元素两两对比，元素交换，大的元素交换到后面
        if (arr[j] > arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = temp;
        }
    }
  }
  return arr;
}

//举个数组
myArr = [20,18,27,19,35];
//使用函数
bSort(myArr)//[18,19,20,27,35]
复制代码

3、选择排序

原理：

  • 把每一个数都与第一个数比较，如果小于第一个数，就把它们交换位置；这样一轮下来，最小的数就排到了最前面；重复n-1轮，就实现了选择排序
    function selectSort (arr) {
        var len = arr.length;
        var temp;
        for(var i=0; i<len-1; i++){
            for(var j=i+1; j<len; j++){
                if(arr[i]>arr[j]){
                    //互换位置
                    temp = arr[j];
                    arr[j] = arr[i];
                    arr[i] = temp;
                }
            }
        }
        return arr;
    }
    
    var oldArr = [3,9,4,5,2,8];
    selectSort(oldArr); //[2, 3, 4, 5, 8, 9]
复制代码

递归

www.cnblogs.com/huangshikun…

八、渲染机制

blog.csdn.net/buzhibujuel…

九、js运行机制

js的单线程机制

概念：简单地说就是同一时间只能做一件事，当有多个任务时，只能按照一个顺序一个完成了再执行下一个

任务队列

任务队列可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

  • 1、所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）
  • 2、主线程之外，还存在一个"任务队列"，只要异步任务有了运行结果，就在"任务队列"之中放置一个事件
  • 3、一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行
  • 4、主线程不断重复上面的第三步

举个例子：

console.log(1)  //这个是同步任务，放入主线程里
    
setTimeout(function(){ //这个是异步任务，放入任务队列中，等同步任务执行完毕，才能执行
    console.log(2)
},0)

console.log(3) //这个是同步任务，在主线程里

//运行结果是132
复制代码

Event Loop

主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop(事件循环)

异步任务的执行顺序准确的划分方式是：

  • 宏任务（macro-task）：包括整体代码script，setTimeout，setInterval
  • 微任务（micro-task）：Promise，process.nextTick

举个例子：

 setTimeout(function(){
     console.log('定时器开始啦')
 });
 
 new Promise(function(resolve){
     console.log('马上执行for循环啦');
     for(var i = 0; i < 10000; i++){
         i == 99 && resolve();
     }
 }).then(function(){
     console.log('执行then函数啦')
 });
 
 console.log('代码执行结束');
 
 //执行结果是：马上执行for循环啦 > 代码执行结束 > 执行then函数啦 > 定时器开始啦
 
 //执行原理是：
首先执行script下的宏任务,遇到setTimeout,将其放到宏任务的【队列】里

遇到 new Promise直接执行,打印"马上执行for循环啦"（Promise函数体里面是同步任务）

遇到then方法,是微任务,将其放到微任务的【队列里】

打印 "代码执行结束"

本轮宏任务执行完毕,查看本轮的微任务,发现有一个then方法里的函数, 打印"执行then函数啦"

到此,本轮的event loop 全部完成。


下一轮的循环里,先执行一个宏任务,发现宏任务的【队列】里有一个 setTimeout里的函数,执行打印"定时器开始啦"
复制代码

十、页面性能

提升页面性能的方法有哪些？

  • 资源压缩合并，减少HTTP请求
  • 非核心代码异步加载
  • 利用浏览器缓存
  • 使用CDN
  • 预解析DNS

非核心代码异步加载

1、异步加载的方式

  • 动态脚本加载
  • script标签使用defer属性
  • script标签使用async属性

2、异步加载的区别

  • defer是在HTML解析之后才会执行，如果多个，按照加载的顺序依次执行
  • async是在加载之后立即执行，如果多个，执行顺序和加载顺序无关

浏览器缓存

浏览器缓存：“分为强制缓存和协商缓存”，当客户端向浏览器发送请求的时候，如果没有缓存则直接请求服务器。如果有则根据缓存状态来是否从缓存中获取对应的文件

作用：

  • 减少冗余的数据传输
  • 减少服务器负担
  • 加快客户端加载网页的速度
1、强制缓存

利用Expires和Cache-Control两个字段来控制

expires:是缓存过期时间（即资源过期时间），是个绝对值。所以如果客户端更改时间，会导致缓存混乱。所以http:1.1增加了cache-control：max-age 字段,它是一个相对的时间

Cache-Control与Expires可以在服务端配置同时启用，同时启用的时候Cache-Control优先级高。

Control:max-age=3600，代表着资源的有效期是3600秒

2、协商缓存

协商缓存涉及到两组header 字段。

Etag和If-None-Match

Last-Modified和If-Modified-Since
复制代码

Etag和If-None-Match

他们返回的是一个校验码，是个hash值。Etag能够保证资源都是唯一的，是客户端请求服务器的时候服务器返回的。如果资源变化了Etag也会发生变化。当再次请求服务器的时候服务器根据浏览器上送的If-None-Match（之前服务器返回的etag值）值来判断是否命中缓存。

Last-Modified和If-Modified-Since

  • 浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间，例如Last-Modify: Thu,31 Dec 2037 23:59:59 GMT。

  • 当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存。

  • 如果命中缓存，则返回304，并且不会返回资源内容，并且不会返回Last-Modify。

  • Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。

weixin_33778778
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端面试总结
qq_44424294的博客
08-07 1158
前端面试总结（自己面试中遇到的问题） 首先我要说明的是我是个前端小白，跟众多刚出校园找工作的同学一样，没有经验，我的很多同学也都去了培训班，有的选择考研，有的在考虑转行。我选择出来找工作，下面我跟大家分享一下我的经验。 一般公司面试的流程 1.公司有初试和复试。初试一般面试你的都是HR，他们主要看你的语言表达能力和工作经验等是否满足工作需求，专业方面也是一些比较浅的东西，比如有没有学习过js，有没...
前端面试复试一般问些什么问题，移动web开发学习笔记（rem适配布局，阿里P7大牛整理
jixuczy的博客
04-05 915
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】JavaScript。
今天看了几道web基础题，却掉进了这几道基础题里面了
qq_43632611的博客
10-06 231
1.知道语义化吗？说说你理解的语义化，如果是你，平时会怎么做来保证语义化？ 像html5的新的标签header,footer,section等就是语义化 一方面，语义化就是让计算机能够快读的读懂内容，高效的处理信息，可以对搜索引擎更友好 另一方面，便于与他人的协作，他人通过读代码就可以理解你网页标签的意义 去掉或者丢失样式的时候能够让页面呈现出清晰的结构 有利于SEO：和搜索引擎建立良好...
2020年前端面试：这50个经典前端面试题面试者必看！
younghahahaha的博客
04-26 6773
在收到一家公司前端面试邀请之后，有的人会轻松上阵，在面试官面前乱说，惹人反感。有的人在面试前会把这家公司的主营业务以及岗位面试题做了充分的准备，让面试官眼前一亮，直接录取。所以说在面试之前多看一些面试题是有好处的，下面是云课堂整理的关于前端的面试题，希望可以帮助到即将找工作的你。 以下是关于前端面试题的汇总： 1、prototype和__proto__的关系是什么？ 2、meta viewport...
前端，通过面试去学习，综合（面试总结整理）
IronKee的博客
12-27 4260
前端，通过面试去学习，综合（面试总结整理）
leetcode新手刷题指南-Front-End-Interview:前端面试复习资料
06-30
这篇指南将围绕“LeetCode 新手刷题指南”和“前端面试复习资料”来阐述如何有效地利用 LeetCode 和其他相关知识点来提升前端面试的成功率。 一、LeetCode 刷题策略 1. **熟悉题型分类**：LeetCode 题目分为“Easy...
前端面试资料.zip
09-03
【前端面试资料.zip】是一个包含了全面的前端面试准备材料的压缩包。这个压缩包的核心是帮助应聘者在前端开发职位的面试中取得成功。通过深入学习和理解其中的内容，求职者可以提升自己的技术实力和面试技巧，从而在...
FontEndInterview:前端面试宝典-2020 届硕士- web前端 - 春招&秋招前端面试复习资料
05-17
2020届硕士的秋招前端面试实战经验 简介 本人介绍：985 本，中科院硕士，2020 届应届毕业生，秋招投递一二线互联网&部分 AI 独角兽公司，收到 30 余家公司面试邀约，面试 20 余家公司，拿到 8-9 个 offer，基本是 sp...
前端面试资料-来呀-前端面试资料
最新发布
06-18
这份名为"前端面试资料-来呀-前端面试资料"的压缩包，显然包含了为前端工程师准备的面试复习资源。为了帮助你更好地理解和掌握这些知识点，以下是一些核心的前端技术及其在面试中常见的考察点。 1. HTML与CSS基础：...
前端智库，前端面试必备手册
04-11
无论是初学者还是资深开发者，都能在这里找到适合自己的面试复习资料。 除了技术面试题，前端智库还关注工程化、计算机网络、操作系统等更广泛的技术领域。这些领域的知识对于前端开发者来说同样重要，它们能够提升...
前端面试复习
weixin_44203971的博客
03-14 170
前端 1.常见的状态码 101 切换协议 200 成功 301 永久重定位 302 临时重定位 304 未修改 状态码数字分类，1表示信息，2表示成功，3表示重定位，4表示客户端，5表示服务器 200和304 200表示成功，服务器已成功处理了请求，通常表示为服务器提供了请求网页 304表示未修改，自从上次请求，请求的网页未修改，服务器返回此响应时不会返回网页内容 2.osi七层模型 从上到下分别是： 应用层：文件传输，常用协议http(hype text transport protecol 超文本传输协
【前端面试】前端面试题300道~~熬夜吐血整理
热门推荐
前端之路
10-07 18万+
人生也有涯 而知也无涯 以有涯随无涯 殆已！ –庄子 部分内容转载自网络，侵立删！如有错误，请指正！ 1、手写jsonp的实现 参考自： http://www.qdfuns.com/notes/16738/1b6ad6125747d28592a53a960b44c6f4.html 先说说JSONP是怎么产生的： 其实网上关于JSON...
前端面试知识点大全——html篇
大灰狼的小绵羊哥哥的博客
10-27 1338
指定字符集 &lt;meta charset="utf-8"&gt; 向搜索引擎说明你的网页的关键词 &lt;meta name="keywords" content=""&gt; 告诉搜索引擎你的站点的主要内容 &lt;meta name="description" content=""&gt; 告诉搜索引擎你的站点的制作的作者
记一次幸运的拼多多Web前端面试（一面+二面+hr面）
杜小白的博客
11-26 9975
来赞赞人品，希望能通过，目前为止，三面都是电话面试。 2018年11月4日一面（26分34秒） 首先自我介绍，然后提问。 1、css中的水平居中的不同方式 2、css中的伪类：before与after 3、html中的meta标签是用***什么的？ 4、有做过H5，移动端的页面吗？ 5、media-query用过吗？ 6、用的ES6的语法吗？ 7、promise是什么意思？ 8、后台拿数据是...
前端面试题内容总结
webbirds的博客
10-15 201
什么是DOM 文档对象模型，DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。 什么是BOM BOM是浏览器对象模型，他提供了独立于内容与浏览器窗口进行交换的对象，核心对象是window,BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性 innerText和innerHTML的区别 获取内容是的区别： innerText会去除空格和换行，而innerHTML会保留空格和换行 设置内容时的区别： innerText不会识别HTML，而innerHtML
前端面试题复习篇（一）
weixin_41436338的博客
03-22 659
1.什么是IDE？请写出平时常用的几种IDE. IDE = 编辑器    sublime , webstorm ,vs code2.行内元素有哪些？块级元素有哪些？行内元素如何转化为块级元素？   行内元素：a,strong,span ,img,label,button,input,textarea   块级元素 : header,form ,ul ,ol,table,div, canvas ,v...
Web前端面试——HTTP部分
u012194956的博客
09-14 4万+
1.一次完整的HTTP事务流程 （1）域名解析 （2）发起TCP的三次握手 （3）建立TCP连接后发起http请求 （4）服务器响应http请求，浏览器得到HTML代码 （5）浏览器解析HTML代码，并请求HTML代码中的资源 （6）浏览器对页面进行渲染呈现给用户 （7）连接结束 2.用什么解析成IP？ 从网址到IP地址的转换，称为DNS解析，DNS解析是一个递归查询的过程，具体...
前端面试八股文-超详细的前端基础知识的应用与技巧
04-30
"《前端面试八股文-超详细的前端基础知识的应用与技巧》是一份专门为前端开发者设计的面试复习资料，内容涵盖了HTML、CSS、JavaScript基础及进阶，以及React和Vue等热门前端框架的面试问题。这份资源强调实战应用和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值