-
使用
font-size:0 -
letter-spacing -
word-spacing
行内元素float:left后是否变为块级元素？
行内元素设置成浮动之后变得更加像是 inline-block （行内块级元素，设置 成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100% ），这时候给行内元素设置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的
如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60*1000ms ＝ 16.7ms
CSS权重，计算规则
！important> 内联样式 > ID > 类属性、属性选择器或者伪类选择器 > 标签选择器
CSS REFACTORING中提到了算法的过程，取决于A、B、C、D的值，abcd是什么呢？
| 符号 | 计算方式 |
| — | — |
| A ( 内联样式) | 有内联样式时 A=1 否则0 |
| B（ID选择器出现次数） | 有两层ID选择器 B=2 |
| C （类选择器出现的次数） | 类选择器1个， 属性选择器1个，伪类选择器2个 C=4 |
| D （标签、伪类选择器出现次数） | 标签选择器2个，伪类选择器1个 D=3 |
li /* (0, 0, 0, 1) */
ul li /* (0, 0, 0, 2) */
ul ol+li /* (0, 0, 0, 3) */
ul ol+li /* (0, 0, 0, 3) */
h1 + [REL=up] / (0, 0, 1, 1) */
ul ol li.red /* (0, 0, 1, 3) */
li.red.level /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11 /* (0, 0, 11,0) */
#x34y /* (0, 1, 0, 0) */
li:first-child h2 .title /* (0, 0, 2, 2) */
#nav .selected > a:hover /* (0, 1, 2, 1) */
html body #nav .selected > a:hover /* (0, 1, 2, 3) */
复制代码
-
最终从A开始逐层比较，A => B =>C =>D 哪个大优先哪个样式生效，否则后面覆盖前面样式，这也是为什么有的嵌套多层样式可以实现覆盖的原因。
-
样式名称也有就近原则，作用在当前标签的能覆盖继承来的样式
-
最终将这几个条件合并起来就是css的权重问题和计算规则
stylus/sass/less区别
-
均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
-
Sass和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Sass和Stylus可以通过缩进表示层次与嵌套关系 -
Sass无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念 -
Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；这也是为什么安装Sass的时候有时候会报错，需要安装python脚本
优点：就不用我多说了，谁用谁知道，真香。
rgba()和opacity的透明效果有什么不同？
-
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度， -
而
rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）
水平居中的方法
-
元素为行内元素，设置父元素
text-align:center -
如果元素宽度固定，可以设置左右
margin 为 auto; -
如果元素为绝对定位，设置父元素
position 为 relative，元素设left:0;right:0;margin:auto; -
使用
flex-box布局，指定justify-content属性为center -
display设置为tabel-ceil
垂直居中的方法
-
将显示方式设置为表格，
display:table-cell,同时设置vertial-align：middle -
使用
flex布局，设置为align-item：center -
绝对定位中设置
bottom:0,top:0,并设置margin:auto -
绝对定位中固定高度时设置
top:50%，margin-top值为高度一半的负值 -
文本垂直居中设置
line-height为height值
浏览器内核的理解
-
主要分两个部分：
渲染引擎、js引擎 -
渲染引擎：负责取得网页的内容（html css img …），以及计算网页的显示方式，然后会输出至显示器或者打印机。浏览器的内核不同对于网页的语法解释也不同，所以渲染的效果也不一样 -
js引擎：解析和执行javascript 来实现网页的动态效果 -
最开始渲染引擎和js引擎并没有区分的很明确，后来js引擎越来越独立，内核就倾向于只值渲染引擎
-
IE : trident内核 -
Firefox ： gecko内核 -
Safari : webkit内核 -
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时，拖拽结束 -
需要注意浏览器边界值，设置拖拽范围
深拷贝、浅拷贝
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
这里分享一份由字节前端面试官整理的「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）
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
1道**
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）
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-HGclkONE-1712730614918)]
1439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
