前端面试锦集

不念不忘少年蓝@ 2022-02-05 11:25 403阅读 0赞

## 前端面试锦集 ##

1.  自我介绍：
2.  List item.html常用的标签  
    Div,span,p,h1-h5,input,img,strong,a,hr,br  
    http://www.divcss5.com/html/h50219.shtml
3.  html5的新特性  
    （1）websocket：https://www.runoob.com/html/html5-websocket.html  
    WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。  
    HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。  
    在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
4.  ajax的工作原理:  
    通过XmlHttpRequest对象来向服务器发出异步请求，从服务器获得数据，然后用Javascript来操作DOM而更新页面  
    Ajax优势：  
    页面无刷新，在页面内与服务器通信，给用户的体验非常好  
    使用异步方式与服务器通信，不需要打断用户操作，具有更加迅速的响应能力  
    可以嫌少服务器的负担，利用客户端闲置能力来处理任务  
    Ajax工作流程：  
    创建Ajax对象(XmlHttpRequest)  
    判断数据的传输方式（get/post）  
    打开连接open()  
    发送send()  
    ajax的js写法

//get方法
    var ajax = new XMLHttpRequest();
    ajax.open('get','getStar.php?starName='+name);
    ajax.send();
    ajax.onreadystatechange = function () { 
       if (ajax.readyState==4 &&ajax.status==200) { 
    　　　　console.log(ajax.responseText);//输入相应的内容
      　　}
    }

//post方法
    var xhr = new XMLHttpRequest();
    //post请求一定要添加请求头才行不然会报错
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
     xhr.open('post', '02.post.php' );
    xhr.send('name=fox&age=18');
    xhr.onreadystatechange = function () {   if (xhr.readyState == 4 && xhr.status == 200) { 
        console.log(xhr.responseText);
      } 
    };

1.  js基本数据类型:Boolean null string number undefined  
    复杂数据类型:object  
    全局数据类型:Marth
2.  浏览器前端发送url到服务器的过程  
    https://www.cnblogs.com/max-tlp/p/6827956.html  
    大体分为三步：  
    一、浏览器向服务器发送请求（在地址栏中输入网页地址）  
    二、服务器收到请求找到资源返回给浏览器  
    三、浏览器解析服务器返回的内容（页面显示的内容）。  
    URL结构,DNS解析,DNS缓存,三次tcp握手,http请求,http响应,浏览器渲染,前后端交互,四次挥手https://www.jianshu.com/p/417ac86ef086
3.  响应式布局怎么实现  
    （1） 原生代码实现：@media screen可以查询当前浏览器的尺寸，因此可采用该方法对同一个页面设置不同的CSS样式，来满足不同分辨率要求。  
    （2） 采用bootstrap框架布局
4.  css实现水平垂直居中  
    水平居中 margin：0 auto；  
    垂直居中： https://www.cnblogs.com/zhouhuan/p/vertical\_center.html
5.  页面是怎样加载和渲染的过程
6.  数组的操作
7.  vue.js的好处
8.  html5比html4好在哪里
9.  canvas调用了那些api
10. js获取页面url
11. 状态码有哪些 作用是什么 404 401 400 500 200 302等
12. ajax请求实现的过程：  
    AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
13. 前端技术栈有哪些  
    vuejs：是一套构建用户界面的渐进式框架。它最大的优势就是组件化，用这个框架可以把很多元素封装成组件，最后功能的开发变成了组件的拼装，极大的提高了代码的复用。  
    reactjs，boots TV，nodejs
14. js出现点击上一个模块下一个模块同样被点击应如何处理。[事件捕获事件冒泡][Link 1]
15. 函数声明、函数表达式及匿名函数的区别和调用指向https://www.cnblogs.com/zhouhuan/p/vertical\_center.html  
    https://blog.csdn.net/weixin\_44505375/article/details/86499744  
    函数声明：function fnName () \{…\};使用function关键字声明一个函数，再指定一个函数名，叫函数声明。  
    函数表达式 ：var fnName = function () \{…\};使用function关键字声明一个函数，但未给函数命名，最后将匿名函数赋予一个变量，叫函数表达式，这是最常见的函数表达式语法形式。  
    匿名函数：function () \{\}; 使用function关键字声明一个函数，但未给函数命名，所以叫匿名函数，匿名函数属于函数表达式，
16. 立即执行函数（自执行函数）  
    https://blog.csdn.net/qq\_42051213/article/details/80767256  
    立即执行函数的两种常见形式：( function()\{…\} )()和( function ()\{…\} () )，一个是一个匿名函数包裹在一个括号运算符中，后面再跟一个小括号，另一个是一个匿名函数后面跟一个小括号，然后整个包裹在一个括号运算符中，这两种写法是等价的。要想立即执行函数能做到立即执行，要注意两点，一是函数体后面要有小括号()，二是函数体必须是函数表达式而不能是函数声明。  
    除了使用()运算符之外，！，+，-，=等运算符都能起到立即执行的作用。这些运算符的作用就是将匿名函数或函数声明转换为函数表达式，如下图所示，函数体是函数声明的形式，使用运算符将其转换为函数表达式之后就可达到立即执行效果。  
    使用立即执行函数的好处：通过定义一个匿名函数，创建了一个新的函数作用域，相当于创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏污染全局的命名空间。此时若是想访问全局对象，将全局对象以参数形式传进去即可。
17. 什么是跨域，解释一下  
    跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。  
    同源：是指，域名，协议，端口均相同，localhost和127.0.0.1虽然都指向本机，但也属于跨域。  
    解决办法：  
    1、JSONP：  
    使用方式就不赘述了，但是要注意JSONP只支持GET请求，不支持POST请求。  
    2、代理：  
    例如www.123.com/index.html需要调用www.456.com/server.php，可以写一个接口www.123.com/server.php，由这个接口在后端去调用www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。  
    3、PHP端修改header（XHR2方式）  
    在php接口脚本中加入以下两句即可：  
    header(‘Access-Control-Allow-Origin:\*’);//允许所有来源访问  
    header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式
18. JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别  
    clientWidth = width+左右padding  
    offsetWidth = width + 左右padding + 左右boder  
    scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度比如滚动条）。  
    width：content内容宽度。  
    https://blog.csdn.net/qq\_42089654/article/details/80515916
19. **牛客网 https://www.nowcoder.com/profile/308592184/myFollowings**
20. 线程与进程的区别  
    一个程序至少有一个进程，一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。  
    另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。  
    线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。  
    从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
21. 如何对网站的文件和资源进行优化？
22. 请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）  
    1.优化图片  
    2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）  
    3.优化CSS（压缩合并css，如margin-top,margin-left…)  
    4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）  
    5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）  
    6.减少http请求（合并文件，合并图片）。
23. 请写一个简单的幻灯效果页面  
    如果不使用JS来完成，可以加分。（如：纯CSS实现的幻灯片效果）  
    (1) js实现方法

//css
        <style type="text/css"> * { margin: 0; padding: 0; } li{ list-style: none; } #demo{ width: 600px; height: 400px; position: relative; margin: 0 auto; } #list{ position: relative; width: 100%; height: 100%; } #list li{ width: 100%; height: 100%; position: absolute; opacity: 1; } #list li img{ width: 100%; height: 100%; } #btn{ position: absolute; right: 10px; bottom: 10px; z-index: 10; } #btn li{ position: relative; float: left; width: 20px; height: 20px; background-color: #fb7a24; color: #ffffff; margin: 6px; text-align: center; border-radius: 90px; font-size: 13px; } #btn li:hover{ background-color: #FF0000; } .current{ background-color: #FF0000!important; } </style>
    <div id="demo">
        <ul id="list">
            <li><img src="img/img_1.jpg" alt=""></li>
            <li><img src="img/img_2.jpg" alt=""></li>
            <li><img src="img/img_3.jpg" alt=""></li>
            <li><img src="img/img_4.jpg" alt=""></li>
            <li><img src="img/img_5.jpg" alt=""></li>
        </ul>
        <ul id="btn">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    
    </div>
    //js
    <script type="text/javascript"> var list=document.getElementById('list'); var oLi=list.getElementsByTagName('li'); console.log(oLi) var btn=document.getElementById('btn'); var oImg=btn.getElementsByTagName('li'); console.log(oImg) var time=null; var b=0; function show(a) { for(var i=0;i<oLi.length;i++) { oLi[i].style.opacity=0; oImg[i].className=''; } oLi[a].style.opacity=200; oImg[a].className='current'; } function autoPlay() { time=setInterval(function () { b++; if(b>=oImg.length) b=0; show(b) },1000); } autoPlay(); //鼠标控制 for(var i=0;i<oImg.length;i++){ oImg[i].index = i; oImg[i].onmouseover=function () { clearInterval(time); show(this.index) } oImg[i].onmouseout=function(){ autoPlay(); } } </script>

（2）css3实现方法

<div class="banner"></div>
    //css3
     <style type="text/css"> .banner{ width: 600px; height: 400px; margin: 15px auto; background-size: cover; background-position: center; animation-name: mymove; animation-duration: 20s; animation-timing-function: linear; animation-iteration-count: infinite; } @-webkit-keyframes mymove { 0% { background: url(" img/img_1.jpg") no-repeat;} 25% { background: url(" img/img_2.jpg") no-repeat;} 50% { background: url(" img/img_3.jpg") no-repeat;} 75% { background: url(" img/img_4.jpg") no-repeat;} 100% { background: url(" img/img_5.jpg") no-repeat;} } </style>

1.  .什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？  
    FOUC(Flash Of Unstyled Content)–文档样式闪烁  
    而引用CSS文件的`@import`就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。解决方法简单的出奇，只要在 `<head>`之间加入一个`<link>`或者`<script>`元素就可以了。
2.  doctype（文档类型）的作用是什么？你知道多少种文档类型？  
    此标签可告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。
3.  使用XHTML的局限有哪些？  
    XHTML 元素必须被正确地嵌套。  
    XHTML 元素必须被关闭。  
    标签名必须用小写字母。  
    XHTML 文档必须拥有根元素。  
    所有的 XHTML 文档必须拥有 DOCTYPE 声明，并且 html、head、title 和 body 元素必须存在。虽然代码更加的优雅，但缺少容错性，不利于快速开发。
4.  data-属性的作用是什么？  
    data-\* 属性用于存储页面或应用程序的私有自定义数据。data-\* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。  
    data-\* 属性包括两部分：  
    属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符  
    属性值可以是任意字符串
5.  请描述一下cookies，sessionStorage和localStorage的区别？  
    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。  
    共同点：都是保存在浏览器端，且同源的。  
    区别：  
    1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。  
    2.存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。  
    3.数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。  
    4.作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。  
    5.Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。  
    6.Web Storage 的 api 接口使用更方便。
6.  描述下`“reset”`CSS文件的作用和使用它的好处。  
    因为浏览器的品种很多，每个浏览器的默认样式也是不同的，所以定义一个css reset可以使各浏览器的默认样式统一。
7.  22.列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。  
    1.使用空标签清除浮动。这种方法是在所有浮动标签后面添加一个空标签定义css clear:both.弊端就是增加了无意义标签。  
    2.使用overflow。给包含浮动元素的父标签添加css属性overflow:auto;zoom:1;zoom:1用于兼容IE6。  
    3.使用after伪对象清除浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，content属性的值设为”.”，空亦是可以的。  
    4.浮动外部元素  
    此三种方法各有利弊，使用时应择优选择，比较之下第二种方法更为可取。
8.  解释下CSS sprites，以及你要如何在页面或网站中使用它。  
    CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少向服务端发起请求的次数，提高速率。
9.  你用过媒体查询（响应式布局），或针对移动端的布局/CSS吗？  
    媒体查询，就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。  
    语法结构及用法：@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二\{sRules\}。  
    示例如下：

/* 当浏览器的可视区域小于980px */
    
     @media screen and （max-width： 980px） { 
     #wrap { width： 90%; margin:0 auto;}
     }
     /* 当浏览器的可视区域小于650px */
     @media screen and （max-width： 650px） { 
    #header { height： auto;}
    }

1.  你熟悉SVG样式的书写吗？  
    SVG 意为可缩放矢量图形  
    https://blog.csdn.net/dusea/article/details/49474349  
    什么是SVG？  
    SVG 指可伸缩矢量图形 (Scalable Vector Graphics)  
    SVG 用来定义用于网络的基于矢量的图形  
    SVG 使用 XML 格式定义图形  
    SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失  
    SVG 是万维网联盟的标准  
    SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体  
    书写示例如下：

<?xml version="1.0" standalone="no"?>
        <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
        <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
        </svg>

1.  css盒模型

<table> 
 <thead> 
  <tr> 
   <th>标准</th> 
   <th>宽高</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>标准模型</td> 
   <td>content的宽度</td> 
  </tr> 
  <tr> 
   <td>IE模型</td> 
   <td>content+padding+border的宽度</td> 
  </tr> 
 </tbody> 
</table>

盒模型的组成：content，padding，border，margin  
css如何设置两种模型  
这里用到了CSS3 的属性 box-sizing

/* 标准模型 */
    box-sizing:content-box;
    
     /*IE模型*/
    box-sizing:border-box;

37.display属性的作用

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>此元素不会被显示</td> 
  </tr> 
  <tr> 
   <td>block</td> 
   <td>此元素将显示为块级元素，此元素前后会带有换行符</td> 
  </tr> 
  <tr> 
   <td>inline</td> 
   <td>默认。此元素会被显示为内联元素，元素前后没有换行符</td> 
  </tr> 
  <tr> 
   <td>inline-block</td> 
   <td>行内块元素</td> 
  </tr> 
 </tbody> 
</table>

1.  css之position属性的作用  
    relative 相对定位 相对于自身的位置定位，可以用left，bottom，top,right来改变位置  
    fixed 固定定位 相对于整个页面来定位，滚动之后仍旧在那个位置  
    absolute 绝对定位 如果父元素设置相对定位，那么就是针对父元素来定位的，否则就是针对浏览器来定位，可以用left,top,bottom,right来改变位置  
    static 默认定位 默认即静止定位,是按照元素在(x)html出现的顺序依次分配位置,static是不受top right left bottom影响的。若要清除定位时可使用static来消除定位的影响。
2.  js事件代理。  
    JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。

function getEventTarget(e) { 
        var e=e||window.event;
        var src= e.target||e.srcElement;
        return src;
    }

1.  解释下JavaScript中this是如何工作的。  
    this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向window 。  
    1.如果是call，apply,with，指定的this是谁，就是谁。  
    2.普通的函数调用，函数被谁调用，this就是谁。
2.  document.write()方法为什么一般不用

<html>
    <head></head>
    <body>
    <script type="text/javascript">document.write("<p>Hello</p>");</script>
    </body>
    </html>

当页面加载完毕，你会在页面看到 Hello。查看源文件就是上面的代码。  
但如果页面已经加载完毕，再使用 document.write，那就会覆盖整个文档。

<html>
    <head></head>
    <body>
    <script type="text/javascript"> // 当点击鼠标时调用 document.write document.onclick = function() { document.write("<span>Javascript</span>"); }; </script>
    </body>
    </html>

因为鼠标动作是在页面加载完毕后执行的，所以整个页面会被 Javascript所覆盖。现在查看源文件就只会看到 `<span>Javascript</span>`

1.  请指出document.onload和document.ready两个事件的区别。  
    页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。
2.  如何实现下列代码：\[1,2,3,4,5\].duplicator();//\[1,2,3,4,5,1,2,3,4,5\]

var arr = [1,2,3,4,5];
        Array.prototype.duplicator = function (){ 
            var len = this.length;
            for(var i=0;i<len;i++){ 
                this.push(this[i]);
            }
            return this;
        }
           console.log(arr.duplicator())

1.  什么是”use strict”;?使用它的好处和坏处分别是什么？  
    在代码中出现表达式-“use strict”; 意味着代码按照严格模式解析，这种模式使得Javascript在更严格的条件下运行。  
    好处：  
    消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;  
    消除代码运行的一些不安全之处，保证代码运行的安全；  
    提高编译器效率，增加运行速度；  
    为未来新版本的Javascript做好铺垫。  
    坏处  
    同样的代码，在”严格模式”中，可能会有不一样的运行结果；一些在”正常模式”下可以运行的语句，在”严格模式”下将不能运行。
2.  javascript的typeof返回哪些数据类型.  
    string,boolean,Array,undefined,object,function
3.  js强制类型转换和隐式类型转换  
    强制类型转换：parseIn,parseFloat,number  
    隐式类型转换:`== ===`
4.  splite和join的区别  
    splite 是字符串切割成数组  
    join 将数组合并成字符串
5.  splice和slice操作数组的区别  
    splice(1,0,‘ww’) 在1的位置添加www  
    splce(1,1,‘rrr’) 从位置1开始的1个元素 用rr替代删除的元素  
    slice(start,end）从start位置开始选取元素到end截止 并且返回选择的元素
6.  尾部 push() pop() 头部unshif() shif()
7.  js继承的几种方式：https://blog.csdn.net/wyw223/article/details/86567897
8.  js事件流：https://segmentfault.com/a/1190000004463384?utm\_source=tag-newest  
    DOM事件流包括三个阶段。  
    事件捕获阶段  
    处于目标阶段  
    事件冒泡阶段
9.  CSS有哪些属性是可以继承的？  
    常见：  
    　　1、字体系列属性  
    　　font-family：字体系列  
    　　font-weight：字体的粗细  
    　　font-size：字体的大小  
    　　font-style：字体的风格  
    　　2、文本系列属性  
    　　text-indent：文本缩进  
    　　text-align：文本水平对齐  
    　　line-height：行高  
    　　word-spacing：单词之间的间距  
    　　letter-spacing：中文或者字母之间的间距  
    　　text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）  
    　　color：文本颜色  
    　　3、元素可见性：  
    　　visibility：控制元素显示隐藏  
    　　4、列表布局属性：  
    　　list-style：列表风格，包括list-style-type、list-style-image等  
    　　5、光标属性：  
    　　cursor：光标显示为何种形态
10. 手动写动画最小的时间间隔是多久：  
    多数显示器的默认频率是60HZ，即每秒刷新60次。所以理论上的最小间隔是 1/60\*1000ms = 16.7ms

#### 关于vue的面试题： ####

https://segmentfault.com/a/1190000018225708?utm\_source=tag-newest

#### 数据结构 ####

1、数组  
2、栈  
3、队列  
4、链表  
5、树  
6、散列表  
7、堆  
8、图  
https://blog.csdn.net/yeyazhishang/article/details/82353846

#### 计算机网络 ####

IOS七层 TCP/UDP/IP等：  
https://blog.csdn.net/Trap\_In\_Study/article/details/87731638

[Link 1]: https://www.cnblogs.com/thinkingthigh/p/7886926.html