web前端面試問什麼-常見問題-PHP中文網

首頁

常見問題

web前端面試問什麼

清浅

Apr 26, 2019 am 11:27 AM

web前端前端面試題

web前端面試會問：1、HTML和HTML5相關知識點，例如“什麼是語義化”，“HTML5新特性有哪些”；2、CSS以及JS知識點，例如“如何實現垂直居中”，“js閉包是什麼”等等問題。

web前端面試問什麼

web前端面試一般都會問：HTML和HTML5相關知識點，例如什麼是語義化，HTML5新特性有哪些；CSS以及JS知識點，例如如何實現垂直居中，js閉包是什麼等等問題

本篇文章收集了一些面試中經常會遇到的面試題，並給出了相應的答案，具有一定的參考作用，希望能幫到更多的前端面試官以及學習前端的人。

web前端面試問什麼

【推薦教學：JavaScript教學】

HTML/HTML5

1、知道語意化嗎？說說你理解的語意化，如果是你，平常會怎麼做來確保語意化？

像html5的新的標籤header,footer,section等就是語意化

一方面，語意化就是讓電腦能夠快讀的讀取內容，高效的處理訊息，可以對搜尋引擎更友善

另一方面，便於與他人的協作，他人透過讀取程式碼就可以理解你網頁標籤的意義

去掉或遺失樣式的時候能夠讓頁面呈現出清晰的結構

有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多有效資訊：爬蟲依賴標籤來確定上下文和各個關鍵字的權重

方便其他設備解析（如螢幕閱讀器、盲人閱讀器、行動裝置）以意義方式來渲染網頁

便於團隊開發和維護，語意化更有可讀性，是下一步把網頁的重要動向，遵循W3C標準的團隊都要遵循這個標準，減少差異化

2、介紹HTML5的新特性

新的DOCTYPE聲明

完全支援css3

video和audio

本機儲存

語意化錶圈

canvas新事件如ondrag onresize

3、如果解決ajax無法後退的問題

html5裡引入了新的API，即：history.pushState,history.replaceState

可以透過pushState和replaceSate介面瀏覽器歷史，並且改變目前頁面的URL

onpopstate監聽後退

4、websocket和ajax輪詢

websocket是html5中提出的新的協議，可以實現客戶端與伺服器的通信，實現伺服器的推送功能

優點是，只要簡歷一次連接，就可以連續不斷的得到伺服器推送訊息，節省頻寬和伺服器端的壓力。

ajax輪詢模擬常連接就是每隔一段時間（0.5s）就向伺服器發起ajax請求，查詢伺服器是否有資料更新

缺點就是，每次都要建立HTTP連接，即使需要傳輸的資料非常少，浪費頻寬

5、web worker和websocket

worker主執行緒

透過worker = new worker(url)載入一個js檔案來建立一個worker，同時傳回一個worker實例

透過worker.postMessage(data)方法來傳送資料給worker。

綁定worker.onmessage方法來接收worder傳送過來的資料

可以使用worker.terminate()來終止一個worder的執行。

websocket

是web應用程式的傳輸協議，它提供了雙向的，按序到達的資料流。他是一個HTML5協議，websocket鏈接是持久的，透過在客戶端和伺服器之間保持雙向鏈接，伺服器的更新可以及時推送給客戶端，而不需要客戶端以一定的時間去輪詢

6、Doctype作用？嚴格模式與混雜模式如果區分？意義？

宣告位於文件的最前面，在標籤之前。告知瀏覽器以何種模式來渲染文件

嚴格模式的排版和js運作模式是以該瀏覽器支援的最高標準運行

在混雜模式中，頁面已寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止網站無法運作

DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現

7、Doctype多少種文件類型？

此標籤可宣告三種DTD類型，分別表示嚴格版本、過渡版本以及基於框架的HTML文件

HTML4.01規定了三種文件類型：Strict, Transitional以及Frameset

XHTML 1.0規定了三種XML文件類型：Strict, Transitional以及Franmeset

Standards（標準）模式（也就是嚴格呈現模式）用來呈現遵循最新標籤的網頁，而Quirks（包容）模式（也就是鬆散呈現模式或相容模式）用來呈現為傳統瀏覽器而設計的網頁

8.HTML與XHTML，有什麼不同？

所有的標籤必須要有一個對應的結束標籤

所有標籤的元素和屬性的名字都必須使用小寫

所有的XML標記都必須合理嵌套

所有的屬性必須引號「」括起來

把所有的<和&特殊符號用編碼表示

給所有屬性賦一個值

不要在註解內容使用'--'

圖片必須要有說明文字

CSS

1、content-box和border-box ，為什麼看起來content-box比較合理，但還是常使用border-box?

content-box是W3C的標準盒子模型元素寬度padding border

border-box 是ie的怪異盒模型，他的元素寬度等於內容寬度內容寬度包含了padding和border

例如有時在元素基礎上添加內邊距padding或border會將佈局撐破但是使用border-box就可以輕鬆完成

2、實現三個DIV等分排在一行（考察border-box)

1.設定border-box width 33.33%

2.flexbox flex:1

3.實作兩欄佈局有哪些方法

方法一：##

*{
margin: 0;
padding:0;
}
html,body{
height: 100%;
}
#left{
width: 300%;
height: 100%;
 
float: left;
}
#right{
height: 100%;
margin-left: 300px;
background-color: #eee;
}

登入後複製

方法二：

*{
margin: 0;
padding: 0;
}
html,body{height: 100%;}
#left{
width: 300px;
height: 100%;
 
float: left;
}
#right{
height: 100%;
overflow: hidden;
backrgound-color: #eee;
}

登入後複製

以上第二種方法，利用建立一個新的BFC(區塊層級格式化剩下文)來防止文字環繞的原理來實現的。 BFC就是一個相對獨立的佈局環境，它內部元素的佈局不受外部佈局的影響。

它可以透過下一任和一種方式來建立

float的值不為none

position的值不為static 或relative

display的值為table-cell，table-caption，inline-block，flex，或inline-flex其中一個

overflow的值不為visible

##4、flex屬性值是多少？

flex屬性是flex-grow,flex-shrink 和flex-basis的簡寫

flex-grow屬性定義項目的放大比例，預設為0

## flex-shrink屬性定義了項目的縮小比例，預設為1

flex-basis屬性定義了項目的固定空間

5、怎麼實作一個DIV左上角到右下角的移動，有哪些方法？怎麼實現？

改變left值為window寬度-div寬度top值為window高度=div高度

jquery的animate方法

css3的transition

#6、垂直居中

單行行內元素

#可以設定padding-top,padding-bottom

將height和line-height設為相等

多行行內元素

#可以將元素轉為tabel樣式，再設定vertical-align:middle;

#使用flex佈局

區塊級元素

已知高度絕對定位負邊距

未知高度transform:translateY(-50%);

flex版面

display: flex;
justify-content: center;
aligin-items: center;

登入後複製

7、rem 和em的差別？

em相對於父元素，rem相對於根元素

8、清除浮動

利用clear屬性進行清理

父容器結尾插入空標籤

<div style="clear: both;"></div>

登入後複製

利用css偽元素：

.clearfix:after {
    content: ".";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
}

登入後複製

將父容器形成BFC

BFC能清理浮動主要運用的是它的佈局規則：

內部的Box會在垂直方向，一個接一個的放置

box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰box的margin會發生重疊

每個元素margin box的左邊，與包含快border box的左邊相接觸（對於從左往右的格式化，否則相反）。即使存在浮動也是如此

BFC的區域不會與float box重疊

BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也是如此

計算BFC的高度時，浮動元素也參與計算

觸發BFC有哪一種方法？

根元素

float屬性不為none

#position為absolute或fixed

display為inline-block，table-cell，table -caption，flex，inline-flex

overflow不為visible

#9、position的值， relative和absolute分別是相對於誰進行定位的？

relative:相對定位，相對於自己本身在正常文件流程中的位置進行定位。

absolute:產生絕對定位，相對於最近一級定位不為static的父元素進行定位。

fixed: （舊版IE不支援）產生絕對定位，相對於瀏覽器視窗或frame進行定位。

static:預設值，沒有定位，元素出現在正常的文件流中。

sticky:產生黏性定位的元素，容器的位置根據正常文件流計算得出。

10、CSS 選擇符有哪些？哪些屬性可以繼承？優先權演算法如何計算？ CSS3新增偽類有那些？

選擇符：

id選擇器（#myId）

類別選擇器（.myClassName）

標籤選擇器（div,p,h1）

相鄰選擇器（h1 p）

子選擇器（ul > li）

後代選擇器（li a）

通配符選擇器（*）

屬性選擇器（button[disabled="true"]）

偽類別選擇器（a:hover,li: nth-child）

優先權

!important > 行内样式（比重1000） > id（比重100） > class/属性（比重10） > tag / 伪类（比重1）;

11、介绍sass

　　定义变量css嵌套，允许在代码中使用算式，支持if判断for循环

12、transition 和 margin的百分比根据什么计算？

　　transition是相对于自身；margin相对于参照物

13、display:none和visibility:hidden的区别？

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

15、CSS中link 和@import的区别是？

link属于HTML标签，而@import是CSS提供的;

页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;

import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

link方式的样式的权重高于@import的权重.

1、介绍一下闭包和闭包常用场景？

使用闭包主要为了设计私有的方法和变量，闭包的有点事可以避免变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念。

闭包有三个特性：

函数嵌套函数

函数内部可以引用外部的参数和变量

参数和变量不会被垃圾回收机制回收

闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包常见方式，就是在一个函数的内部创建另一个函数

应用场景，设置私有变量的方法

不适用场景：返回闭包的函数是个非常大的函数

闭包的缺点就是常驻内存，会增大内存使用量，使用不当会造成内存泄漏

2、为什么会出现闭包这种东西？解决了什么问题？

受javascript链式作用域链的影响，父级变量中无法访问到子级的变量值

3、介绍一下你所了解的作用域链，作用域链的尽头是什么？为什么？

每一个函数都有一个作用域，比如创建了一个函数，函数里面又包含了一个函数，那么现在又三个作用域，这样就形成了一个作用域链

作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域链网上找

4、ajax创建的过程是怎样的，主要用到哪些状态码？

创建XMLHttpRequest对象，也就是创建一个异步调用对象

创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息

设置响应HTTP请求状态变化函数

发送HTTP请求

获取异步调用返回的数据

使用javascript和DOM实现局部刷新

var xmlHttp = new XMLHttpRequest();
xmlHttp.open(&#39;GET&#39;,&#39;demo.php&#39;,&#39;true&#39;);
xmlHttp.send()
xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState === 4 & xmlHttp.status === 200){
 }
}

登入後複製

5、事件委托

利用冒泡原理，把时间加到父级上，触发执行效果

可以大量节省内存占用，减少事件注册

可以方便地动态添加和修改元素，不需要因为元素的改动而修改时间绑定

var ul = document.querySelector(&#39;ul&#39;); 
var list = document.querySelectorAll(&#39;ul li&#39;); 
ul.addEventListener(&#39;click&#39;, function(ev){ 
    var ev = ev || window.event; 
    var target = ev.target || ev.srcElemnt; 
    for(var i = 0, len = list.length; i < len; i++){ 
        if(list[i] == target){ 
            alert(i + "----" + target.innerHTML); 
        } 
    } 
});

登入後複製

6、javascript的内存回收机制？

垃圾回收器会每隔一段时间找出那些不再使用的内存，然后为其释放内存

一般使用标记清除方法当变量进入环境标记为进入环境，离开环境标记为离开环境

还有引用计数方法

stack为自动分配的内存空间，它由系统自动释放；而heap则是动态分配的内存，大小不定也不会自动释放

基本数据类型存放在栈中

引用类型存放在堆内存中，首先从栈中获得该对象的地址指针，然后再从堆内存中取得所需的数据

7、javascript中的this是什么，有什么用，指向上面？

全局代码中的this是指向全局对象

作为对象的方法调用时指向调用这个函数的对象

作为构造函数指向创建的对象

使用apply和call设置this

8、判断数组有哪些方法？

a instanceof Array

a.constructor == Array

Object.protype.toString.call(a) == [Object Array]

9、严格模式的特性？

对javascript的语法和行为，都做了一些改变

全局变量必须显式的声明

对象不能有重名的属性

函数必须声明在顶层

消除js语法的一些不合理，不严谨之处，减少一些怪异行为

消除代码运行的一些不安全之处，保证代码运行的安全

提高编译效率，增加运行速度

为未来新版本的js做好铺垫

10、js的原型链，如何实现继承？

function foo(){};
foo.prototype.z = 3;var obj = new foo();
obj.x = 1;
obj.y = 2;
obj.x //1
obj.y //2
obj.z //3

登入後複製

11、图片懒加载

当页面滚动的时间被触发->执行加载图片操作->判断图片是否在可视区域内->在，则动态将data-src的值赋予该图片

12、webpack常用到哪些功能？

设置入口

设置输出目录

设置loader

extract-text-webpack-plugin将css从js代码中抽出并合并

处理图片文字等功能

解析jsx解析bable

13、函数组合继承

原型继承，构造函数继承，call apply继承

var super = function(name){    this.name = name;
}
super.prototype.func1 = function() {console.log(&#39;func1&#39;)}var sub = function(name, age){
    super.call(this, name);    this.age = age;
}
sub.prototype = new super()&#39;

登入後複製

14、对作用域链的理解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序耳朵，作用域链额变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的

15、js垃圾回收方法

标记清除（mark and sweep）

这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。

垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了

引用计数(reference counting)

在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。

在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的，也就是说只要涉及BOM及DOM就会出现循环引用问题。

16、js继承方式及其优缺点

原型链继承的缺点

一是字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数

借用构造函数（类试继承）

借用构造函数虽然解决了刚才两种问题，但是没有原型，则复用无从谈起，需要原型链+借用构造函数的模式，这种模式成为组合继承

组合式继承

组合式继承是比较常用的一种继承方法，其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承，这样，即通过在原型上定义方法实现了函数复用，有保证每个实例都有它自己的属性

ES6

1、let和const的区别？

let声明的变量可以改变，值和类型都可以改变，没有限制

const声明的变量不得改变值