-
Opera
:以前是presto
内核,Opera
现已改用Google - Chrome
的Blink
内核 -
Chrome:Blink
(基于webkit
,Google与Opera Software
共同开发)
HTTP 的请求方式场景
-
Get
方法:获取数据通常(查看数据)-查看 -
POST
方法:向服务器提交数据通常(创建数据)-create -
PUT
方法:向服务器提交数据通常(更新数据)-update,与POST
方法很像,也是提交数据,但PUT
制定了资源在服务器上的位置,常用在修改数据 -
HEAD
方法:只请求页面的首部信息 -
DELETE
方法:删除服务器上的资源 -
OPTIONS
方法:用于获取当前URL
支持的请求方式 -
TRACE
方法:用于激活一个远程的应用层请求消息回路 -
CONNECT
方法:把请求链接转换到透明的TCP/IP
的通道
HTTP状态码
-
1XX
:信息状态码 -
100 continue
继续,一般在发送 post 请求时,已发送了 http header 之后服务端将返回此信息,表示确认,之后发送具体参数信息 -
2XX
:成功状态码 -
200 ok
正常返回信息 -
201 created
请求成功并且服务器创建了新资源 -
202 accepted
服务器已经接收请求,但尚未处理 -
3XX
:重定向 -
301 move per
请求的网页已经永久重定向 -
302 found
临时重定向 -
303 see other
临时冲重定向,且总是使用get请求新的url -
304 not modified
自从上次请求后,请求的网页未修改过 -
4XX
:客户端错误 -
400 bad request
服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求 -
401 unauthorized
请求未授权 -
403 forbidden
禁止访问 -
404 not found
找不到如何与url匹配的资源 -
5XX
:服务器错误 -
500 internal server error
最常见的服务器端的错误 -
503 service unacailable
服务器端暂时无法处理请求(可能是过载活维护)
从浏览器地址栏输入URL后发生了什么?
基础版本
-
1.的浏览器根据请求的
URL
交给DNS
域名解析,找到真实IP
,向服务器发起请求; -
2.服务器交给后台处理完成后返回数据,浏览器接收文件
( HTML、JS、CSS 、图象等)
; -
3.浏览器对加载到的资源
( HTML、JS、CSS 等)
进行语法解析,建立相应的内部数据结构(如 HTML 的 DOM )
; -
4.载入解析到的资源文件,渲染页面,完成。
详细版
-
1.从浏览器接收
url
到开启网络请求线程(这一部分可以展开浏览器的机制以及进程与线程之间的关系) -
2.开启网络线程到发出一个完整的
HTTP
请求(这一部分涉及到dns查询,TCP/IP
请求,五层因特网协议栈等知识) -
3.从服务器接收到请求到对应后台接收到请求(这一部分可能涉及到负载均衡,安全拦截以及后台内部的处理等等)
-
4.后台和前台的
HTTP
交互(这一部分包括HTTP
头部、响应码、报文结构、cookie
等知识,可以提下静态资源的cookie
优化,以及编码解码,如gzip
压缩等) -
5.单独拎出来的缓存问题,
HTTP
的缓存(这部分包括http缓存头部
,ETag , catchcontrol
等) -
6.浏览器接收到
HTTP
数据包后的解析流程(解析html
-词法分析然后解析成dom
树、解析css
生成css
规则树、合并成render
树,然后layout 、 painting
渲染、复合图层的合成、GPU
绘制、外链资源的处理、loaded 和 DOMContentLoaded
等) -
7.
CSS
的可视化格式模型(元素的渲染规则,如包含块,控制框,BFC
, IFC 等概念) -
8.
JS
引擎解析过程(JS
的解释阶段,预处理阶段,执行阶段生成执行上下文,VO
,作用域链、回收机制等等) -
9.其它(可以拓展不同的知识模块,如跨域,
web
安全,hybrid
模式等等内容)
详细升级版
-
1.在浏览器地址栏输入
URL
-
2.浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤
-
2.1 如果资源未缓存,发起新请求
-
2.2 如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证。
-
2.3 检验新鲜通常有两个
HTTP
头进行控制Expires
和Cache-Control
: -
2.3.1
HTTP1.0
提供Expires
,值为一个绝对时间表示缓存新鲜日期 -
2.3.2
HTTP1.1
增加了Cache-Control: max-age=
,值为以秒为单位的最大新鲜时间 -
3.浏览器解析
URL
获取协议,主机,端口,path
-
4.浏览器组装一个
HTTP(GET)
请求报文 -
5.浏览器获取主机
ip地址
,过程如下: -
5.1 浏览器缓存
-
5.2 本机缓存
-
5.3 hosts文件
-
5.4 路由器缓存
-
5.5 ISP DNS缓存
-
5.6 DNS递归查询(可能存在负载均衡导致每次IP不一致)
-
6.打开一个
socket
与目标IP地址
,端口建立TCP链接,三次握手
如下: -
6.1 客户端发送一个
TCP的SYN=1,Seq=X
的包到服务器端口 -
6.2 服务器发回
SYN=1,ACK=x+1,Seq=Y
的相应包 -
6.3 客户端发送
ACK=Y+1,Seq=z
-
7.
TCP
链接建立后发送HTTP
请求 -
8.服务器接收请求后解析,将请求转发到服务器程序,如虚拟主机使用
HTTP Host
头部判断请求的服务程序 -
9.服务器检测
HTTP
请求头是否包含缓存验证信息,如果验证缓存新鲜,返回304等对应状态 -
10.出合理程序读取完整请求并准备
HTTP
相应,可能需要查询数据库等操作 -
11.服务器将相应报文通过
TCP
链接发送回浏览器 -
12.浏览器接收
HTTP
相应,然后根据情况选择关闭TCP
链接或者保留重用,关闭TCP链接的四次握手如下: -
12.1 主动方发送
Fin=1,ACK=z,Seq=x
报文 -
12.2 被动方发送
ACK=X+1,Seq=Y
报文 -
12.3 被动方发送
Fin=1,ACK=X,Seq=Y
报文 -
12.4 主动方发送
ACK=Y,Seq=x
报文 -
13.浏览器检查相应状态码
-
14.如果资源可缓存,进行缓存
-
15.对相应进行解码
-
16.根据资源类型决定如何处理
-
17.解析
HTML
文档,构建DOM
树,下载资源,构建CSSOM
树,执行js脚本,这些操作每月严格的先后顺序 -
18.构建DOM树:
-
18.1 Tokenizing:根据HTML规范将字符流解析为标记
-
18.2 Lexing:词法分析将标记转换为对象并定义属性和规则
-
18.3 DOM construction:根据HTML标记关系将对象组成DOM树
-
19.解析过程中遇到图片、样式表、js文件,启动下载
-
20.构建
CSSOM
树: -
20.1
Tokenizing
:字符流转换为标记流 -
20.2
Node
:根据标记创建节点 -
20.3
CSSOM
:节点创建CSSOM树 -
- 根据
DOM树和CSSOM树
构建渲染树
- 根据
-
21.1 从
DOM树
的根节点遍历所有可见节点,不可见节点包括:1)script , meta
这样本身不可见的标签。2)被css隐藏的节点,如 display: none -
21.2 对每一个可见节点,找到恰当的
CSSOM
规则并应用 -
21.3 发布可视节点的内容和计算样式
-
22.js解析如下
-
22.1 浏览器创建
Document对象
并解析HTML
,将解析到的元素和文本节点添加到文档中,此时document.readystate为loading
-
22.2 HTML解析器遇到没有
async和defer的script时
,将他们添加到文档中,然后执行行内或外部脚本。这些脚本会同步执行,并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()
把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序,他们可以遍历和操作script和他们之前的文档内容 -
22.3 当解析器遇到设置了
async属性的script
时,开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行,但是解析器不会停下来等它下载。异步脚本禁止使用document.write()
,它们可以访问自己script和之前的文档元素 -
22.4 当文档完成解析,
document.readState变成interactive
-
22.5 所有
defer脚本
会按照在文档出现的顺序执行,延迟脚本能访问完整文档树,禁止使用document.write()
-
22.6 浏览器在
Document
对象上触发DOMContentLoaded事件
-
22.7 此时文档完全解析完成,浏览器可能还在等待如图片等内容加载,等这些内容完成载入并且所有异步脚本完成载入和执行,
document.readState变为complete,window触发load事件
-
23.显示页面(HTML解析过程中会逐步显示页面)
cookies , sessionStorage 和 localStorage 的区别
-
cookie
是网站为了标示用户身份而储存在用户本地终端上的数据(通常经过加密) -
cookie
数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递(优化点) -
sessionStorage
和localStorage
不会自动把数据发给服务器,仅在本地保存 -
存储大小:
-
cookie
数据大小不能超过4k -
sessionStorage 和 localStorage
虽然也有存储大小的限制,但比 cookie 大得多,可以达到5M或更大 -
有期时间:
localStorage
存储持久数据,浏览器关闭后数据不丢失除非主动删除数据
sessionStorage
数据在当前浏览器窗口关闭后自动删除
cookie 设置的 cookie
过期时间之前一直有效,即使窗口或浏览器关闭
浏览器缓存
浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时,获取缓存的流程如下
-
先根据这个资源的一些
http header
判断它是否命中强缓存,如果命中,则直接从本地获取缓存资源,不会发请求到服务器; -
当强缓存没有命中时,客户端会发送请求到服务器,服务器通过另一些
request header
验证这个资源是否命中协商缓存,称为http
再验证,如果命中,服务器将请求返回,但不返回资源,而是告诉客户端直接从缓存中获取,客户端收到返回后就会从缓存中获取资源; -
强缓存和协商缓存共同之处在于,如果命中缓存,服务器都不会返回资源; 区别是,强缓存不对发送请求到服务器,但协商缓存会。
-
当协商缓存也没命中时,服务器就会将资源发送回客户端。
-
当
ctrl+f5
强制刷新网页时,直接从服务器加载,跳过强缓存和协商缓存; -
当
f5
刷新网页时,跳过强缓存,但是会检查协商缓存;
强缓存-协商缓存:了解更多加入我们前端学习圈
说几条写JavaScript的基本规范
-
不要在同一行声明多个变量
-
请是用 =/! 来比较
true/false
或者数值 -
使用对象字面量替代
new Array
这种形式 -
不要使用全局函数
-
Switch
语句必须带有default
分支 -
If
语句必须使用大括号 -
for-in
循环中的变量 应该使用let
关键字明确限定作用域,从而避免作用域污染
绕不过去的闭包
-
闭包就是能够读取其他函数内部变量的函数
-
闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个
-
函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域
-
闭包的特性:
-
函数内再嵌套函数
-
内部函数可以引用外层的参数和变量
-
参数和变量不会被垃圾回收机制回收
-
优点:能够实现封装和缓存等
-
缺点:消耗内存、使用不当会内存溢出,
-
解决方法:在退出函数之前,将不使用的局部变量全部删除
说说你对作用域链的理解
-
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到
window
对象即被终止,作用域链向下访问变量是不被允许的。 -
简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期
JavaScript原型,原型链 ? 有什么特点?
-
每个对象都会在其内部初始化一个属性,就是
prototype
(原型),当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去prototype
里找这个属性,这个prototype
又会有自己的prototype
,于是就这样一直找下去,也就是我们平时所说的原型链的概念 -
关系:
instance.constructor.prototype = instance._*proto*_
-
特点:
JavaScript
对象是通过引用来传递的,我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时,与之相关的对象也会继承这一改变当我们需要一个属性的时,Javascript
引擎会先看当前对象中是否有这个属性, 如果没有的,就会查找他的Prototype
对象是否有这个属性,如此递推下去,一直检索到Object
内建对象
请解释什么是事件委托/事件代理
-
事件代理
( Event Delegation )
,又称之为事件委托。是JavaScript
中常用的绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM
元素的事件冒泡。使用事件代理的好处是可以提高性能 -
可以大量节省内存占用,减少事件注册,比如在
table
上代理所有td 的 click
事件就非常棒 -
可以实现当新增子对象时无需再次对其绑定
Javascript如何实现继承?
-
构造继承
-
原型继承
-
实例继承
-
拷贝继承
-
原型
prototype
机制或apply 和 call
方法去实现较简单,建议使用构造函数与原型混合方式
function Parent(){
this.name = ‘wang’;
}
function Child(){
this.age = 28;
}
Child.prototype = new Parent();//继承了Parent,通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性
复制代码
谈谈This对象的理解
-
this
总是指向函数的直接调用者(而非间接调用者) -
如果有
new
关键字,this
指向new
出来的那个对象 -
在事件中,
this
指向触发这个事件的对象,特殊的是,IE
中的attachEvent 中的this
总是指向全局对象Window
事件模型
W3C
中定义事件的发生经历三个阶段:捕获阶段(capturing
)、目标阶段 (targetin
)、冒泡阶段(bubbling
)
-
冒泡型事件:当你使用事件冒泡时,子级元素先触发,父级元素后触发
-
捕获型事件:当你使用事件捕获时,父级元素先触发,子级元素后触发
-
DOM
事件流:同时支持两种事件模型:捕获型事件和冒泡型事件 -
阻止冒泡:在
W3c
中,使用stopPropagation()
方法;在IE下设置cancelBubble =true
-
阻止捕获:阻止事件的默认行为,例如
click - a
后的跳转。在W3c
中,使用preventDefault()
方法,在 IE 下设置window.event.returnValue = false
new操作符具体干了什么呢?
-
创建一个空对象,并且
this
变量引用该对象,同时还继承了该函数的原型 -
属性和方法被加入到
this
引用的对象中 -
新创建的对象由
this
所引用,并且最后隐式的返回this
Ajax原理
-
Ajax
的原理简单来说是在用户和服务器之间加了—个中间层( AJAX 引擎),通过XmlHttpRequest
对象来向服务器发异步请求,从服务器获得数据,然后用javascript
来操作DOM
而更新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据 -
Ajax
的过程只涉及JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest
是ajax
的核心机制
如何解决跨域问题?
首先了解下浏览器的同源策略 同源策略
/SOP(Same origin policy)
是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS 、 CSFR
等攻击。所谓同源是指"协议+域名+端口"
三者相同,即便两个不同的域名指向同一个ip地址,也非同源
- 通过
jsonp
跨域
var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
// 传参并指定回调执行函数为onBack
script.src = ‘http://www…:8080/login?user=admin&callback=onBack’;
document.head.appendChild(script);
// 回调执行函数
function onBack(res) {
alert(JSON.stringify(res));
}
复制代码
document.domain + iframe
跨域
//父窗口:(http://www.domain.com/a.html)
//子窗口:(http://child.domain.com/b.html)
document.domain = ‘domain.com’;
// 获取父窗口中变量
alert('get js data from parent —> ’ + window.parent.user);
复制代码
-
nginx
代理跨域 -
nodejs
中间件代理跨域 -
后端在头部信息里面设置安全域名
说说你对AMD和Commonjs的理解
CommonJS
是服务器端模块的规范,Node.js
采用了这个规范。CommonJS
规范加载模
块是同步的,也就是说,只有加载完成,才能执行后面的操作。 AMD
规范则是非同步加载 模块,允许指定回调函数
AMD
推荐的风格通过返回一个对象做为模块对象,CommonJS
的风格通过对
module.exports 或 exports
的属性赋值来达到暴露模块对象的目的
js的7种基本数据类型
Undefined 、 Null 、Boolean 、Number 、String 、Bigint 、Symbol
了解更多加入我们前端学习圈
介绍js有哪些内置对象
-
Object
是JavaScript
中所有对象的父对象 -
数据封装类对象:
Object 、 Array 、 Boolean 、 Number 和 String
-
其他对象:
Function 、 Arguments 、 Math 、 Date 、 RegExp 、 Error
JS有哪些方法定义对象
-
对象字面量:
var obj = {}
; -
构造函数:
var obj = new Object()
; -
Object.create():
var obj = Object.create(Object.prototype);
你觉得jQuery源码有哪些写的好的地方
-
jquery
源码封装在一个匿名函数的自执行环境中,有助于防止变量的全局污染,然后通过传入window
对象参数,可以使window
对象作为局部变量使用,好处是当jquery
中访问window
对象的时候,就不用将作用域链退回到顶层作用域了,从而可以更快的访问window
对象。同样,传入undefined
参数,可以缩短查找undefined
时的作用域链 -
jquery
将一些原型属性和方法封装在了jquery.prototype
中,为了缩短名称,又赋值给了jquery.fn
,这是很形象的写法 -
有一些数组或对象的方法经常能使用到,
jQuery
将其保存为局部变量以提高访问速度 -
jquery
实现的链式调用可以节约代码,所返回的都是同一个对象,可以提高代码效率
null,undefined 的区别
-
undefined
表示不存在这个值。 -
undefined
:是一个表示"无"的原始值或者说表示"缺少值",就是此处应该有一个值,但是还没有定义。尝试读取时会返回undefined
-
例如变量被声明了,但没有赋值时,就等于
undefined
-
null
表示一个对象被定义了,值为“空值” -
null
: 是一个对象(空对象, 没有任何属性和方法) -
例如作为函数的参数,表示该函数的参数不是对象;
-
在验证
null
时,一定要使用 === ,因为 == 无法分别null 和 undefined
谈谈你对ES6的理解
-
新增模板字符串(为
JavaScript
提供了简单的字符串插值功能) -
箭头函数
-
for-of
(用来遍历数据—例如数组中的值。) -
arguments
对象可被不定参数和默认参数完美代替。 -
ES6
将promise
对象纳入规范,提供了原生的Promise
对象。 -
增加了
let 和 const
命令,用来声明变量。 -
还有就是引入
module
模块的概念
面向对象编程思想
-
基本思想是使用对象,类,继承,封装等基本概念来进行程序设计
-
易维护
-
易扩展
-
开发工作的重用性、继承性高,降低重复工作量。
-
缩短了开发周期
如何通过JS判断一个数组
instanceof
运算符是用来测试一个对象是否在其原型链原型构造函数的属性
var arr = [];
arr instanceof Array; // true
复制代码
isArray
Array.isArray([]) //true
Array.isArray(1) //false
复制代码
constructor
属性返回对创建此对象的数组函数的引用,就是返回对象相对应的构造函数
var arr = [];
arr.constructor == Array; //true
复制代码
Object.prototype
Object.prototype.toString.call([]) == ‘[object Array]’
// 写个方法
var isType = function (obj) {
return Object.prototype.toString.call(obj).slice(8,-1);
//return Object.prototype.toString.apply([obj]).slice(8,-1);
}
isType([]) //Array
复制代码
异步编程的实现方式
-
回调函数
-
优点:简单、容易理解
-
缺点:不利于维护,代码耦合高
-
事件监听(采用时间驱动模式,取决于某个事件是否发生)
-
优点:容易理解,可以绑定多个事件,每个事件可以指定多个回调函数
-
缺点:事件驱动型,流程不够清晰
-
发布/订阅(观察者模式)
-
类似于事件监听,但是可以通过‘消息中心‘,了解现在有多少发布者,多少订阅者
-
Promise
对象 -
优点:可以利用
then
方法,进行链式写法;可以书写错误时的回调函数; -
缺点:编写和理解,相对比较难
-
Generator
函数 -
优点:函数体内外的数据交换、错误处理机制
-
缺点:流程管理不方便
-
async
函数 -
优点:内置执行器、更好的语义、更广的适用性、返回的是
Promise
、结构清晰。 -
缺点:错误处理机制
对原生Javascript了解方向
数据类型、运算、对象、Function
、继承、闭包、作用域、原型链、事件、 RegExp
、JSON
、 Ajax
、 DOM
、 BOM
、内存泄漏、跨域、异步装载、模板引擎、前端MVC
、路由、模块化、 Canvas
、 ECMAScript
sort 快速打乱数组
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(()=> Math.random() - 0.5)
//利用sort return 大于等于0不交换位置,小于0交换位置
// [5, 8, 4, 3, 2, 9, 10, 6, 1, 7]
复制代码
数组去重操作
-
ES6 Set
-
for
循环indexOf
-
for
循环includes
-
sort
JS 原生拖拽节点
-
给需要拖拽的节点绑定
mousedown , mousemove , mouseup
事件 -
mousedown
事件触发后,开始拖拽 -
mousemove
时,需要通过event.clientX 和 clientY
获取拖拽位置,并实时更新位置 -
mouseup
时,拖拽结束 -
需要注意浏览器边界值,设置拖拽范围
深拷贝、浅拷贝
-
所有的基础数据类型的赋值操作都是深拷贝
-
通常利用上面这点,来对引用数据类型做递归深拷贝
-
浅拷贝:
Object.assign
或者 扩展运算符 -
深拷贝:
JSON.parse(JSON.stringify(object))
深层递归 -
局限性:会忽略 undefined,不能序列化函数,不能解决循环引用的对象
节流防抖
-
节流:每隔一段时间执行一次,通常用在高频率触发的地方,降低频率。–如:鼠标滑动 拖拽
-
防抖:一段时间内连续触发,不执行,直到超出限定时间执行最后一次。–如:
input
模糊搜索
变量提升
当执行
JS
代码时,会生成执行环境,只要代码不是写在函数中的,就是在全局执行环境中,函数中的代码会产生函数执行环境,只此两种执行环境
js b() // call b console.log(a) // undefined var a = 'Hello world' function b() { console.log('call b') }
变量提升 这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部,这其实没有什么错误,便于大家理解。但是更准确的解释应该是:在生成执行环境时,会有两个阶段。第一个阶段是创建的阶段,
JS
解释器会找出需要提升的变量和函数,并且给他们提前在内存中开辟好空间,函数的话会将整个函数存入内存中,变量只声明并且赋值为undefined
,所以在第二个阶段,也就是代码执行阶段,我们可以直接提前使用
b() // call b second
function b() {
console.log(‘call b fist’)
}
function b() {
console.log(‘call b second’)
}
var b = ‘Hello world’
复制代码
js单线程
-
单线程 - 只有一个线程,只能做一件事
-
原因 - 避免
DOM
渲染的冲突 -
浏览器需要渲染
DOM
-
JS
可以修改DOM
结构 -
JS
执行的时候,浏览器DOM
渲染会暂停 -
两段
JS
也不能同时执行(都修改DOM
就冲突了) -
webworker
支持多线程,但是不能访问DOM
-
解决方案 - 异步
说说event loop
首先,
js
是单线程的,主要的任务是处理用户的交互,而用户的交互无非就 是响应DOM
的增删改,使用事件队列的形式,一次事件循环只处理一个事件 响应,使得脚本执行相对连续,所以有了事件队列,用来储存待执行的事件, 那么事件队列的事件从哪里被push
进来的呢。那就是另外一个线程叫事件触 发线程做的事情了,他的作用主要是在定时触发器线程、异步HTTP
请求线程 满足特定条件下的回调函数push
到事件队列中,等待js
引擎空闲的时候去 执行,当然js
引擎执行过程中有优先级之分,首先js
引擎在一次事件循环中, 会先执行js线程的主任务,然后会去查找是否有微任务microtask(promise)
,如果有那就优先执行微任务,如果没有,在去查找 宏任务macrotask(setTimeout、setInterval)
进行执行
描述下this
this
,函数执行的上下文,可以通过apply , call , bind
改变this
的指向。对于匿名函数或者直接调用的函数来说,this指向全局上下文(浏览 器为window,NodeJS为 global
),剩下的函数调用,那就是谁调用它,this
就指向谁。当然还有es6
的箭头函数,箭头函数的指向取决于该箭头函 数声明的位置,在哪里声明,this
就指向哪里
ajax、axios、fetch区别
ajax:
-
本身是针对
MVC
的编程,不符合现在前端MVVM
的浪潮 -
基于原生的
XHR
开发,XHR
本身的架构不清晰,已经有了fetch
的替代方案 -
JQuery
整个项目太大,单纯使用ajax
却要引入整个JQuery
非常的不合理(采取个性化打包的方案又不能享受CDN
服务)
axios:
-
从浏览器中创建
XMLHttpRequest
-
从
node.js
发出http
请求 -
支持
Promise API
-
拦截请求和响应
-
转换请求和响应数据
-
取消请求
-
自动转换
JSON
数据 -
客户端支持防止
CSRF/XSRF
fetch:
-
只对网络请求报错,对 400 , 500 都当做成功的请求,需要封装去处理
-
这里对于
cookie
的处理比较特殊,不同浏览器对credentials
的默认值不一样,也就使得默认情况下cookie
变的不可控。详细前往MDN -
本身无自带
abort
,无法超时控制,可以使用AbortController
解决取消请求问题。
- 没有办法原生监测请求的进度,而
XHR
可以
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」,内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中,共计111道
HTML
-
HTML5有哪些新特性?
-
Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?
-
如何实现浏览器内多个标签页之间的通信?
-
⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元 素和块级元素有什么区别?
-
简述⼀下src与href的区别?
-
cookies,sessionStorage,localStorage 的区别?
-
HTML5 的离线储存的使用和原理?
-
怎样处理 移动端 1px 被 渲染成 2px 问题?
-
iframe 的优缺点?
-
Canvas 和 SVG 图形的区别是什么?
JavaScript
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
问:0.1 + 0.2 === 0.3 嘛?为什么?
-
JS 数据类型
-
写代码:实现函数能够深度克隆基本类型
-
事件流
-
事件是如何实现的?
-
new 一个函数发生了什么
-
什么是作用域?
-
JS 隐式转换,显示转换
-
了解 this 嘛,bind,call,apply 具体指什么
-
手写 bind、apply、call
-
setTimeout(fn, 0)多久才执行,Event Loop
-
手写题:Promise 原理
-
说一下原型链和原型链的继承吧
-
数组能够调用的函数有那些?
-
PWA使用过吗?serviceWorker的使用原理是啥?
-
ES6 之前使用 prototype 实现继承
-
箭头函数和普通函数有啥区别?箭头函数能当构造函数吗?
-
事件循环机制 (Event Loop)
Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中,共计111道**
HTML
-
HTML5有哪些新特性?
-
Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?
-
如何实现浏览器内多个标签页之间的通信?
-
⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元 素和块级元素有什么区别?
-
简述⼀下src与href的区别?
-
cookies,sessionStorage,localStorage 的区别?
-
HTML5 的离线储存的使用和原理?
-
怎样处理 移动端 1px 被 渲染成 2px 问题?
-
iframe 的优缺点?
-
Canvas 和 SVG 图形的区别是什么?
JavaScript
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
问:0.1 + 0.2 === 0.3 嘛?为什么?
-
JS 数据类型
-
写代码:实现函数能够深度克隆基本类型
-
事件流
-
事件是如何实现的?
-
new 一个函数发生了什么
-
什么是作用域?
-
JS 隐式转换,显示转换
-
了解 this 嘛,bind,call,apply 具体指什么
-
手写 bind、apply、call
-
setTimeout(fn, 0)多久才执行,Event Loop
-
手写题:Promise 原理
-
说一下原型链和原型链的继承吧
-
数组能够调用的函数有那些?
-
PWA使用过吗?serviceWorker的使用原理是啥?
-
ES6 之前使用 prototype 实现继承
-
箭头函数和普通函数有啥区别?箭头函数能当构造函数吗?
-
事件循环机制 (Event Loop)