1. 技术文章
  2. 前端面试集锦（1-24）

前端面试集锦（1-24）

由 ぃ、小莉子 提交于 2020-02-09 13:06:35

目录

1、id选择器？

#id

/*id选择器     #号*/
        #d1 {  /*将id为d1的标签内部文本内容改成绿色*/
            color: green;
        }

2、类选择器

.id

/*类选择器     点号*/
        .c1 {  /*让所有具有c1类属性值的标签内部文本变成蓝色*/
            color:blue;
        }

3、元素选择器

 /*标签选择器 元素选择器*/      
div {  /*将页面上所有的div标签内部的文本变成红色*/
            color: red;
        }

4、通用选择器

*
/*通用选择器   *号*/
        * {  /*页面上所有的标签统一修改样式*/
            color: aqua;
        }

5、简述什么是浏览器事件流

事件流：事件流描述的是从页面中接收事件的顺序。
DOM2级事件规定的事件流包括三个阶段：

1、事件捕获阶段

2、处于目标阶段

3、事件冒泡阶段

事件捕获阶段（Event Capturing）：

按照事件捕获的思想，在此过程（click页面某元素）中，document对象会首先接收到click事件，然后事件沿着dom树依次向下，一直传播到实际目标，即div元素。但在事件流中的捕获阶段，实际目标div元素是不会接收到事件的，这就意味着没在捕获阶段，事件从document到再到后就停止了。（但IE9、Safari、Chrome、Firefox 和 Opera9.5 以及更高版本都会在捕获阶段触发事件对象上的事件）；下一个阶段是"处于目标"阶段，于是事件在发生，并在事件处理中被堪称冒泡阶段的一部分，最后，冒泡事件发生，事件又传播回文档。

冒泡阶段（Event Bubbling）：

事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点，即document对象。

DOM2 与 DOM0区别

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：

①.addEventListener()

②.removeEventListener()

所有的DOM节点都包含这两个方法，而且接受三个参数：

①.要处理的事件名；

②.作为事件处理程序的函数；

③.一个 boolean 的值，如果值为true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用此事件处理程序。

6、如何用CSS隐藏一个元素？

1.opacity
opacity:0将元素本身及其子元素都置为不可见的，而元素本身依然占据它自己的位置并对网页的布局起作用，它会响应用户交互

.hide {
  opacity:0
}

2 .visibility
visibility:hidden将元素本身及其子元素都置为不可见的, 而元素本身依然占据它自己的位置并对网页的布局起作用，它不会响应用户交互.如果想让子元素显示，则设置子元素的visibility：visible;
.hide {
  visibility:hidden
}

3.display

display:none使用这个属性，被隐藏的元素对网页的布局不起作用。不仅如此，一旦display设为none任何对该元素直接的用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。

.hide {
  display:none
}

4.position

position:absolute 将top和left设置成足够大的负数，相当于把元素放到可视区域外，它不会影响布局，能够让元素保持可操作性，在读屏软件上可以被识别。

.hide {
  position:absolute;
  top:-9999px;
  left:-9999px;
}

总结一下：opacity,visibility影响布局，前者不影响交互，后者影响交互；

                   display不影响布局，影响交互；

                   position 不影响布局，不影响交互；

7、一行CSS实现padding上下左右分别为1，2，3，4px?

padding:1px 4px 2px 3px;

8、前后端分离的基本原理？

前后端分离并不只是开发模式，而是web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。
后端追求的是：三高（高并发，高可用，高性能），安全，存储，业务等等。
前端追求的是：页面表现，速度流畅，兼容性，用户体验等等。

9、如何创建响应式布局？

创建响应式布局，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
1、设置 Meta 标签
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。


2、通过媒介查询来设置样式 Media Queries

Media Queries 是响应式设计的核心。
它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：
@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}
这里的样式就会覆盖上面已经定义好的样式。
  
3、设置多种试图宽度  
假如我们要设定兼容 iPad 和 iphone 的视图，那么可以这样设置：
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}
  
注意问题：
1、宽度需要使用百分比
#head { width: 100% }
#content { width: 50%; }
2、处理图片缩放的方法
 简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。
  img { width: auto; max-width: 100%; }
- 用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情，在 css3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能： HTML 结构：
  著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
链接:http://caibaojian.com/356.html
来源:http://caibaojian.com

<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">
CSS 控制：
  @media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}
  
3. 其他属性
  例如 pre ，iframe，video 等，都需要和img一样控制好宽度。对于table，建议不要增加 padding 属性，低分辨率下使用内容居中：
  table th, table td { padding: 0 0; text-align: center; }

10、你使用过那些前端框架？

html框架：
    Bootstarp
js框架：
    jQuery
    Vue

11、什么式ajax请求？使用jQuery和XMLHttpRequest对象实现一个ajax请求？

ajax:异步提交，局部刷新

"""
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
"""
########## jQuery. ###########
$ajax({
  url:"/test/",
  type:'post',
  data:{'n1':$("#num1").val(),
        'n2':$("#num2").val()
       },
  success:function (data){
    $("#num3").val(data)
  }
})



######### XMLHttpRequest ########
 function getXhr(){
    if (typeof XMLHttpRequest != 'undefined') {
      return new XMLHttpRequest();
    }
  }
  var xhr = getXhr();
  var stringData = {
    uname: '123',
    password: '123',
    code: ''
  }
  stringData = JSON.stringify(stringData);
  //POST请求
  xhr.open('POST', '/user/login');
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send(stringData)
  xhr.onreadystatechange = function(res) {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        console.log(JSON.parse(xhr.responseText))
      }
    }
  }

12、如何在前端实现轮询？

  轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求，然而HTTP request 的header是非常长的，里面包含的有用数据可能只是一个很小的值，这样会占用很多的带宽。

var xhr = new XMLHttpRequest();
    setInterval(function(){
        xhr.open('GET','/user');
        xhr.onreadystatechange = function(){

        };
        xhr.send();
    },1000)

13、如何在前端实现长轮询？

ajax实现:在发送ajax后,服务器端会阻塞请求直到有数据传递或超时才返回。 客户端JavaScript响应处理函数会在处理完服务器返回的信息后，再次发出请求，重新建立连接。

function ajax(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET','/user');
        xhr.onreadystatechange = function(){
              ajax();
        };
        xhr.send();
    }

14、vuex的作用？

Vuex是一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化。

15、vue中的路由拦截器的作用？

判断是否有token值，或是否to登录页，是则next(),否则跳转到登录页

16、axios的作用？

axios是基于promise的用于浏览器和nodejs的HTTP客户端，本身有以下特征：

从浏览器中创建XMLHttpRequest；
从nodejs发出http请求
支持promiseAPI
拦截 请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止CSRF/XSRF攻击

17、列举vue的常见指令？

v-text  # 相当于元素的innerText属性，必须是双标签
v-html  # 相当于元素的innerHTML属性
v-show  # 是否隐藏元素
v-if
v-else
v-else-if
v-for
v-on    # 绑定事件:v-on 
        <div v-on:click=" num = 1 "></div>
            //可以简写成
        <div @click=" num = 1 "></div>
v-bind
v-model
v-pre
v-cloak
v-once

18、简述jsonp及其原理？

JSONP：就是用来解决跨域请求问题的

为了保证用户访问的安全，现代浏览器使用了同源策略，即不允许访问非同源的页面，详细的概念大家可以自行百度。这里大家只要知道，在ajax中，不允许请求非同源的URL就可以了，比如www.a.com下的一个页面，其中的ajax请求是不允许访问www.b.com/c.php这样一个页面的。


JSONP原理：
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

19、简述cors及其原理？

CORS：全称"跨域资源共享"（Cross-origin resource sharing）

CORS需要浏览器和服务器同时支持，才可以实现跨域请求，目前几乎所有浏览器都支持CORS，IE则不能低于IE10。CORS的整个过程都由浏览器自动完成，前端无需做任何设置，跟平时发送ajax请求并无差异。so，实现CORS的关键在于服务器，只要服务器实现CORS接口，就可以实现跨域通信。

20、看js代码写结果？

var name = '张三'; 
function func(){
  var name = '李四';
  function inner(){
        console.log(name)
  }
    return inner;
}
var ret = func();
ret()

结果：李四

21、看js代码写结果

function main(){
   if(1==1){
            var name = "张三"; 
   }
   console.log(name);
}

结果：undefind

22、看js代码写结果

var name = "张三";
function func(){
  var name = "李四";
  function inner(){
    var name = "王五";
    console.log(name);
  }
  return inner();
}
func();

结果：王五

23、看js代码写结果

function func(){
    console.log(name);
  var name = "DSB";
}

结果：undefind

24、看js代码写结果

var name = "张三"; 
function Foo(){
    this.name = "李四";
  this.func = function(){
        console.log(this.name);
  }
}
var obj = new Foo();
obj.func();

结果：李四

标签
ajax
web前端开发
js代码
前端工程师
前端架构
css选择器
js
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!