时间戳

首页 > 技术文章 > 面试题1

面试题1

yang-xiao-fan 2017-07-16 12:31 原文

HTML

HTML5新增了哪些内容或API，使用过哪些

  • 内容：新增的表单元素；新增的语义化标签；input类型；表单元素的属性；
  • API：拖拽；地理定位；离线存储；websocket

input和textarea的区别

  • input：只能是单行；
  • textarae：可以是多行

用一个div模拟textarea的实现

<div cintenteditabel="true"></div>

 

移动设备忽略将页面中的数字识别为电话号码的方法 — 2017.06.10补充

<meta content="telephone=no" name="format-detection">
//format-detection:表示格式检测

 

CSS

CSS3用过哪些新特性

  • 圆角；背景；线性渐变；径向渐变；阴影

BFC、IFC

  • BFC：块级格式上下文。 
    • 布局规则： 
      • 内部的box会在垂直方向，一个接一个的布置；
      • BFC就是页面上一个独立的容器区域。不会影响外部的元素；
      • box垂直方向的距离游margin决定，属于同一个BFC中的两个box会发生margin的重叠
    • 会产生BFC的元素： 
      • 浮动元素
      • 绝对定位和固定定位
      • display为inline-block；table-cell等行内块级元素
  • IFC：行级格式化上下文 
    • 布局规则： 
      • Box会一个一个的水平排放
      • 竖屏的margin,padding,boder有效，垂直的没有效果

对栅格的理解

  • 栅格系统是现在比较流行的系统，也算是bootstrap的核心，他给人的第一个感觉就是整洁简单。
  • 首先它是包含在一个类名为container的容器中，之后下层是一个类名为row的容器，表示行，下边是一个类名为cli-md-xx的容器，表示占据几行，共有12行，也相当于是单元格，这样一个简单的栅格系统就出来了
  • 还有一个列偏移，狮子啊一个类名为col-md-offset-xx的容器中，表示向右偏移几列

（水平）居中有哪些实现方式

//第一种
div{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}

 

//第二种
 div{
     width:100px;
     height:100px;
     background: navy;
     position: absolute;
     margin:auto;
     top:0;
     left:0;
     bottom:0;
     right:0;
}
//第三种
div{
    width:100px;
    height:100px;
    background: navy;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}

 

 

1像素边框问题

  • 将div的宽高设置为200%，然后用transform：scale（0.5，0.5）缩小

JavaScript

事件委托

  • 把一个事件交给当前元素的父级或document，通过e.target来确定要操作的元素，只绑定一次解决这一类型的的所有事件

实现extend函数

function extend(obj1,obj2){
    for(var attr in obj1){
        obj2[attr]=obj1[attr]
    }
}

 

为什么会有跨域的问题以及解决方式

  • 当两个url的协议的协议，端口，域名有一个不同就属于跨域，常用的跨域方式有： 
    • jsonp
    • CORS

jsonp原理、postMessage原理

  • jsonp：就是在页面中动态创建script元素，引入一个js文件，文件加载成功后执行url中的指定的函数，并将我们需要的json数据作为参数传递进去
  • postMessage：是HTML5引进的新特性，可以用它来向其他的window对象发送信息，无论是同源还是非同源；调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * 。

动画：setTimeout何时执行，requestAnimationFrame的优点

  • 用js实现动画，一般使用setTimeout和setInterval。css3出来就可以用css3来实现动画
  • setTimeout表示在一点时间内执行某一个动作，执行且执行一次
  • setInterval表示每过一段时间就执行一次，执行多次
  • requestAnimationFrame的优点 
    • requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
    • 在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
    • requestAnimationFrame就是一个性能优化版、专为动画量身打造的setTimeout

ES6新增了哪些特性，使用过哪些，也有当场看代码说输出结果的

其实我觉得常用的也就这几个

  • let：可以隐式创建作用域
  • const：创建常量一般用来
  • 箭头函数：解决了this的问题，在这里this指向当前元素的父级作用域
  • 函数中：可以在参数中传递默认值

promise的实现原理

  • promise是一个一部的编程方案，从语法上来讲，他是一个对象，可以获取异步操作的信息
  • 特点： 
    • 对象的状态不受外界的影响，有三个状态：pending(进行中)，resolved(已经完成)，rejected(失败了)
  • 基本用法 
    • promise是一个构造函数，用来生成实例
    • resolve：异步操作成功，将异步操作的结果作为参数传递出去
    • reject：异步操作失败，将报出的错误作为参数传递出去
var promise=new Promise(function(resolve.reject){
    if(//操作成功){
        resolve(valve)
    }else{
        reject(error)
    }
})

 

  • 实例生成后，使用then指定resolved状态和rejectes状态的回调函数
  • then方法有两个参数，参数一是成功后执行的回掉函数，第二个是失败后执行的回掉函数
var p1=new Promise(function(resolve,reject){
    setTimeout(()=>resolve(new Array(3)),3000)
}).then(()=>console.log('成功')，()=>console.log('失败'))

 

  • promise实例生成后会立即执行，然后是同步的方法，最后是then方法

实现gulp的功能

//html文件的操作
var gulp=require('gulp');
var $=require('gulp-load-plugins')();
gulp.task('html',function(){
    gulp.src('./app/*.html')
    //压缩html文件
    .pipe($.minifyHtml)
    .pipe(gulp.dest('./build'))
})
//js文件操作
var gulp=require('gulp');
//这里要执行
var $=require(gulp-load-plugins)();
gulp.task('js',function(){
//获取源文件
gulp.src('./app/js/*.js')
//把ES6编译为ES5
.pipe($.babel({presetd:['es2015']}))
//合并成一个js文件
.pipe($.concat('all.js'))
//写到指定文件夹中
.pipe(gulp.dest('./build/js'))
//对文件进行压缩
.pipe($.uglify())
//对压缩后的文件重命名，否则会覆盖
.pipe($.rename('all.min.js'))
//再保存一份到build文件夹下
.pipe(gulp.dest('./build/js'))
})
//css文件的操作
var gulp=require('gulp');
var $=require('gulp-load-plugins')();
gulp.task('css',function(){
//读取源文件
gulp.src('./app.css/*.css')
//将less编译为css
.pipe($.less())
//合并成一个css文件
.pipe($.concat('all.css'))
//拷贝到指定的文件夹中
.pipe(gulp.dest('./build/css'))
//压缩css
.pipe($.cleanCss())
//重命名
.pipe($.rename(function(file){
//这在函数中的作用是以后改动文件名的时候不需要改变min的名字
file.basename+='.min'
}))
//在写入文件中
.pipe(gulp.dest('./build/css'))
})

 

推荐阅读