前端面試題集錦

時間 2019-11-12

標籤端面試題集錦简体版

原文原文鏈接

1、概念基礎：

一、HTML

HTML（HyperText Markup Language），即超文本標記語言。HTML文本是由 HTML命令組成的描述性文本，HTML 命令能夠說明文字、圖形、動畫、聲音、表格、連接等。 HTML的結構包括頭部 (Head)、主體 (Body) 兩大部分。頭部描述瀏覽器所需的信息，主體包含所要說明的具體內容。javascript

什麼是HTML5？css

html5是最新的html標準，它的主要目標是提供全部內容而不須要任何的像flash、silverlight等的額外插件這些內容來自動畫、視頻、富GUI等。html

html5是萬維網聯盟（W3C）和網絡超文本應用技術工做組（ＷＨＡＴＷＧ）之間合做輸出的。前端

HTML5新元素標籤：<header>、<footer>、<nav>、<article>、<section >、html5

２、CSS

CSS（Cascading Style Sheets），即層疊樣式表。java

什麼是CSS3？算法

CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的。之前的規範做爲一個模塊實在是太龐大並且比較複雜，因此，把它分解爲一些小的模塊，更多新的模塊也被加入進來。這些模塊包括：盒子模型、列表模塊、超連接方式、語言模塊、背景和邊框、文字特效、多欄佈局等。數組

三、JS

JS（JavaScript），即一種基於對象和事件驅動而且具備相對安全性的客戶端腳本語言。瀏覽器

經常使用的JS庫有：安全

JQuery.js、Zepto.js

四、CSS Sprite CSS雪碧圖生成工具

css精靈，一種網頁圖片應用處理方式。將全部零星圖片整合到一張大圖中。

優勢：減小網頁的http請求；減小圖片的字節；解決圖片命名困擾、更換風格方便，維護方便。

缺點：圖片不夠寬時容易出現背景斷裂；合成圖片比較繁瑣；改動時，須要改整張合併的圖片。

五、什麼是響應式佈局

一個網站可以兼容多個終端，而不是爲每一個終端作一個特定的版本。

推薦框架：Bootstrap

或者用CSS的媒體查詢屬性控制某個分辨率下的頁面樣式：

@media only screen and (min-width: 100px) and (max-width: 300px){
  //當前分辨率下的樣式
}

六、什麼是事件流

從頁面接受事件的順序。

當一個事件產生時，這個事件的傳播過程就是事件流。

七、瀏覽器內核

Trident	IE內核
Gecko	Firefox內核
Presto	Opera前內核（已廢棄）Opera現已改用Google Chrome的Blink內核
Webkit	Safari內核，Chrome內核原型

八、JS有哪些數據類型

string、int、float、bool、object、array（數組）、null、undefined

2、技術題：

一、CSS元素垂直居中的方法

http://www.javashuo.com/article/p-tngicsfd-u.html

二、前端性能優化的方法

http://www.cnblogs.com/lei2007/archive/2013/08/16/3262897.html

三、CSS清楚浮動的方法

（1）添加新元素，設置屬性：clear: both;

（2）父級div定義：overflow: auto;

（3）after方法：（！做用於浮動元素的父親）不經常使用

四、split和join的區別

join函數獲取一批字符串，而後用分隔符字符串將它們聯接起來，從而返回一個字符串。

split函數獲取一個字符串，而後在分隔符處將其斷開，從而返回一批字符串。

這兩個函數的主要區別在於：join可使用任何分隔符字符串將多個字符串聯接起來，而split只能使用一個字符分隔符將字符串斷開。

簡單的說，若是你用split，是把一串字符（根據某個分隔符）分紅若干個元素存在一個數組裏；而join是把數組中的字符串連成一個長串。

二者互爲逆向操做。

五、CSS選擇符有哪些？哪些屬性能夠繼承？優先級？

CSS選擇符有：類型選擇符（body）、羣組選擇符（h1，h2，h3，span）、包含選擇符（h2 span）、ID選擇符（#id）、Class選擇符（.content）

可繼承的有： CLASS屬性，僞類A標籤，列表ul、li、dl、dd、dt能夠繼承

優先級：遵循就近原則，樣式定義最近者爲準，載入樣式以最後載入的定位爲準，

！important > [ id > class > tag ]

六、經常使用排序算法有哪些？冒泡排序怎麼寫？

插入排序（直接插入排序、希爾排序）；

選擇排序（簡單選擇排序、堆排序）；

交換排序（冒泡排序、快速排序）；

歸併排序；

基數排序

//冒泡排序-升序
var arr = [3,1,6,23,2,5,10,9];
for(var x = 0; x < arr.length; x++){
   for(var y = x+1; y < arr.length; y++){
      if(arr[x] > arr[y]){
         var temp = arr[x];
         arr[x] = arr[y];
         arr[y] = temp;
      }
   }
}
console.log(arr);

//冒泡排序-降序
var arr = [3,1,6,23,2,5,10,9];
for(var x = 0; x < arr.length; x++){
   for(var y = x+1; y < arr.length; y++){
      if(arr[x] < arr[y]){
         var temp = arr[x];
         arr[x] = arr[y];
         arr[y] = temp;
      }
   }
}
console.log(arr);