2018-12前端面试题

一、html

1. 块级元素、行内元素和空(void)元素有哪些?

块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea

空(void)元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

2. 清除浮动的方式有哪些,哪种方式最好?

(1)clear:both

    原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度

    父元素:after{
          display:block;
          content:'';
          clear:both;
    }
(2)overflow:hidden;解决高度塌陷,在父容器里写

    优点:简单,代码少,浏览器支持好

3. DOCTYPE的作用是什么?

告知浏览器的解释器用什么文档标准解析这个文档。

4. html5有哪些新特性?

(1)语义标签

    

5.前端页面有哪三层构成,分别是什么?作用是什么?

结构层 Html 表示层 CSS 行为层 js

6.描述css reset的作用和用途。

Reset重置浏览器的css默认属性 浏览器的品种不同,样式不同,然后重置,让他们统一

7.解释css sprites,如何使用。

 Css 精灵 把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量

  其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出[背景图片](http://baike.baidu.com/view/950110.htm%22%20%5Ct%20%22_blank)的位置。
  1. 数组方法pop() push() unshift() shift() splice() slice()

    Push()尾部添加 pop()尾部删除

    Unshift()头部添加 shift()头部删除

9.call和apply的区别

两者是指当前的this指针指向调用你的那个function

Object.call(this,obj1,obj2,obj3),call()的参数是单个单个的形式

Object.apply(this,arguments)有两个参数(当前方法,数组)

用处:实现继承

10.Javascript的typeof返回哪些数据类型

object number string boolean underfind function
  1. js继承三种方式

    js原型(prototype)实现继承

   构造函数实现继承

    call , apply实现继承
  1. JavaScript中如何检测一个变量是一个String类型?请写出函数实现
    typeof(obj) == String;

    obj instanceof String
  1. 页面导入css样式有哪几种?link和@import的区别是?
    (1) 从属关系区别

        @import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

  (2)加载顺序的区别

        link先加载网页再显示结构,import相反

  (3)兼容性的区别

        @import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。

 (4)DOM的可控性区别

        可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。

(5)权重区别

          在link标签引入的 CSS 文件中使用@import时,相同样式将被该 CSS 文件本身的样式层叠。
  1. css选择器有哪些?
(1)标签选择器(如:body,div,p,ul,li)

(2)类选择器(如:class="head",class="head_logo") 

(3)ID选择器(如:id="name",id="name_txt")

(4)全局选择器(如:*号)

(5)组合选择器(如:.head .head_logo,注意两选择器用空格键分开)

(6)继承选择器(如:div p,注意两选择器用空格键分开)

(7)伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)

(8)字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含) 

15. js的基础类型有哪些?

Undefined、Null、Boolean、Number和String。还有1中复杂的数据类型————Object,Object本质上是由一组无序的名值对组成的

16. ajax是如何是实现的?

       (1) 创建 XMLHTTPRequest对象

       (2) open(method, url, async) 

     method:发送请求所使用的方法(GET或POST);与POST相比,GET更简单也更快,并且在大部分情况下都能用;
      url:访问路径;
     async:规定应当对请求进行异步(true)或同步(false)处理;true是在等待服务器响应时执行其他脚本,当响应就绪后对响应进行处理;false是等待服务器响应再执行。

    (3) send() 方法可将请求送往服务器。

    (4) onreadystatechange:存有处理服务器响应的函数,每当 readyState 改变时,onreadystatechange 函数就会被执行。

    (5) readyState:存有服务器响应的状态信息。

    (6) responseText:获得字符串形式的响应数据。

    (7) setRequestHeader():POST传数据时,用来添加 HTTP 头,然后send(data),注意data格式;GET发送信息时直接加参数

到url上就可以,比如url?a=a1&b=b1。

代码示例:
$.ajax({
      url:"{:U('ajax_question')}",  //请求路径
       dataType:'json',  //数据类型
       async:true,//请求是否异步,默认为异步,这也是ajax重要特性
       success:function(res){
           //请求成功时处理
           $('.answer-wrap').append(res);//通过append的方式动态添加html代码
       },
       error:function(res){
           //请求成功时处理
           layer.msg('服务器繁忙,请稍后重试')
       }
   });

17. "==="和“==”区别

    “===”代表类型和值相同

    “==”代表值相同

18. 什么是闭包?什么是回调?什么是跨域?

    闭包:定义一个函数,函数里嵌套函数,外层函数调用内层函数方法。(可以访问别的方法内部的参数)

    回调:一个方法作为参数传给另一个方法,另一个方法里调用这个函数.

    跨域:协议、域名、端口与当前不同

19.优化前端性能的方法有哪些?

(1)页面级优化

    a.减少HTTP请求次数

        从设计实现层面简化页面

        合理设置 HTTP缓存

        资源合并与压缩

        合并 CSS图片

        将 CSS放在 HEAD中

    b.将外部脚本置底(将脚本内容在页面信息内容加载后再加载)

        将引入的js放在行为层(最底部)

   c.减少不必要的 HTTP跳转

   d.避免重复的资源请求

(2)代码级优化

    a.少用字符串拼接,+

    缓存节点,尽量减少节点的查找

    避免无谓的循环,break、continue、return的适当使用

    减少节点的操作(innerHTML)

 (3)Image压缩

20.get 和post有哪些区别?以及各自的使用环境

POST和GET都是向服务器提交数据,并且都会从服务器获取数据。

**区别:**

1、传送方式:get通过地址栏传输,post通过报文传输。

2、传送长度:get参数有长度限制(受限于url长度),而post无限制

3、get比post更不安全,因为参数直接暴露在url中,所以不能用来传递敏感信息。

    get请求只能进行url编码,而post支持多种编码方式

    get请求会浏览器主动cache,而post支持多种编码方式。

    get请求参数会被完整保留在浏览历史记录里,而post中的参数不会被保留。

4.最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数。

21. ajax请求方式?

get,post,delete,put,update

22.window.onload与$.onload区别

两者都是在dom文档树加载完执行的,但window.onload是在dom文档树加载完和所有文件加载完执行的一个函数。$(document).ready要比window.onload先执行
  1. es6的新增功能
  1. 新的变量声明方式 let/const
  2. 箭头函数的使用
      const fn = (a, b) => a + b;
      箭头函数最直观的三个特点。
          不需要 function 关键字来创建函数
          省略 return 关键字
          继承当前上下文的 this 关键字
  3. 模板字符串 ``
  4. 函数默认参数  ,不定参数,拓展参数
       function add(x = 20, y = 30) {
            return x + y;
       }
       console.log(add());
  5.  展开运算符 ...
      const arr1 = [1, 2, 3];
      const arr2 = [...arr1, 10, 20, 30];
      // 这样,arr2 就变成了[1, 2, 3, 10, 20, 30];
  6. 类的支持,引入class关键字
  7. for of
  1. CSS3的新特性
  圆角border-radius
  阴影box-shadow
  文字阴影text-shadow
  线性渐变gradient
  旋转transform

二. vue框架

  1. 创建vuejsjiao'shou'jia:vue init webpack 项目名
  2. 传值
      (1)A组件向B组建传值
            A: this.$router.push({path:'/B',query:{id:11}})
            B接收:this.$router.query.id
        (2)  父组件向子组件传值 props
            父:
            子接受:props:['name-list']
        (3) 子组件向父组件传值(通过事件传值) $on(event)监听事件,$emit(event)触发事件
            子:

你可能感兴趣的:(2018-12前端面试题)