前端基礎高頻面試題(更新中)
頁面渲染的全過程
輸入url後，先拿到html文件，html下載完之後會開始對它進行解析css
html在解析的過程當中，若是文本里有外部資源連接，好比css、js和img時，會當即啓用其餘線程下載這些靜態資源。html
特殊的是當遇到js文件的時候，html解析會停下來，等js文件下載結束而且執行完，再進行html執行。前端
在html解析的同時，解析器會把解析完的html轉化成DOM對象，構建成DOM樹。html5
當css下載完，css解析器開始對css解析，把css解析成css對象，把css組裝起來，構建CSSOM樹。web
DOM和CSSOM樹構建完畢，瀏覽器根據兩棵樹建一顆渲染樹。正則表達式
HTML
Hyper Text Markup Language 超文本標記語言chrome
html5爲何只須要寫<! DOCTYPE HTML>
答:這是w3c制定的規則,是文檔類型聲明,語義化說是告訴瀏覽器和其餘開發者,這個文檔使用的是html5標準。canvas
2.html5新特性有哪些
答:header、footer、aside、nav、video、audio、canvas、localStorage、sessionStorage、cookie、output、datalist、keygen、data、time、email、url、search···windows
< img > 的 title 和 alt 有什麼區別？
答： alt 是圖片加載失敗時，顯示在網頁上的替代文字；數組
title 是鼠標放上面時顯示的文字。
這些都是表面上的區別，alt是img必要的屬性，而title不是。
XHTML和HTML有什麼區別
答:XHTML:
1)全部的標記都必須有一個相應的結束標記;
2)全部標籤的元素和屬性的名字都必須使用小寫;
3)全部的XHTML標記都必須合理嵌套;
4)全部的屬性都必須用引號""括起來;
5)XHTML文檔必須擁有根元素。
如何在 html 頁面上展現 < div> < /div> 這幾個字符
答：使用忽略HTML標記< xmp>，
如：<p><xmp><div></div></xmp></p>
複製代碼
什麼是漸進式渲染
答:指打開頁面先加載首頁顯示內容;,以後再隨着時間或者滾動頁面進行後面的加載。
前端頁面有哪三層構成,分別是什麼?做用是什麼?
結構標準:製做網頁按照html標準結構寫網頁;
表現標準:用來美化網頁CSS;
行爲標準:用來實現網頁中用戶的動做處理JavaScript。
瀏覽器的內核有哪些
答:
Trident(IE內核):IE、騰訊TT、獵豹安全瀏覽器、360極速瀏覽器、百度瀏覽器等;
Gecko(firefox):火狐瀏覽器
webkit(Safari):Apple
Blink:谷歌瀏覽器
什麼是語義化的HTML
答:就是寫出的HTML代碼符合內容的結構,選擇合適的標籤,可以便於開發者閱讀和寫出更優雅的代碼,好比頁面結構寫頂部用header標籤,導航有nav標籤等,同時也讓瀏覽器的爬蟲和機器更好的解析。
實體字符
CSS
Cascading Style Sheets 層疊樣式表
特性
層疊性、繼承性、優先級
塊級元素
特色:塊級獨佔一行;能夠設置寬高;若是沒設置寬度,那麼其寬度等於父元素的寬度。
好比:div,p,ul,ol,dl,li,dd,h1-h6
轉換:display:block;
行內元素
特色:都在一行顯示,不能設置寬度和高度。
好比:a b em font i img input br label span small select textarea
轉換:display:inline
行內塊元素
特色:都在一行上顯示,能夠設置寬度和高度。
好比:
轉換:display:inline-block;
選擇器優先級
!important>行內樣式>id選擇器(#)>類選擇器(class)>標籤選擇器>通配符選擇器
CSS3新特性有哪些
答:顏色--RGBA、文字陰影--text-shadow、邊框圓角--border-radius、邊框陰影--box-shadow、盒子模型--box-sizing、設置背景圖片的尺寸--background-size、漸變--linear-gradient、過渡動畫--transition、媒體查詢多欄佈局、伸縮佈局、transform:translate···
清除浮動的幾種方式
1)父級div設置height;
2)結尾處加空div標籤clear:both;
3)父級div定義僞類:after和zoom;
4)父級div定義overflow:hidden或者auto;
link和@import有什麼區別
@import引用的css會等到頁面被加載完畢後再加載，link在頁面加載時會同時被加載。
link是html標籤，無兼容問題。link方式的樣式權重高於@import
transition和animation的區別
他們都是隨時間改變元素的屬性值，主要區別是transition須要觸發一個事件才能改變屬性，而animation不需觸發任何事件就會隨時間改變屬性值。
meta viewport標籤相關
<!DOCTYPE html> H5標準聲明，使用 HTML5 doctype，不區分大小寫
<head lang=」en」> 標準的 lang 屬性寫法
<meta charset=’utf-8′> 聲明文檔使用的字符編碼,防亂碼
<meta http-equiv=」X-UA-Compatible」 content=」IE=edge,chrome=1″/> 優先使用 IE 最新版本和 Chrome
<meta name=」description」 content=」不超過150個字符」/> 頁面描述
<meta name=」keywords」 content=」」/> 頁面關鍵詞
<meta name=」author」 content=」name, email@gmail.com」/> 網頁做者
<meta name=」robots」 content=」index,follow」/> 搜索引擎抓取
<meta name=」viewport」 content=」initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no」> 爲移動設備添加 viewport
<meta name=」apple-mobile-web-app-title」 content=」標題」> iOS 設備 begin
<meta name=」apple-mobile-web-app-capable」 content=」yes」/> 添加到主屏後的標題（iOS 6 新增）
是否啓用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄
<meta name=」apple-itunes-app」 content=」app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL」>
添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）
<meta name=」apple-mobile-web-app-status-bar-style」 content=」black」/>
<meta name=」format-detection」 content=」telphone=no, email=no」/> 設置蘋果工具欄顏色
<meta name=」renderer」 content=」webkit」> 啓用360瀏覽器的極速模式(webkit)
<meta http-equiv=」X-UA-Compatible」 content=」IE=edge」> 避免IE使用兼容模式
<meta http-equiv=」Cache-Control」 content=」no-siteapp」 /> 不讓百度轉碼
<meta name=」HandheldFriendly」 content=」true」> 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓
<meta name=」MobileOptimized」 content=」320″> 微軟的老式瀏覽器
<meta name=」screen-orientation」 content=」portrait」> uc強制豎屏
<meta name=」x5-orientation」 content=」portrait」> QQ強制豎屏
<meta name=」full-screen」 content=」yes」> UC強制全屏
<meta name=」x5-fullscreen」 content=」true」> QQ強制全屏
<meta name=」browsermode」 content=」application」> UC應用模式
<meta name=」x5-page-mode」 content=」app」> QQ應用模式
<meta name=」msapplication-tap-highlight」 content=」no」> windows phone 點擊無高光
設置頁面不緩存
<meta http-equiv=」pragma」 content=」no-cache」>
<meta http-equiv=」cache-control」 content=」no-cache」>
<meta http-equiv=」expires」 content=」0″>
複製代碼
< meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
詳細的描述一下position
1)position:absolute--絕對定位的元素,相對於其父元素進行定位。
2)position:relative--生成相對定位的元素,相對於其正常位置進行定位。
3)position:fixed--固定定位,相對於瀏覽器窗口進行定位。
4)position:static--默認值,沒有定位,元素在正常的文檔流
JavaScript
JavaScript的組成
1)ECMAScript:是JS的核心,描述了語言的基本語法和數據類型,是JS的語法規範
2)BOM:瀏覽器對象模型,經過BOM能夠操做瀏覽器窗口,如:彈出框
3)DOM:文檔對象模型,一套操做頁面元素的API
JavaScript的輸入、輸出方式
輸出:
1)alert() --彈出一個提示框(提示/警告文字)
2)document.write() --會將輸入的內容放置到body標籤內部,做爲html內容
3)console.log() --代碼後臺
輸入:
prompt('提示文字', 默認值);
對象的建立方式
1)對象字面量
var o = {
name: 'jay',
age: 18,
sex: true,
sayHi: function () {
console.log(this.name);
}
};
複製代碼
2)new Object()建立對象
var person = new Object();
person.name = 'Jolin';
person.age = 16;
person.job = 'actor';
person.sayHi = function() {
console.log('Hello,everyBody');
}
複製代碼
3)工廠函數建立對象
function createPerson(name, age, job) {
var person = new Object();
person.name = name;
person.age = age;
person.job = job;
person.sayHi = function(){
console.log('Hello,everybody');
}
return person;
}
var p1 = createPerson('Jay', 18, 'actor');
複製代碼
4)自定義構造函數
function Person(name, age, job){
this.name = name; //this是關鍵字，這裏表明「本身」，「當前對象」
this.age = age;
this.job = job;
this.sayHi = function(){
console.log('Hello,everybody');
}
}
var p1 = new Person('Jay', 18, 'actor');
複製代碼
new關鍵字運行機制
1)new會在內存中建立一個新的空對象
2)new會讓this指向這個新的對象
3)執行構造函數 目的是給這個新對象加屬性和方法
4)new會返回這個新對象
this的使用場景
1)普通函數調用時,指向全局window
2)構造函數調用時,指向實例對象
3)對象方法調用時,指向該方法的對象
4)事件綁定時,指向綁定事件的對象
5)箭頭函數中this指向外部函數做用域的this
==和===有什麼區別
=是賦值
==（相等）返回一個布爾值，相等返回true，不相等返回false，容許不一樣數據類型的轉換。
===（全等）只要數據類型不同，就會返回false。
JavaScript內置對象之Math(求絕對值,取整,隨機數)
Math.random() 生成一個0-1之間的隨機小數
Math.floor()/Math.ceil() 向下取整/向上取整
Math.round() 取整,四捨五入
Math.abs() 絕對值
Math.max()/Math.min() 求最大值/最小值
Math.sin()/Math.cos() 正弦/餘弦
Math.pow/Math.sqrt() 求指數次冪/求平方根
JavaScript內置對象之Date(處理時間和日期,基於1970年1月1日)
getTime() 返回毫秒數和valueOf()結果同樣
getMilliseconds()
getSeconds() 返回0-59
getMinutes() 返回0-59
getHours() 返回0-23
getDay() 返回星期幾 0表明是週日 6表明是週六
getDate() 返回當前月的第幾天
getMonth() 返回月份,從0開始
getFullYear() 返回4位的年份 如 2016
JavaScript內置對象之Array
push()/pop() 加入數組的末端/刪除數組的最後一項
unshift()/shift() 在數組最前面插入項/刪除數組中前面項
reverse() 翻轉數組
sort() 根據字符,從小到大排序
slice() 從當前數組中截取一個新的數組，不影響原來的數組，參數start從0開始,end從1開始
splice() 刪除或替換當前數組的某些項目，參數start, deleteCount, options(要替換的項目)
indexOf() 索引位置
forEach() 遍歷數組不返回值,返回參數
join() 把數組中的全部元素放入一個字符串
JavaScript內置對象之String
concat() 拼接字符串,等效於'+','+'更經常使用
slice(start,end) 從start位置開始,截取到end位置,end取不到
substring() 方法同slice
substr(start,length) 從start位置開始,截取到length個字符,若是沒有length參數,則截取到最後
toUpperCase() 轉換爲大寫
toLowerCase() 轉換爲小寫
search() 查找,返回找到的位置
replace() 替換,注意:一次只能替換一個
split() 將字符串以指定的字符分割爲數組
JavaScript中動態操做DOM的方法
createElement 建立一個元素節點
creatTextNode 建立一個文本節點
appendChild 向元素的末尾追加一個節點
inserBefore(a,b) 意思是a節點會插入b節點的前面
removeChild 刪除一個子節點
cloneChild 複製節點,接收布爾值參數,true表示深複製(複製節點及其全部子節點),false表示淺複製(複製節點自己,不復制子節點)
replaceChild 替換節點
document.getElementsByTagName() 經過標籤名稱查找節點
document.getElementsByName() 經過元素的Name屬性的值查找節點
document.getElementById() 經過元素ID查找節點
事件的三個階段,如何阻止事件冒泡
答:目標、捕獲、冒泡
event.stopPropagation
call,apply,bind有什麼區別
三者都是用來改變函數的this對象指向，調用其方法改變函數執行的上下文，從而改變this指向。
call()和apply()的第一個參數相同,是指定的對象,這個對象是該函數的執行上下文
call()能夠接受多個參數，在第一個參數以後的後續全部參數就是傳入該函數的值
apply()只有兩個參數,第一個是對象,第二個是數組
bind()不會當即執行該函數,他的參數和call()相同
閉包函數
1.什麼是閉包?
當函數執行時,首先會造成一個私有做用域,這個私有做用域保護私有變量不收外界的干擾,咱們把這個體制稱爲閉包。閉包是指有權訪問另外一個函數做用域中變量的函數。
2.閉包優勢:
1)保護函數內的變量安全,增強了封裝性;
2)在內存中維持一個變量,方便調用上下文的局部變量;
3.閉包缺點:
1)內存消耗;
2)濫用閉包函數會形成內存泄露,不能被垃圾回收機制所回收。
遞歸函數
1.什麼是遞歸函數
答:遞歸函數即自調用函數,在函數體內直接或者調用本身自己函數
2.遞歸函數的優勢
答:代碼更加簡潔清晰,可讀性更好
3.遞歸函數的缺點
答:大量使用遞歸函數,會消耗空間,形成系統卡頓,非必要時建議不要使用遞歸函數。
面向對象和麪向過程
答:面向對象:開發過程當中分析大致步驟,找到輔助的開發工具
面向過程:開發過程當中專一於每一個功能的具體實現方式
面向對象的三個特徵
封裝性:多個相同操做的功能封裝到一個對象中
繼承性:讓功能複用
多態性:加強功能使用性靈活性
正則表達式
答:對字符串進行操做的一組工具,做用:匹配,替換,提取功能
/^$/ 這個是個通用的格式。
^ 匹配輸入字符串的開始位置；$匹配輸入字符串的結束位置
*匹配前面的子表達式零次或屢次；
+匹配前面的子表達式一次或屢次；
?匹配前面的子表達式零次或一次；
\d 匹配一個數字字符，等價於[0-9]
校驗11位手機號案例:
function checkPhone(){
var phone = document.getElementById('phone').value;
if(!(/^1[35678]\d{9}$/.test(phone))){
alert("手機號碼有誤，請從新填寫");
return false;
}
}
複製代碼
校驗郵箱案例:
function isEmail(str){
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
return reg.test(str);
}
複製代碼
原型三者關係
實例對象：實例對象都具備__proto__,就是原型對象
原型對象：原型對象都具備constructor屬性，就是構造函數
構造函數：構造函數都具備prototype屬性，就是原型對象
如何在JS中清空數組
如：var list = [1,2,3,4]
複製代碼
- 方法一：
list= [];
//設置一個新的空數組，若是從另外一個變量引用到這個數組，那麼原始的引用數組將保持不變。
複製代碼
- 方法二：
list.length=0;
//這種方式會更新指向原始數組的全部引用變量。
複製代碼
- 方法三：
list.splice（0,list.length）;
//也將更新對原始數組的全部引用。
複製代碼
- 方法四：
while(list.length){
list.pop();
};
//不建議常用該方式。
複製代碼
JS中的轉義字符是什麼
可以在不破壞應用程序的狀況下編寫特殊字符，轉義字符（\）用於處理特殊字符，如單引號、雙引號、撇號和&號，在字符前放置。
如：console.log(" I am a \"beautiful\"girl")
複製代碼
- 1. 前端高頻面試題
- 2. 最新前端中高級面試題
- 3. 前端面試題-基礎
- 4. 前端基礎面試題
- 5. Day2 - 前端高頻面試題之基礎版
- 6. Day3 - 前端高頻面試題之基礎版
- 7. Day1 - 前端高頻面試題之基礎版
- 8. 初級前端 Vue 高頻基礎面試題
- 9. 前端最新面試題網絡基礎知識篇（持續更新中）
- 10. c++面試高頻題--持續更新
- 更多相關文章...
- • ADO 更新記錄 - ADO 教程
- • Kotlin 基礎語法 - Kotlin 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
- 1. 前端高頻面試題
- 2. 最新前端中高級面試題
- 3. 前端面試題-基礎
- 4. 前端基礎面試題
- 5. Day2 - 前端高頻面試題之基礎版
- 6. Day3 - 前端高頻面試題之基礎版
- 7. Day1 - 前端高頻面試題之基礎版
- 8. 初級前端 Vue 高頻基礎面試題
- 9. 前端最新面試題網絡基礎知識篇（持續更新中）
- 10. c++面試高頻題--持續更新