面试题 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 属性作用

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

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

  • mate 标签中的 viewport 属性 ， initial-scale 设置为 1

  • rem 按照设计稿标准走，外加利用transfrome 的 scale(0.5) 缩小一倍即可；

全局处理：

  • mate 标签中的 viewport 属性 ， initial-scale 设置为 0.5

  • rem 按照设计稿标准走即可

    meta 相关**

    1. <!DOCTYPE html> <!--H5标准声明，使用 HTML5 doctype，不区分大小写-->
    2. <head lang="en"> <!--标准的 lang 属性写法-->
    3. <meta charset="utf-8′> <!--声明文档使用的字符编码-->
    4. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1″/> <!--优先使用指定浏览器使用特定的文档模式-->
    5. <meta name="description" content="不超过150个字符"/> <!--页面描述-->
    6. <meta name="keywords" content=""/> <!-- 页面关键词-->
    7. <meta name="author" content="name, email@gmail.com"/> <!--网页作者-->
    8. <meta name="robots" content="index,follow"/> <!--搜索引擎抓取-->
    9. <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-sc/>
    10. <meta name="apple-mobile-web-app-title" content="标题"/> <!--iOS 设备 begin-->
    11. <meta name="apple-mobile-web-app-capable" content="yes"/> <!--添加到主屏后的标是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏-->
    12. <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    13. <meta name="renderer" content="webkit"> <!-- 启用360浏览器的极速模式(webkit)-->
    14. <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--避免IE使用兼容模式-->
    15. <meta http-equiv="Cache-Control" content="no-siteapp" /> <!--不让百度转码-->
    16. <meta name="HandheldFriendly" content="true"> <!--针对手持设备优化，主要是针对一些老的不识别viewport的浏览器-->
    17. <meta name="MobileOptimized" content="320″> <!--微软的老式浏览器-->
    18. <meta name="screen-orientation" content="portrait"> <!--uc强制竖屏-->
    19. <meta name="x5-orientation" content="portrait"> <!--QQ强制竖屏-->
    20. <meta name="full-screen" content="yes"> <!--UC强制全屏-->
    21. <meta name="x5-fullscreen" content="true"> <!--QQ强制全屏-->
    22. <meta name="browsermode" content="application"> <!--UC应用模式-->
    23. <meta name="x5-page-mode" content="app"> <!-- QQ应用模式-->
    24. <meta name="msapplication-tap-highlight" content="no"> <!--windows phone设置页面不缓存-->
    25. <meta http-equiv="pragma" content="no-cache">
    26. <meta http-equiv="cache-control" content="no-cache">
    27. <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 方法去实现较简单，建议使用构造函数与原型混合方式

    1. function Parent(){
    2. this.name = 'wang';
    3. }
    4. function Child(){
    5. this.age = 28;
    6. }
    7. Child.prototype = new Parent();//继承了Parent，通过原型
    8. var demo = new Child();
    9. alert(demo.age);
    10. 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跨域

    1. var script = document.createElement('script');
    2. script.type = 'text/javascript';
    3. // 传参并指定回调执行函数为onBack
    4. script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
    5. document.head.appendChild(script);
    6. // 回调执行函数
    7. function onBack(res) {
    8. alert(JSON.stringify(res));
    9. }

  • document.domain + iframe跨域

    1. //父窗口：(http://www.domain.com/a.html)
    2. <iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
    3. <script>
    4. document.domain = 'domain.com';
    5. var user = 'admin';
    6. </script>
    7. //子窗口：(http://child.domain.com/b.html)
    8. document.domain = 'domain.com';
    9. // 获取父窗口中变量
    10. 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 运算符是用来测试一个对象是否在其原型链原型构造函数的属性

    1. var arr = [];
    2. arr instanceof Array; // true

  • isArray

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

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

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

  • Object.prototype

    1. Object.prototype.toString.call([]) == '[object Array]'
    2. // 写个方法
    3. var isType = function (obj) {
    4. return Object.prototype.toString.call(obj).slice(8,-1);
    5. //return Object.prototype.toString.apply([obj]).slice(8,-1);
    6. }
    7. isType([])  //Array

    异步编程的实现方式

  • 回调函数

    • 优点：简单、容易理解
    • 缺点：不利于维护，代码耦合高
  • 事件监听(采用时间驱动模式，取决于某个事件是否发生)
    • 优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数
    • 缺点：事件驱动型，流程不够清晰
  • 发布/订阅(观察者模式)
    • 类似于事件监听，但是可以通过‘消息中心‘，了解现在有多少发布者，多少订阅者
  • Promise对象
    • 优点：可以利用then方法，进行链式写法；可以书写错误时的回调函数；
    • 缺点：编写和理解，相对比较难
  • Generator函数
    • 优点：函数体内外的数据交换、错误处理机制
    • 缺点：流程管理不方便

  • async函数

    • 优点：内置执行器、更好的语义、更广的适用性、返回的是Promise、结构清晰。
    • 缺点：错误处理机制

      对原生 Javascript 了解方向

      数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、 RegExp 、JSON 、 Ajax 、 DOM 、 BOM 、内存泄漏、跨域、异步装载、模板引擎、前端MVC 、路由、模块化、 Canvas 、 ECMAScript

      sort 快速打乱数组

      1. var arr = [1,2,3,4,5,6,7,8,9,10];
      2. arr.sort(()=> Math.random() - 0.5)
      3. //利用sort return 大于等于0不交换位置，小于0交换位置
      4. // [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 代码时，会生成执行环境，只要代码不是写在函数中的，就是在全局执行环境中，函数中的代码会产生函数执行环境，只此两种执行环境

    1. b() 
    2. // call b 
    3. console.log(a) // undefined 
    4. var a = 'Hello world' 
    5. function b() { 
    6. console.log('call b') 
    7. }

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

    1. b() // call b second
    2. function b() {
    3. console.log('call b fist')
    4. }
    5. function b() {
    6. console.log('call b second')
    7. }
    8. 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
    1. // 定义
    2. module.exports = function(src) {
    3. //src是原文件内容（abcde），下面对内容进行处理，这里是反转
    4. var result = src.split('').reverse().join('');
    5. //返回JavaScript源码，必须是String或者Buffer
    6. return `module.exports = '${result}'`;
    7. }
    8. //使用
    9. {
    10. test: /\.txt$/,
    11.   use: [{
    12.     './path/reverse-txt-loader'
    13.   }]
    14. },
    _