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')) })

?

轉載于:https://www.cnblogs.com/yang-xiao-fan/p/7190221.html

總結

以上是生活随笔為你收集整理的面试题1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。