頁(yè)面渲染的全過(guò)程

輸入url后，先拿到html文件，html下載完以后會(huì)開(kāi)始對(duì)它進(jìn)行解析

html在解析的過(guò)程中，如果文本里有外部資源鏈接，比如css、js和img時(shí)，會(huì)立即啟用其他線程下載這些靜態(tài)資源。

特殊的是當(dāng)遇到j(luò)s文件的時(shí)候，html解析會(huì)停下來(lái)，等js文件下載結(jié)束并且執(zhí)行完，再進(jìn)行html執(zhí)行。

在html解析的同時(shí)，解析器會(huì)把解析完的html轉(zhuǎn)化成DOM對(duì)象，構(gòu)建成DOM樹(shù)。

當(dāng)css下載完，css解析器開(kāi)始對(duì)css解析，把css解析成css對(duì)象，把css組裝起來(lái)，構(gòu)建CSSOM樹(shù)。

DOM和CSSOM樹(shù)構(gòu)建完畢，瀏覽器根據(jù)兩棵樹(shù)建一顆渲染樹(shù)。

HTML

Hyper Text Markup Language 超文本標(biāo)記語(yǔ)言

html5為什么只需要寫(xiě)

答:這是w3c制定的規(guī)則,是文檔類(lèi)型聲明,語(yǔ)義化說(shuō)是告訴瀏覽器和其他開(kāi)發(fā)者,這個(gè)文檔使用的是html5標(biāo)準(zhǔn)。

2.html5新特性有哪些

答:header、footer、aside、nav、video、audio、canvas、localStorage、sessionStorage、cookie、output、datalist、keygen、data、time、email、url、search···

< img > 的 title 和 alt 有什么區(qū)別？

答： alt 是圖片加載失敗時(shí)，顯示在網(wǎng)頁(yè)上的替代文字；

title 是鼠標(biāo)放上面時(shí)顯示的文字。

這些都是表面上的區(qū)別，alt是img必要的屬性，而title不是。

XHTML和HTML有什么區(qū)別

答:XHTML:

1)所有的標(biāo)記都必須有一個(gè)相應(yīng)的結(jié)束標(biāo)記;

2)所有標(biāo)簽的元素和屬性的名字都必須使用小寫(xiě);

3)所有的XHTML標(biāo)記都必須合理嵌套;

4)所有的屬性都必須用引號(hào)""括起來(lái);

5)XHTML文檔必須擁有根元素。

如何在 html 頁(yè)面上展示 < div> < /div> 這幾個(gè)字符

答：使用忽略HTML標(biāo)記< xmp>，

如：

什么是漸進(jìn)式渲染

答:指打開(kāi)頁(yè)面先加載首頁(yè)顯示內(nèi)容;,之后再隨著時(shí)間或者滾動(dòng)頁(yè)面進(jìn)行后面的加載。

前端頁(yè)面有哪三層構(gòu)成,分別是什么?作用是什么?

結(jié)構(gòu)標(biāo)準(zhǔn):制作網(wǎng)頁(yè)按照html標(biāo)準(zhǔn)結(jié)構(gòu)寫(xiě)網(wǎng)頁(yè);

表現(xiàn)標(biāo)準(zhǔn):用來(lái)美化網(wǎng)頁(yè)CSS;

行為標(biāo)準(zhǔn):用來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)中用戶(hù)的動(dòng)作處理JavaScript。

瀏覽器的內(nèi)核有哪些

答:

Trident(IE內(nèi)核):IE、騰訊TT、獵豹安全瀏覽器、360極速瀏覽器、百度瀏覽器等;

Gecko(firefox):火狐瀏覽器

webkit(Safari):Apple

Blink:谷歌瀏覽器

我自己是一名從事了多年開(kāi)發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

什么是語(yǔ)義化的HTML

答:就是寫(xiě)出的HTML代碼符合內(nèi)容的結(jié)構(gòu),選擇合適的標(biāo)簽,能夠便于開(kāi)發(fā)者閱讀和寫(xiě)出更優(yōu)雅的代碼,比如頁(yè)面結(jié)構(gòu)寫(xiě)頂部用header標(biāo)簽,導(dǎo)航有nav標(biāo)簽等,同時(shí)也讓瀏覽器的爬蟲(chóng)和機(jī)器更好的解析。

實(shí)體字符

CSS

Cascading Style Sheets 層疊樣式表

特性

層疊性、繼承性、優(yōu)先級(jí)

塊級(jí)元素

特點(diǎn):塊級(jí)獨(dú)占一行;可以設(shè)置寬高;如果沒(méi)設(shè)置寬度,那么其寬度等于父元素的寬度。

比如:div,p,ul,ol,dl,li,dd,h1-h6

轉(zhuǎn)換:display:block;

行內(nèi)元素

特點(diǎn):都在一行顯示,不能設(shè)置寬度和高度。

比如:a b em font i img input br label span small select textarea

轉(zhuǎn)換:display:inline

行內(nèi)塊元素

特點(diǎn):都在一行上顯示,可以設(shè)置寬度和高度。

比如:

轉(zhuǎn)換:display:inline-block;

選擇器優(yōu)先級(jí)

!important>行內(nèi)樣式>id選擇器(#)>類(lèi)選擇器(class)>標(biāo)簽選擇器>通配符選擇器

CSS3新特性有哪些

答:顏色--RGBA、文字陰影--text-shadow、邊框圓角--border-radius、邊框陰影--box-shadow、盒子模型--box-sizing、設(shè)置背景圖片的尺寸--background-size、漸變--linear-gradient、過(guò)渡動(dòng)畫(huà)--transition、媒體查詢(xún)多欄布局、伸縮布局、transform:translate···

清除浮動(dòng)的幾種方式

1)父級(jí)div設(shè)置height;

2)結(jié)尾處加空div標(biāo)簽clear:both;

3)父級(jí)div定義偽類(lèi):after和zoom;

4)父級(jí)div定義overflow:hidden或者auto;

link和@import有什么區(qū)別

@import引用的css會(huì)等到頁(yè)面被加載完畢后再加載，link在頁(yè)面加載時(shí)會(huì)同時(shí)被加載。

link是html標(biāo)簽，無(wú)兼容問(wèn)題。link方式的樣式權(quán)重高于@import

transition和animation的區(qū)別

他們都是隨時(shí)間改變?cè)氐膶傩灾?#xff0c;主要區(qū)別是transition需要觸發(fā)一個(gè)事件才能改變屬性，而animation不需觸發(fā)任何事件就會(huì)隨時(shí)間改變屬性值。

meta viewport標(biāo)簽相關(guān)

H5標(biāo)準(zhǔn)聲明，使用 HTML5 doctype，不區(qū)分大小寫(xiě) 標(biāo)準(zhǔn)的 lang 屬性寫(xiě)法 聲明文檔使用的字符編碼,防亂碼 優(yōu)先使用 IE 最新版本和 Chrome 頁(yè)面描述 頁(yè)面關(guān)鍵詞 網(wǎng)頁(yè)作者 搜索引擎抓取 為移動(dòng)設(shè)備添加 viewport iOS 設(shè)備 begin 添加到主屏后的標(biāo)題(iOS 6 新增)是否啟用 WebApp 全屏模式，刪除蘋(píng)果默認(rèn)的工具欄和菜單欄添加智能 App 廣告條 Smart App Banner(iOS 6+ Safari) 設(shè)置蘋(píng)果工具欄顏色 啟用360瀏覽器的極速模式(webkit) 避免IE使用兼容模式 不讓百度轉(zhuǎn)碼 針對(duì)手持設(shè)備優(yōu)化，主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器，比如黑莓 微軟的老式瀏覽器 uc強(qiáng)制豎屏 QQ強(qiáng)制豎屏 UC強(qiáng)制全屏 QQ強(qiáng)制全屏 UC應(yīng)用模式 QQ應(yīng)用模式 windows phone 點(diǎn)擊無(wú)高光設(shè)置頁(yè)面不緩存

< meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

詳細(xì)的描述一下position

1)position:absolute--絕對(duì)定位的元素,相對(duì)于其父元素進(jìn)行定位。

2)position:relative--生成相對(duì)定位的元素,相對(duì)于其正常位置進(jìn)行定位。

3)position:fixed--固定定位,相對(duì)于瀏覽器窗口進(jìn)行定位。

4)position:static--默認(rèn)值,沒(méi)有定位,元素在正常的文檔流

JavaScript

JavaScript的組成

1)ECMAScript:是JS的核心,描述了語(yǔ)言的基本語(yǔ)法和數(shù)據(jù)類(lèi)型,是JS的語(yǔ)法規(guī)范

2)BOM:瀏覽器對(duì)象模型,通過(guò)BOM可以操作瀏覽器窗口,如:彈出框

3)DOM:文檔對(duì)象模型,一套操作頁(yè)面元素的API

JavaScript的輸入、輸出方式

輸出:

1)alert() --彈出一個(gè)提示框(提示/警告文字)

2)document.write() --會(huì)將輸入的內(nèi)容放置到body標(biāo)簽內(nèi)部,作為html內(nèi)容

3)console.log() --代碼后臺(tái)

輸入:

prompt('提示文字', 默認(rèn)值);

對(duì)象的創(chuàng)建方式

1)對(duì)象字面量

var o = { name: 'jay', age: 18, sex: true, sayHi: function () { console.log(this.name); }};

2)new Object()創(chuàng)建對(duì)象

var person = new Object();person.name = 'Jolin';person.age = 16;person.job = 'actor';person.sayHi = function() { console.log('Hello,everyBody');}

3)工廠函數(shù)創(chuàng)建對(duì)象

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)自定義構(gòu)造函數(shù)

function Person(name, age, job){ this.name = name;//this是關(guān)鍵字，這里代表“自己”，“當(dāng)前對(duì)象” this.age = age; this.job = job; this.sayHi = function(){ console.log('Hello,everybody'); }}var p1 = new Person('Jay', 18, 'actor');

new關(guān)鍵字運(yùn)行機(jī)制

1)new會(huì)在內(nèi)存中創(chuàng)建一個(gè)新的空對(duì)象

2)new會(huì)讓this指向這個(gè)新的對(duì)象

3)執(zhí)行構(gòu)造函數(shù) 目的是給這個(gè)新對(duì)象加屬性和方法

4)new會(huì)返回這個(gè)新對(duì)象

this的使用場(chǎng)景

1)普通函數(shù)調(diào)用時(shí),指向全局window

2)構(gòu)造函數(shù)調(diào)用時(shí),指向?qū)嵗龑?duì)象

3)對(duì)象方法調(diào)用時(shí),指向該方法的對(duì)象

4)事件綁定時(shí),指向綁定事件的對(duì)象

5)箭頭函數(shù)中this指向外部函數(shù)作用域的this

==和===有什么區(qū)別

=是賦值

==(相等)返回一個(gè)布爾值，相等返回true，不相等返回false，允許不同數(shù)據(jù)類(lèi)型的轉(zhuǎn)換。

===(全等)只要數(shù)據(jù)類(lèi)型不一樣，就會(huì)返回false。

JavaScript內(nèi)置對(duì)象之Math(求絕對(duì)值,取整,隨機(jī)數(shù))

Math.random() 生成一個(gè)0-1之間的隨機(jī)小數(shù)

Math.floor()/Math.ceil() 向下取整/向上取整

Math.round() 取整,四舍五入

Math.abs() 絕對(duì)值

Math.max()/Math.min() 求最大值/最小值

Math.sin()/Math.cos() 正弦/余弦

Math.pow/Math.sqrt() 求指數(shù)次冪/求平方根

JavaScript內(nèi)置對(duì)象之Date(處理時(shí)間和日期,基于1970年1月1日)

getTime() 返回毫秒數(shù)和valueOf()結(jié)果一樣

getMilliseconds()

getSeconds() 返回0-59

getMinutes() 返回0-59

getHours() 返回0-23

getDay() 返回星期幾 0代表是周日 6代表是周六

getDate() 返回當(dāng)前月的第幾天

getMonth() 返回月份,從0開(kāi)始

getFullYear() 返回4位的年份 如 2016

JavaScript內(nèi)置對(duì)象之Array

push()/pop() 加入數(shù)組的末端/刪除數(shù)組的最后一項(xiàng)

unshift()/shift() 在數(shù)組最前面插入項(xiàng)/刪除數(shù)組中前面項(xiàng)

reverse() 翻轉(zhuǎn)數(shù)組

sort() 根據(jù)字符,從小到大排序

slice() 從當(dāng)前數(shù)組中截取一個(gè)新的數(shù)組，不影響原來(lái)的數(shù)組，參數(shù)start從0開(kāi)始,end從1開(kāi)始

splice() 刪除或替換當(dāng)前數(shù)組的某些項(xiàng)目，參數(shù)start, deleteCount, options(要替換的項(xiàng)目)

indexOf() 索引位置

forEach() 遍歷數(shù)組不返回值,返回參數(shù)

join() 把數(shù)組中的所有元素放入一個(gè)字符串

JavaScript內(nèi)置對(duì)象之String

concat() 拼接字符串,等效于'+','+'更常用

slice(start,end) 從start位置開(kāi)始,截取到end位置,end取不到

substring() 方法同slice

substr(start,length) 從start位置開(kāi)始,截取到length個(gè)字符,如果沒(méi)有l(wèi)ength參數(shù),則截取到最后

toUpperCase() 轉(zhuǎn)換為大寫(xiě)

toLowerCase() 轉(zhuǎn)換為小寫(xiě)

search() 查找,返回找到的位置

replace() 替換,注意:一次只能替換一個(gè)

split() 將字符串以指定的字符分割為數(shù)組

JavaScript中動(dòng)態(tài)操作DOM的方法

createElement 創(chuàng)建一個(gè)元素節(jié)點(diǎn)

creatTextNode 創(chuàng)建一個(gè)文本節(jié)點(diǎn)

appendChild 向元素的末尾追加一個(gè)節(jié)點(diǎn)

inserBefore(a,b) 意思是a節(jié)點(diǎn)會(huì)插入b節(jié)點(diǎn)的前面

removeChild 刪除一個(gè)子節(jié)點(diǎn)

cloneChild 復(fù)制節(jié)點(diǎn),接收布爾值參數(shù),true表示深復(fù)制(復(fù)制節(jié)點(diǎn)及其所有子節(jié)點(diǎn)),false表示淺復(fù)制(復(fù)制節(jié)點(diǎn)本身,不復(fù)制子節(jié)點(diǎn))

replaceChild 替換節(jié)點(diǎn)

document.getElementsByTagName() 通過(guò)標(biāo)簽名稱(chēng)查找節(jié)點(diǎn)

document.getElementsByName() 通過(guò)元素的Name屬性的值查找節(jié)點(diǎn)

document.getElementById() 通過(guò)元素ID查找節(jié)點(diǎn)

事件的三個(gè)階段,如何阻止事件冒泡

答:目標(biāo)、捕獲、冒泡

event.stopPropagation

call,apply,bind有什么區(qū)別

三者都是用來(lái)改變函數(shù)的this對(duì)象指向，調(diào)用其方法改變函數(shù)執(zhí)行的上下文，從而改變this指向。

call()和apply()的第一個(gè)參數(shù)相同,是指定的對(duì)象,這個(gè)對(duì)象是該函數(shù)的執(zhí)行上下文

call()可以接受多個(gè)參數(shù)，在第一個(gè)參數(shù)之后的后續(xù)所有參數(shù)就是傳入該函數(shù)的值

apply()只有兩個(gè)參數(shù),第一個(gè)是對(duì)象,第二個(gè)是數(shù)組

bind()不會(huì)立即執(zhí)行該函數(shù),他的參數(shù)和call()相同

閉包函數(shù)

1.什么是閉包?

當(dāng)函數(shù)執(zhí)行時(shí),首先會(huì)形成一個(gè)私有作用域,這個(gè)私有作用域保護(hù)私有變量不收外界的干擾,我們把這個(gè)體制稱(chēng)為閉包。閉包是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中變量的函數(shù)。

2.閉包優(yōu)點(diǎn):

1)保護(hù)函數(shù)內(nèi)的變量安全,加強(qiáng)了封裝性;

2)在內(nèi)存中維持一個(gè)變量,方便調(diào)用上下文的局部變量;

3.閉包缺點(diǎn):

1)內(nèi)存消耗;

2)濫用閉包函數(shù)會(huì)造成內(nèi)存泄露,不能被垃圾回收機(jī)制所回收。

遞歸函數(shù)

1.什么是遞歸函數(shù)

答:遞歸函數(shù)即自調(diào)用函數(shù),在函數(shù)體內(nèi)直接或者調(diào)用自己本身函數(shù)

2.遞歸函數(shù)的優(yōu)點(diǎn)

答:代碼更加簡(jiǎn)潔清晰,可讀性更好

3.遞歸函數(shù)的缺點(diǎn)

答:大量使用遞歸函數(shù),會(huì)消耗空間,造成系統(tǒng)卡頓,非必要時(shí)建議不要使用遞歸函數(shù)。

面向?qū)ο蠛兔嫦蜻^(guò)程

答:面向?qū)ο?開(kāi)發(fā)過(guò)程中分析大體步驟,找到輔助的開(kāi)發(fā)工具

面向過(guò)程:開(kāi)發(fā)過(guò)程中專(zhuān)注于每個(gè)功能的具體實(shí)現(xiàn)方式

面向?qū)ο蟮娜齻€(gè)特征

封裝性:多個(gè)相同操作的功能封裝到一個(gè)對(duì)象中

繼承性:讓功能復(fù)用

多態(tài)性:增強(qiáng)功能使用性靈活性

正則表達(dá)式

答:對(duì)字符串進(jìn)行操作的一組工具,作用:匹配,替換,提取功能

/^$/ 這個(gè)是個(gè)通用的格式。

^ 匹配輸入字符串的開(kāi)始位置；$匹配輸入字符串的結(jié)束位置

*匹配前面的子表達(dá)式零次或多次；

+匹配前面的子表達(dá)式一次或多次；

?匹配前面的子表達(dá)式零次或一次；

d 匹配一個(gè)數(shù)字字符，等價(jià)于[0-9]

校驗(yàn)11位手機(jī)號(hào)案例:

function checkPhone(){ var phone = document.getElementById('phone').value; if(!(/^1[35678]d{9}$/.test(phone))){ alert("手機(jī)號(hào)碼有誤，請(qǐng)重新填寫(xiě)"); return false; } }

校驗(yàn)郵箱案例:

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

原型三者關(guān)系

實(shí)例對(duì)象：實(shí)例對(duì)象都具有__proto__,就是原型對(duì)象

原型對(duì)象：原型對(duì)象都具有constructor屬性，就是構(gòu)造函數(shù)

構(gòu)造函數(shù)：構(gòu)造函數(shù)都具有prototype屬性，就是原型對(duì)象

如何在JS中清空數(shù)組

如：var list = [1,2,3,4]

• 方法一：

list= []; //設(shè)置一個(gè)新的空數(shù)組，如果從另一個(gè)變量引用到這個(gè)數(shù)組，那么原始的引用數(shù)組將保持不變。

• 方法二：

list.length=0;//這種方式會(huì)更新指向原始數(shù)組的所有引用變量。

• 方法三：

list.splice(0,list.length);//也將更新對(duì)原始數(shù)組的所有引用。

• 方法四：

while(list.length){ list.pop();};//不建議經(jīng)常使用該方式。

JS中的轉(zhuǎn)義字符是什么

能夠在不破壞應(yīng)用程序的情況下編寫(xiě)特殊字符，轉(zhuǎn)義字符()用于處理特殊字符，如單引號(hào)、雙引號(hào)、撇號(hào)和&號(hào)，在字符前放置。

如：console.log(" I am a "beautiful"girl")

原文鏈接：https://juejin.im/post/5cf725d6f265da1b8608754a

作者：HoneyCC魚(yú)瑜于

總結(jié)

以上是生活随笔為你收集整理的html中给div设置的属性怎么样才能拿得到_前端基础高频面试题(更新中)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。