@baby张
@baby张

震惊！（真细）重学前端——300个基础面试题+答案、分类学习整理（良心制作）持续更新。。。

注：花半个月时间，重学基础，学习完、整理完、总结归纳完，痛并快乐着。

（欢迎提出问题和建议，采纳后会附上提议者名字链接）

HTML 篇

说说 title 和 alt 属性

  • 两个属性都是当鼠标滑动到元素上的时候显示
  • alt 是 img 的特有属性，是图片内容的等价描述，图片无法正常显示时候的替代文字。
  • title 属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签，是对dom元素的一种类似注释说明，
    感谢：超前位者 的纠正

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作用? 严格模式与混杂模式如何区分？它们有何意义?

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

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

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

viewport的content属性作用

<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 相关

 
<head lang=”en”> 
<meta charset=’utf-8′> 
 
<meta name=”description” content=”不超过150个字符”/> 
<meta name=”keywords” content=””/> 
<meta name=”author” content=”name, [email protected]”/> 
<meta name=”robots” content=”index,follow”/> 
<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=”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″>

了解更多参考：https://blog.csdn.net/kongjiea/article/details/17092413

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 方法：向服务器提交数据通常(创建数据)-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树
    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 刷新网页时，跳过强缓存，但是会检查协商缓存；
    强缓存-协商缓存：这篇文章介绍挺细的：https://juejin.cn/post/6844903763665240072#heading-5

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 方法去实现较简单，建议使用构造函数与原型混合方式
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)
<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
感谢：字符搬运工 同学纠正

介绍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 模块的概念
    更多ES新语法：阮一峰的ES入门：https://es6.ruanyifeng.com/#docs/style

面向对象编程思想

  • 基本思想是使用对象，类，继承，封装等基本概念来进行程序设计
  • 易维护
  • 易扩展
  • 开发工作的重用性、继承性高，降低重复工作量。
  • 缩短了开发周期

如何通过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
    详细操作前往：https://juejin.cn/post/6844904035619700750

JS 原生拖拽节点

  • 给需要拖拽的节点绑定 mousedown , mousemove , mouseup 事件
  • mousedown 事件触发后，开始拖拽
  • mousemove 时，需要通过 event.clientX 和 clientY 获取拖拽位置，并实时更新位置
  • mouseup 时，拖拽结束
  • 需要注意浏览器边界值，设置拖拽范围

深拷贝、浅拷贝

  • 所有的基础数据类型的赋值操作都是深拷贝
  • 通常利用上面这点，来对引用数据类型做递归深拷贝
  • 浅拷贝：Object.assign 或者 扩展运算符
  • 深拷贝：JSON.parse(JSON.stringify(object)) 深层递归
    • 局限性：会忽略 undefined，不能序列化函数，不能解决循环引用的对象

详细信息更多：https://juejin.cn/post/6906369563793817607**

节流防抖

  • 节流：每隔一段时间执行一次，通常用在高频率触发的地方，降低频率。–如：鼠标滑动 拖拽
  • 防抖：一段时间内连续触发，不执行，直到超出限定时间执行最后一次。–如：input 模糊搜索
    更多节流、防抖，细节介绍：https://juejin.cn/post/6844903592898330638

变量提升

当执行 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） 进行执行

更详细的介绍前往：https://juejin.cn/post/6844903598573240327

描述下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解决取消请求问题。
    感谢：九旬 同学纠错
    感谢：sun麋鹿先生 同学纠错

  • 没有办法原生监测请求的进度，而XHR可以
    更多fetch知识前往：阮一峰 fetch

优化 篇

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位编码，以减少网络请求。
  • 页面头部的