Web 前端基础面试题

面试题 Web 前端 HTML CSS

HTML 篇

图片中 title 和 alt 区别？

通常当鼠标滑动到元素上的时候显示
alt 是特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

Html5 有哪些新特性、移除了哪些元素

新增元素：
- 绘画 canvas
- 用于媒介回放的 video 和 audio 元素
- 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
- sessionStorage 的数据在浏览器关闭后自动删除
- 语义化更好的内容元素，比如 article 、footer、header、nav、section
- 表单控件，calendar 、 date 、 time 、 email 、 url 、 search
- 新的技术 webworker 、 websocket 、 Geolocation
移除的元素：
- 纯表现的元素：basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
- 对可用性产生负面影响的元素：frame 、 frameset 、 noframes
支持 HTML5 新标签：
- IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签
- 可以利用这一特性让这些浏览器支持 HTML5 新标签
- 浏览器支持新标签后，还需要添加标签默认的样式

浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢

如何使用：

页面头部像下面一样加入一个 manifest 的属性；
在 cache.manifest 文件的编写离线存储的资源
在离线状态时，操作 window.applicationCache 进行需求实现

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app ，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

iframe 有那些缺点？

iframe 会阻塞主页面的 Onload 事件
搜索引擎的检索程序无法解读这种页面，不利于 SEO
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe ，最好是通过javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题

HTML W3C 的标准

标签闭合、标签小写、不乱嵌套、使用外链 css 和 js 、结构行为表现的分离

Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?

<!DOCTYPE> 声明位于文档中的最前面，处于 html 标签之前。告知浏览器的解析器，用什么文档类型、规范来解析这个文档
严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作 DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现

HTML 全局属性 (global attribute) 有哪些

class : 为元素设置类标识
data-* : 为元素增加自定义属性
draggable : 设置元素是否可拖拽
id : 元素 id ，文档内唯一
lang : 元素内容的的语言
style : 行内 css 样式
title : 元素相关的建议信息

viewport 的 content 属性作用

html

<meta name="viewport" content="" />
    width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值，大部分的安卓手机不支持，但是ios支持；
    height – viewport 的高度 （范围从 223 到 10,000 ）
    user-scalable [yes | no]是否允许缩放
    initial-scale [数值] 初始化比例（范围从 > 0 到 10）
    minimum-scale [数值] 允许缩放的最小比例
    maximum-scale [数值] 允许缩放的最大比例
    target-densitydpi 值有以下（一般推荐设置中等响度密度或者低像素密度，后者设置具体的值dpi_value，另外webkit内核已不准备再支持此属性）
         -- dpi_value 一般是70-400//没英寸像素点的个数
         -- device-dpi设备默认像素密度
         -- high-dpi 高像素密度
         -- medium-dpi 中等像素密度
         -- low-dpi 低像素密度

附带问题：怎样处理移动端 1px 被渲染成 2px 问题?局部处理：

mate 标签中的 viewport 属性， initial-scale 设置为 1
rem 按照设计稿标准走，外加利用 transfrome 的 scale(0.5) 缩小一倍即可；

全局处理：

mate 标签中的 viewport 属性， initial-scale 设置为 0.5
rem 按照设计稿标准走即可

meta 相关****

html

<!DOCTYPE html> 
<head lang="en"> 
<meta charset="utf-8′> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1″/> 
<meta name="description" content="不超过150个字符"/> 
<meta name="keywords" content=""/> 
<meta name="author" content="name, email@gmail.com"/> 
<meta name="robots" content="index,follow"/> 
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-sc/>
<meta name="apple-mobile-web-app-title" content="标题"/> 
<meta name="apple-mobile-web-app-capable" content="yes"/> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="renderer" content="webkit"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta http-equiv="Cache-Control" content="no-siteapp" /> 
<meta name="HandheldFriendly" content="true"> 
<meta name="MobileOptimized" content="320″> 
<meta name="screen-orientation" content="portrait"> 
<meta name="x5-orientation" content="portrait"> 
<meta name="full-screen" content="yes"> 
<meta name="x5-fullscreen" content="true"> 
<meta name="browsermode" content="application"> 
<meta name="x5-page-mode" content="app"> 
<meta name="msapplication-tap-highlight" content="no"> 
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0″>

div+css 的布局较 table 布局有什么优点

改版的时候更方便只要改 css 文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化 （ seo ） 搜索引擎更友好，排名更容易靠前。

src 与 href 的区别

src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部

href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果在文档中添加 - link href="common.css" rel="stylesheet" 那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css ，而不是使用 @import 方式

CSS 篇

link 与 @import 的区别

link 是 HTML 方式， @import 是CSS 方式
link 最大限度支持并行下载， @import 过多嵌套导致串行下载，出现 FOUC (文档样式短暂失效)
link 可以通过 rel="alternate stylesheet" 指定候选样式
浏览器对 link 支持早于 @import ，可以使用 @import 对老浏览器隐藏样式
@import 必须在样式规则之前，可以在 css 文件中引用其他文件
总体来说：link 优于 @import ，link 优先级也更高

BFC 有什么用

创建规则：
- 根元素
- 浮动元素（ float 不取值为 none ）
- 绝对定位元素（ position 取值为 absolute 或 fixed ）
- display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex 之一的元素
- overflow 不取值为 visible 的元素
作用
- 可以包含浮动元素
- 不被浮动元素覆盖
- 阻止父子元素的 margin 折叠

清除浮动的几种方式

父级 div 定义 height
结尾处加空 div 标签 clear:both
父级 div 定义伪类 :after 和 zoom
父级 div 定义 overflow:hidden
父级 div 也浮动，需要定义宽度
结尾处加 br 标签 clear:both

Css3 新增伪类 - 伪元素

p:first-of-type 选择属于其父元素的首个元素的每个元素。
p:last-of-type 选择属于其父元素的最后元素的每个元素。
p:only-of-type 选择属于其父元素唯一的元素的每个元素。
p:only-child 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
:enabled 已启用的表单元素。
:disabled 已禁用的表单元素。
:checked 单选框或复选框被选中。
::before 在元素之前添加内容。
::after 在元素之后添加内容,也可以用来做清除浮动。
::first-line 添加一个特殊的样式到文本的首字母。
::first-letter 添加一行特殊样式到首行。

他们的不同，

伪类语法一个：，它是为了弥补 css 常规类选择器的不足
伪元素语法两个：，它是凭空创建的一个虚拟容器生成的元素

IE 盒子模型、W3C 盒子模型

W3C 盒模型：内容 (content)、填充 ( padding )、边界 ( margin )、边框 ( border )；
- box-sizing: content-box
- width = content width;
IE 盒子模型：IE 的 content 部分把 border 和 padding 计算了进去;
- box-sizing: border-box
- width = border + padding + content width

display:inline-block 什么时候不会显示间隙？

移除空格
使用 margin 负值
使用 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 不同选择器的权重 (CSS 层叠的规则)

！important 规则最重要，大于其它规则
行内样式规则，加 1000
对于选择器中给定的各个 ID 属性值，加 100
对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加 10
对于选择其中给定的各个元素标签选择器，加 1
如果权值一样，则按照样式规则的先后顺序来应用，顺序靠后的覆盖靠前的规则

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 方法：向服务器提交数据
PUT 方法：与 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.3.1 HTTP1.0 提供 Expires，值为一个绝对时间表示缓存新鲜日期
- 2.3.2 HTTP1.1 增加了 Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
- 2.1 如果资源未缓存，发起新请求
- 2.2 如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。
- 2.3 检验新鲜通常有两个 HTTP头进行控制 Expires 和 Cache-Control ：
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 树
1. 根据 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 刷新网页时，跳过强缓存，但是会检查协商缓存；****

JS 篇

说几条写 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 方法去实现较简单，建议使用构造函数与原型混合方式

javascript

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 跨域

javascript

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 跨域

html

//父窗口：(http://www.domain.com/a.html)
<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
  document.domain = 'domain.com';
var user = 'admin';
</script>
//子窗口：(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 感谢：字符搬运工同学纠正[3]

介绍 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 运算符是用来测试一个对象是否在其原型链原型构造函数的属性

javascript

var arr = [];
arr instanceof Array; // true

isArray

javascript

Array.isArray([]) //true
Array.isArray(1) //false

constructor 属性返回对创建此对象的数组函数的引用，就是返回对象相对应的构造函数

javascript

var arr = [];
arr.constructor == Array; //true

Object.prototype

javascript

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 快速打乱数组

javascript

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 代码时，会生成执行环境，只要代码不是写在函数中的，就是在全局执行环境中，函数中的代码会产生函数执行环境，只此两种执行环境

javascript

b() 
// call b 
console.log(a) // undefined 
var a = 'Hello world' 
function b() { 
  console.log('call b') 
}

变量提升这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误。但是更准确的解释应该是：在生成执行环境时，会有两个阶段。第一个阶段是创建的阶段，JS 解释器会找出需要提升的变量和函数，并且给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为 undefined ，所以在第二个阶段，也就是代码执行阶段，可以直接提前使用

javascript

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 ，需要添加配置项（尴尬）
本身无自带 abort ，无法超时控制，可以使用 AbortController 解决取消请求问题。****
没有办法原生监测请求的进度，而 XHR 可以****

优化篇

SEO 优化

合理的 title 、 description 、 keywords ：搜索对着三项的权重逐个减小， title值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description 有所不同；keywords 列举出重要关键词即可
语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页
重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
重要内容不要用 js 输出：爬虫不会执行 js 获取内容
少用 iframe ：搜索引擎不会抓取 iframe 中的内容
非装饰性图片必须加 alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标

server 优化

减少 HTTP 请求，合并文件、雪碧图
减少 DNS 查询，使用缓存
减少 Dom 元素的数量
使用 CDN
配置 ETag,http 缓存的手段
对组件使用 Gzip 压缩
减少 cookie 的大小

css 优化

将样式表放在页面顶部
使用 less scss 表达式
使用 link 不适用@import 引入样式
压缩 css
禁止使用 gif 图片实现 loading 效果（降低 CPU 消耗，提升渲染性能）
使用 CSS3 代码代替 JS 动画（尽可能避免重绘重排以及回流）
对于一些小图标，可以使用 base64 位编码，以减少网络请求。
页面头部的 <style> <script> 会阻塞页面；（因为 Renderer 进程中 JS 线程和渲染线程是互斥的）
当需要设置的样式很多时设置 className 而不是直接操作 style

js 方面

将脚本放到页面底部
将 js 外部引入
压缩 js
使用 Eslint 语法检测
减少 Dom 的操作
熟练使用设计模式
禁止使用 iframe （阻塞父文档 onload 事件）
页面中空的 href 和 src 会阻塞页面其他资源的加载
网页 gzip ， CDN 托管， data 缓存，图片服务器

webpack 优化点

代码压缩插件 UglifyJsPlugin
服务器启用 gzip 压缩
按需加载资源文件 require.ensure
优化 devtool 中的 source-map
剥离 css 文件，单独打包
去除不必要插件，通常就是开发环境与生产环境用同一套配置文件导致
开发环境不做无意义的工作如提取 css 计算文件 hash 等
配置 devtool
优化构建时的搜索路径指明需要构建目录及不需要构建目录

其他优化点

为什么利用多个域名来存储网站资源会更有效？

CDN 缓存更方便
突破浏览器并发限制
节约 cookie 带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题

Other 篇

从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理？

dns 缓存
cdn 缓存
浏览器缓存
服务器缓存

常见 web 安全及防护原理

sql 注入原理：就是通过把 SQL 命令插入到 Web 表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL 命令
- 永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双 "-" 进行转换等
- 永远不要使用动态拼装 SQL，可以使用参数化的 SQL 或者直接使用存储过程进行数据查询存取
- 永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接
- 不要把机密信息明文存放，请加密或者 hash 掉密码和敏感的信息
XSS防范方法：Xss(cross-site scripting) 攻击指的是攻击者往 Web 页面里插入恶意 html 标签或者 javascript 代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取 cookie 中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点
- 首先代码里对用户输入的地方和变量都需要仔细检查长度和对 ”<”,”>”,”;”,”’” 等字符做过滤；其次任何内容写到页面之前都必须加以 encode，避免不小心把 html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击
XSS与CSRF有什么区别：XSS 是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF 是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。要完成一次 CSRF 攻击，受害者必须依次完成两个步骤，1.登录受信任网站 A ，并在本地生成 Cookie 。2.在不登出 A 的情况下，访问危险网站 B
- 服务端的 CSRF 方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数
- 通过验证码的方法

用过哪些设计模式

单例模式
策略模式
代理模式
迭代器模式
发布—订阅模式****

Node 的应用场景

特点
- 它是一个 javascript 运行环境
- 依赖于 chrome V8 引擎进行代码解释
- 事件驱动
- 非阻塞 I/o
- 单进程，单线程
优点
- 对于文件的读写处理效率极高
- 高并发（node 最重要的优点）
缺点
- 只支持单核 CPU ，不能充分利用 CPU
- 可靠性低，一旦代码某个环节崩溃，整个系统都崩溃

那些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏
闭包使用不当

简单介绍下 webpack

WebPack 是一个模块打包工具，可以使用 WebPack 管理模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包 Web 开发中所用到的 HTML 、 Javascript 、 CSS 以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源， webpack 有对应的模块加载器。webpack 模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源。

谈谈对 gulp 的了解

gulp 是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成
gulp 的核心概念：流
流，简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。在流中，定义了一些处理数据的基本操作，如读取数据，写入数据等，程序员是对流进行所有操作的，而不用关心流的另一头数据的真正流向
gulp 正是通过流和代码优于配置的策略来尽量简化任务编写的工作
Gulp 的特点：
- 易于使用：通过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理
- 构建快速利用 Node.js 流的威力，可以快速构建项目并减少频繁的 IO 操作
- 易于学习通过最少的 API ，掌握 gulp 毫不费力，构建工作尽在掌握：如同一系列流管道

渐进增强和优雅降级

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

对函数式编程的理解

简单说，" 函数式编程 " 是一种 " 编程范式 "（programming paradigm），也就是如何编写程序的方法论
它具有以下特性：闭包和高阶函数、惰性计算、递归、函数是 " 第一等公民 "、只用 " 表达式 "****

Vue 的双向绑定数据的原理

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布消息给订阅者，触发相应的监听回调

写个简单 Loader

loader 就是一个 node 模块，它输出了一个函数。当某种资源需要用这个 loader转换时，这个函数会被调用。并且，这个函数可以通过提供给它的 this 上下文访问 Loader API 。reverse-txt-loader

javascript

// 定义
module.exports = function(src) {
  //src是原文件内容（abcde），下面对内容进行处理，这里是反转
  var result = src.split('').reverse().join('');
  //返回JavaScript源码，必须是String或者Buffer
  return `module.exports = '${result}'`;
}
//使用
{
  test: /\.txt$/,
    use: [{
      './path/reverse-txt-loader'
    }]
},

更新: 2021-01-13 14:54:56
原文: <https://www.yuque.com/fcant/notes/gsylwd>

多线程和高并发

集合

Elasticsearch

JavaScript手写实现

JavaScript面试题

Web 前端基础面试题 ​

HTML 篇 ​

图片中 title 和 alt 区别？ ​

Html5 有哪些新特性、移除了哪些元素 ​

浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢 ​

iframe 有那些缺点？ ​

HTML W3C 的标准 ​

Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义? ​

HTML 全局属性 (global attribute) 有哪些 ​

viewport 的 content 属性作用 ​

meta 相关**** ​

div+css 的布局较 table 布局有什么优点 ​

src 与 href 的区别 ​

CSS 篇 ​

link 与 @import 的区别 ​

BFC 有什么用 ​

清除浮动的几种方式 ​

Css3 新增伪类 - 伪元素 ​

IE 盒子模型 、W3C 盒子模型 ​

display:inline-block 什么时候不会显示间隙？ ​

行内元素 float:left 后是否变为块级元素？ ​

如果需要手动写动画，设置最小时间间隔是多久最合理？ ​

CSS 不同选择器的权重 (CSS 层叠的规则) ​

stylus/sass/less 区别 ​

rgba() 和 opacity 的透明效果有什么不同？ ​

水平居中的方法 ​

垂直居中的方法 ​

浏览器 篇 ​

浏览器内核的理解 ​

HTTP 请求 + 作用？ ​

HTTP 状态码 ​

从浏览器地址栏输入 URL 后发生了什么？ ​

基础版本 ​

详细版 ​

详细升级版 ​

cookies ， sessionStorage 和 localStorage 的区别 ​

浏览器缓存 ​

JS 篇 ​

说几条写 JavaScript 的基本规范 ​

绕不过去的闭包 ​

说说对作用域链的理解 ​

JavaScript 原型，原型链 ? 有什么特点？ ​

请解释什么是事件委托/事件代理 ​

Javascript 如何实现继承？ ​

谈谈 This 对象的理解 ​

事件模型 ​

new 操作符具体干了什么呢? ​

Ajax 原理 ​

如何解决跨域问题? ​

说说对 AMD 和 Commonjs 的理解 ​

js 的 7 种基本数据类型 ​

介绍 js 有哪些内置对象 ​

JS 有哪些方法定义对象 ​

jQuery 源码有哪些写的好的地方 ​

null，undefined 的区别 ​

谈谈对 ES6 的理解 ​

面向对象编程思想 ​

如何通过 JS 判断一个数组 ​

异步编程的实现方式 ​

对原生 Javascript 了解方向 ​

sort 快速打乱数组 ​

数组去重操作 ​

JS 原生拖拽节点 ​

深拷贝、浅拷贝 ​

节流防抖 ​

变量提升 ​

js 单线程 ​

说说 event loop ​

描述下 this ​

ajax、axios、fetch 区别 ​

优化 篇 ​

SEO 优化 ​

server 优化 ​

css 优化 ​

js 方面 ​

Web 前端基础面试题

HTML 篇

图片中 title 和 alt 区别？

Html5 有哪些新特性、移除了哪些元素

浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢

iframe 有那些缺点？

HTML W3C 的标准

Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?

HTML 全局属性 (global attribute) 有哪些

viewport 的 content 属性作用

meta 相关****

div+css 的布局较 table 布局有什么优点

src 与 href 的区别

CSS 篇

link 与 @import 的区别

BFC 有什么用

清除浮动的几种方式

Css3 新增伪类 - 伪元素

IE 盒子模型、W3C 盒子模型

display:inline-block 什么时候不会显示间隙？

行内元素 float:left 后是否变为块级元素？

如果需要手动写动画，设置最小时间间隔是多久最合理？

CSS 不同选择器的权重 (CSS 层叠的规则)

stylus/sass/less 区别

rgba() 和 opacity 的透明效果有什么不同？

水平居中的方法

垂直居中的方法

浏览器篇

浏览器内核的理解

HTTP 请求 + 作用？

HTTP 状态码

从浏览器地址栏输入 URL 后发生了什么？

基础版本

详细版

详细升级版

cookies ， sessionStorage 和 localStorage 的区别

浏览器缓存

JS 篇

说几条写 JavaScript 的基本规范

绕不过去的闭包

说说对作用域链的理解

JavaScript 原型，原型链 ? 有什么特点？

请解释什么是事件委托/事件代理

Javascript 如何实现继承？

谈谈 This 对象的理解

事件模型

new 操作符具体干了什么呢?

Ajax 原理

如何解决跨域问题?

说说对 AMD 和 Commonjs 的理解

js 的 7 种基本数据类型

介绍 js 有哪些内置对象

JS 有哪些方法定义对象

jQuery 源码有哪些写的好的地方

null，undefined 的区别

谈谈对 ES6 的理解

面向对象编程思想

如何通过 JS 判断一个数组

异步编程的实现方式

对原生 Javascript 了解方向

sort 快速打乱数组

数组去重操作

JS 原生拖拽节点

深拷贝、浅拷贝

节流防抖

变量提升

js 单线程

说说 event loop

描述下 this

ajax、axios、fetch 区别

优化篇

SEO 优化

server 优化

css 优化

js 方面

webpack 优化点

其他优化点

Other 篇

从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理？

常见 web 安全及防护原理