Html
html文檔類(lèi)型
-
html5
<!DOCTYPE html> -
html4.01 Strict 嚴(yán)格型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -
html4.01 Transitional 過(guò)渡型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -
html4.01 Frameset 框架型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
塊級(jí)元素歇盼,行內(nèi)元素有哪些?
塊級(jí)元素
:div,p,ul,li,ol,form,table,h1~h6,pre,hr;
行內(nèi)元素
:a,span,b,i,em,img,select,input,textarea,u;
什么是語(yǔ)義化?為什么要用語(yǔ)義化评抚?有哪些語(yǔ)義化標(biāo)簽豹缀?
語(yǔ)義化
就是正確的標(biāo)簽干正確的事情伯复,能夠便于開(kāi)發(fā)者閱讀和編寫(xiě)出優(yōu)雅的代碼并讓網(wǎng)路爬蟲(chóng)更好的解析。
- 有利于SEO邢笙,有利于搜索引擎爬蟲(chóng)更好的理解我們的頁(yè)面啸如,提高頁(yè)面的權(quán)重。
- 在沒(méi)有css的時(shí)候能夠清晰的看出頁(yè)面結(jié)構(gòu)氮惯,增強(qiáng)可讀性叮雳。
- 便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù),可以讓開(kāi)發(fā)者更容易看明白妇汗,從而提高團(tuán)隊(duì)效率和協(xié)調(diào)能力帘不。
- 支持多終端設(shè)備的瀏覽器渲染。?
語(yǔ)義化標(biāo)簽
:article,section,main,title,header,footer,aside,nav
iframe
iframe元素會(huì)創(chuàng)建包含一個(gè)文檔的內(nèi)聯(lián)框架
優(yōu)點(diǎn)
:
1.解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問(wèn)題
2.并行加載腳本
缺點(diǎn)
:
1.iframe會(huì)阻塞主頁(yè)面的onload事件
2.即使內(nèi)容為空杨箭,加載也需要事件
3.設(shè)備兼容性差
什么是BFC?
BFC(Block formatting context)直譯為“塊級(jí)格式化上下文”寞焙。它是一個(gè)獨(dú)立的渲染區(qū)域,只有Block-level box參與互婿,它規(guī)定了內(nèi)部的Block-level Box如何布局捣郊,并且與這個(gè)區(qū)域外部毫不相干。
布局規(guī)則:
- 內(nèi)部的Box會(huì)在垂直方向慈参,一個(gè)接一個(gè)的放置呛牲。
- 每個(gè)元素的margin box的左邊,與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化驮配,否則相反)娘扩。即使存在浮動(dòng)也是如此。
- BFC的區(qū)域不會(huì)與float box重疊壮锻。
- BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器畜侦,容器里面的子元素不會(huì)影響到外面的元素。反之也如此躯保。
- 計(jì)算BFC的高度時(shí)旋膳,浮動(dòng)元素也參與計(jì)算。
- 哪些元素會(huì)生成BFC:
a. 根元素
b. float屬性不為none
c. position為absolute或fixed
d. display為inline-block,table-cell,table-caption,flex,inline-flex
e. overflow不為visible
mate標(biāo)簽
缺少內(nèi)容
瀏覽器
HTML5
html5的離線存儲(chǔ)使用和工作原理
用戶(hù)與互聯(lián)網(wǎng)沒(méi)有連接時(shí)途事,可以正常訪問(wèn)網(wǎng)站內(nèi)容验懊;用戶(hù)與互聯(lián)網(wǎng)連接時(shí),更新用戶(hù)機(jī)器上的緩存文件尸变。
工作原理
:
在頁(yè)面頭部加入一個(gè)manifest的屬性义图,如下:
<!DOCTYPE html>
<html manifest="cache.manifest"></html>
manifest有三部分組成:
1.CACHE:表示需要緩存的資源列表
2.NETWORK:表示它下面的資源列表不會(huì)被緩存,只能在線訪問(wèn)召烂,但如果CACHE中存在還是會(huì)被緩存碱工,CACHE優(yōu)先級(jí)高
3.FALLBACK:表示如果訪問(wèn)第一個(gè)資源失敗,那么就使用第二個(gè)資源來(lái)替換它
html5新特性
用于繪畫(huà)的canvas元素
用于媒介回放的video和audio元素
對(duì)本地離線存儲(chǔ)更好的支持
語(yǔ)義化元素標(biāo)簽
新的表單控件:email,date,time,url,search
拖放:drag,drop
內(nèi)聯(lián)的svg
地理定位:navigator.geolocation
web 存儲(chǔ):localStorage sessionStorage
web worker:當(dāng)在頁(yè)面執(zhí)行腳本時(shí),頁(yè)面的狀態(tài)是不響應(yīng)的怕篷,直到腳本已完成历筝。
web worker是運(yùn)行在后臺(tái)的javascript,獨(dú)立于其他腳本廊谓,不影響頁(yè)面的性能梳猪,
說(shuō)下你對(duì)瀏覽器內(nèi)核的理解
瀏覽器內(nèi)核主要分為兩部分:渲染引擎和JS引擎。
渲染引擎
:負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容(html,xml和圖像等)蒸痹,整理訊息(css)春弥,以及計(jì)算頁(yè)面的顯示方法,然后輸出到顯示器或者打印機(jī)上叠荠。
JS引擎
:解析和執(zhí)行JavaScript來(lái)實(shí)現(xiàn)頁(yè)面的動(dòng)態(tài)效果匿沛。
常用瀏覽器內(nèi)核有哪些?
Trident內(nèi)核:IE;
Webkit:Safari, Chrome;
CSS
為什么要初始化css樣式榛鼎?
瀏覽器兼容問(wèn)題逃呼,不同的瀏覽器對(duì)標(biāo)簽元素的默認(rèn)值是不同的,如果沒(méi)有對(duì)css進(jìn)行初始化會(huì)出現(xiàn)瀏覽器之間的頁(yè)面差異
css的盒子模型
盒子模型 = 內(nèi)容區(qū)域content + 內(nèi)邊距padding + 邊框border + 外邊距margin
兩種盒子模型:IE盒子模型(content+padding+border)怪異模式,W3C的盒子模型(content)標(biāo)準(zhǔn)模式
box-sizing:
border-box借帘,padding和border被包含在定義的width和height中,元素的實(shí)際寬高等于設(shè)置的值
content-box淌铐,padding和border不被包含在定義的width和height中肺然,元素的實(shí)際寬高等于設(shè)置的值+padding+border
實(shí)現(xiàn)元素的垂直居中有哪幾種?
- 文本:設(shè)置line-height腿准,text-align:center;
- 元素(已知寬高):
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
3.元素(未知寬高):
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
4.flex方式:
display: flex;
align-items: center;
justify-content: center;
5.table類(lèi)型:
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
隱藏元素的實(shí)現(xiàn)方式有哪幾種际起?
1.visibility: hidden; 隱藏元素倘要,但是元素占用的空間仍然存在悉稠;
2.opacity: 0; 完全透明盛杰,元素占用的空間存在褐奴;
3.position定位; 元素脫離文檔流蝗茁,將元素的位置設(shè)置在可見(jiàn)區(qū)域之外寂纪;
4.display: none; 元素完全不可見(jiàn)趴拧,也不占用文檔的空間珠月;
css3有哪些新特性孟辑?
animation 動(dòng)畫(huà)
transtion 過(guò)渡
transform (旋轉(zhuǎn)哎甲、縮放、位移饲嗽、傾斜)
@font-face 加載字體
box-shadow 陰影
gradient 漸變
選擇器::nth-child(), :first-child ...
JavaScript
數(shù)據(jù)類(lèi)型炭玫,最新版ECMA標(biāo)準(zhǔn)定義7種
原始類(lèi)型
:undefined, null, string, boolean, number, symbol
引用類(lèi)型
:Object
操作DOM的常用API?
- 節(jié)點(diǎn)查找 ducument.getElementById
- 節(jié)點(diǎn)創(chuàng)建 createElement cloneNode
- 節(jié)點(diǎn)修改 appendChild insertBefore RemoveChild replaceChild
- 元素屬性 setAttribute getAttribute
BOM常用API
- focus() —— 使窗體或控件獲取焦點(diǎn)
- blur() —— 與focus函數(shù)相反,使窗體或控件失去焦點(diǎn)
- open() —— 打開(kāi)(彈出)一個(gè)新的窗體
- close() —— 關(guān)閉窗體
JSONP的原理貌虾?
就是利用<script>標(biāo)簽的src屬性沒(méi)有跨域限制的'漏洞'來(lái)達(dá)到與第三方通訊的目標(biāo)吞加。第三方產(chǎn)生的響應(yīng)為json數(shù)據(jù)的包裝(故稱(chēng)之為jsonp,即json padding)
什么是事件代理?
當(dāng)網(wǎng)頁(yè)中需要觸發(fā)事件的對(duì)象比較多的時(shí)候,為了避免內(nèi)存泄漏衔憨,我們把事件委托到其父對(duì)象上叶圃,借助事件冒泡機(jī)制,可以將事件委托到body, document等元素上巫财,這樣等于一個(gè)頁(yè)面就只有一個(gè)事件觸發(fā)盗似,避免直接把事件添加到多個(gè)對(duì)象上。
document.getElementByTagName('body')
原型平项、原型鏈
在JavaScript中赫舒。函數(shù)可以有屬性,每個(gè)函數(shù)都有一個(gè)特殊的屬性叫作
原型
prototype;
JavaScript常被描述為一種基于
原型
的語(yǔ)言——每個(gè)對(duì)象擁有一個(gè)原型對(duì)象
闽瓢,對(duì)象以其原型為模板接癌,從原型繼承方法和屬性。原型對(duì)象也可能用于原型扣讼,并從中繼承方法和屬性缺猛,一層一層,以此類(lèi)推椭符。這種關(guān)系常被稱(chēng)為原型鏈
荔燎。
注:幾乎所有JavaScript中的對(duì)象都是位于原型鏈頂端的Object的實(shí)例
閉包的含義,為什么會(huì)存在閉包销钝,以及閉包的缺點(diǎn)
傳送門(mén)
call有咨,apply,bind的區(qū)別和作用
繼承和原型鏈
傳送門(mén)
new運(yùn)算符的作用
new運(yùn)算符
創(chuàng)建一個(gè)用戶(hù)定義的對(duì)象類(lèi)型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象的實(shí)例蒸健;
傳送門(mén)
面向?qū)ο缶幊?/p>
作用域座享,變量提升
事件循環(huán)機(jī)制
傳送門(mén)
內(nèi)存泄漏,js的垃圾回收機(jī)制
傳送門(mén)
ajax
跨域
ES6
ES6和commonJs的導(dǎo)入導(dǎo)出區(qū)別
CommonJS模塊與ES6模塊的區(qū)別
CommonJs
- 對(duì)于基本數(shù)據(jù)類(lèi)型似忧,屬于復(fù)制渣叛。即會(huì)被模塊緩存。同時(shí)盯捌,在另一個(gè)模塊可以對(duì)該模塊輸出的變量重新賦值淳衙。
- 對(duì)于引用數(shù)據(jù)類(lèi)型,屬于淺拷貝饺著。由于兩個(gè)模塊引用的對(duì)象指向同一個(gè)內(nèi)存空間滤祖,因此對(duì)該模塊的值做修改時(shí)會(huì)影響另一個(gè)模塊。
- 當(dāng)使用require命令加載某個(gè)模塊時(shí)瓶籽,就會(huì)運(yùn)行整個(gè)模塊的代碼匠童。
- 當(dāng)使用require命令加載同一個(gè)模塊時(shí),不會(huì)再執(zhí)行該模塊塑顺,而是取到緩存之中的值汤求。也就是說(shuō)俏险,CommonJs模塊無(wú)論加載多少次,都只會(huì)在第一次加載時(shí)運(yùn)行一次扬绪,以后再加載竖独,就返回第一次運(yùn)行的結(jié)果,除非手動(dòng)清除系統(tǒng)緩存挤牛。
- 循環(huán)加載時(shí)莹痢,屬于加載時(shí)執(zhí)行。即腳本代碼在require的時(shí)候墓赴,就會(huì)全部執(zhí)行竞膳。一旦出現(xiàn)某個(gè)模塊被“循環(huán)加載”,就只輸出已經(jīng)執(zhí)行的部分诫硕,還未執(zhí)行的部分不會(huì)輸出坦辟。
ES6 - es6模塊中的值屬于[動(dòng)態(tài)只讀引用]。
- 對(duì)于只讀來(lái)說(shuō)章办,即不允許修改引入變量的值锉走,import的變量是只讀的,不論是基礎(chǔ)數(shù)據(jù)類(lèi)型還是引用數(shù)據(jù)類(lèi)型藕届。當(dāng)模塊遇到import命令時(shí)挪蹭,就會(huì)生成一個(gè)只讀引用。等到腳本真正執(zhí)行時(shí)休偶,再根據(jù)這個(gè)只讀引用梁厉,到被加載的那個(gè)模塊里面去取值。
- 對(duì)于動(dòng)態(tài)來(lái)說(shuō)椅贱,原始值發(fā)生改變懂算,import加載的值也會(huì)發(fā)生改變只冻。不論是基礎(chǔ)數(shù)據(jù)類(lèi)型還是引用數(shù)據(jù)類(lèi)型庇麦。
設(shè)計(jì)模式
Git的使用
查看git提交記錄
git log (-3 提交記錄的數(shù)量限制)
commit c8ed3c8c7a5298e53c554c776151d8fefe7cae05 (HEAD -> master, origin/master, origin/HEAD)
Author: xxx
Date: Sun Mar 17 16:56:39 2019 +0800
修改上傳文章的可以上傳圖片
git的回滾版本
回滾指定版本(不保留更改代碼) git reset --hard c8ed3c8c7a5298e53c554c776151d8fefe7cae05
強(qiáng)制提交 git push -f origin master
回滾指定版本(放棄指定提交的修改,但會(huì)生成一次新的提交喜德,需要填寫(xiě)提交注釋?zhuān)郧暗臍v史記錄都在)git revert c8ed3c8c7a5298e53c554c776151d8fefe7cae05
git切換分支
查看遠(yuǎn)程分支 git branch -a
查看本地分支 git branch
git checkout -b develop origin/develop
git合并分支(develop->master)
- 修改develop分支
- 切換到master分支
git checkout master
- 合并develop分支代碼到master分支
git merge develop
- 解決沖突
- 推送到遠(yuǎn)程的master上
git push origin master
優(yōu)化
圖片加載
- 將圖片服務(wù)和應(yīng)用分離山橄。對(duì)于服務(wù)器來(lái)說(shuō),圖片始終是最消耗系統(tǒng)資源的舍悯,如果將圖片服務(wù)和應(yīng)用服務(wù)放在同一個(gè)服務(wù)器的話(huà)航棱,應(yīng)用服務(wù)器很容易會(huì)因?yàn)閳D片的高I/O負(fù)載而崩潰,所以當(dāng)網(wǎng)站存在大量的圖片讀寫(xiě)操作時(shí)萌衬,建議使用圖片服務(wù)器饮醇。
- 圖片壓縮
- 圖片懶加載。初始不加載圖片秕豫,當(dāng)用戶(hù)滾動(dòng)到相應(yīng)位置時(shí)才放出圖片
- 精靈圖
- 將圖片壓縮成Base64格式節(jié)約請(qǐng)求朴艰。建議小的圖片
- 小圖片使用iconfont观蓄,大圖片用第三方如七牛,然后懶加載
JS和CSS加載
- 將JS庫(kù)文件替換成CDN地址
- 精簡(jiǎn)和優(yōu)化JS和CSS
- GZIP壓縮JS和CSS
- 緩存JS和CSS
- 合并JS與CSS祠墅,減少請(qǐng)求
重繪和回流
- 回流:當(dāng)render樹(shù)中的一部分或者全部因?yàn)榇笮∵吘嗟葐?wèn)題發(fā)生改變而需要重建的過(guò)程叫做回流侮穿。
- 重繪:當(dāng)元素的一部分屬性發(fā)生變化,如外觀背景色不會(huì)引起布局變化而需要重新渲染的過(guò)程叫做重繪毁嗦。
引起回流的因素:
- dom樹(shù)結(jié)構(gòu)改變亲茅,如刪除或添加節(jié)點(diǎn)。
- 元素幾何屬性變化狗准,如margin克锣、padding、height驶俊、width娶耍、border等。
- 頁(yè)面渲染初始化
- 獲取某些屬性饼酿。offsetTop榕酒、offsetLeft、offsetWidth故俐、offsetHeight想鹰、scrollTop、scrollLeft药版、scrollWidth辑舷、scrollHeight、clientTop槽片、clientLeft何缓、clientWidth、clientHeight还栓、getComputedStyle()
- 瀏覽器窗口發(fā)生變化-resize事件發(fā)生時(shí)
JS庫(kù)(jQuery原理)
框架(Vue|React)
Vue
生命周期函數(shù)
-
beforeCreate
在實(shí)例初始化之后碌廓,數(shù)據(jù)觀測(cè)(data observer)和event/watcher事件配置之前被調(diào)用。 -
created
在實(shí)例創(chuàng)建完成之后被立即調(diào)用剩盒。在這一步谷婆,實(shí)例已完成以下的配置:數(shù)據(jù)觀測(cè)(data observer),屬性和方法的運(yùn)算辽聊,watch/event事件回調(diào)纪挎。然而,掛載階段還沒(méi)開(kāi)始跟匆,$el屬性目前不可見(jiàn)异袄。 -
beforeMount
在掛載開(kāi)始之前被調(diào)用:相關(guān)的render函數(shù)首次被調(diào)用 -
mounted
el被新創(chuàng)建的vm.el也在文檔中埠帕。注意:mounted不會(huì)承諾所有的子組件也都一起被掛載。如果你希望等到整個(gè)視圖都渲染完畢玖绿,可以用vm.$nextTick替換掉mounted -
beforeUpdate
數(shù)據(jù)更新時(shí)調(diào)用敛瓷,發(fā)生在虛擬DOM打補(bǔ)丁之前。這里適合在更新之前訪問(wèn)現(xiàn)有的DOM斑匪,比如手動(dòng)移除已添加的事件監(jiān)聽(tīng)器 -
updated
由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁呐籽,在這之后會(huì)調(diào)用該鉤子。當(dāng)這個(gè)鉤子被調(diào)用時(shí)蚀瘸,組件DOM已經(jīng)更新狡蝶,所以你現(xiàn)在可以執(zhí)行依賴(lài)于DOM的操作。然而在大多數(shù)情況下贮勃,你應(yīng)該避免在此期間更改狀態(tài)贪惹。如果要相應(yīng)狀態(tài)改變,通常最好使用計(jì)算屬性或watcher取而代之寂嘉。 -
activated
keep-alive組件激活時(shí)調(diào)用奏瞬。 -
deactivated
keep-alive組件停用時(shí)調(diào)用。 -
beforeDestroy
實(shí)例銷(xiāo)毀之前調(diào)用泉孩。在這一步硼端,實(shí)例仍然完全可用。 -
destroyed
Vue實(shí)例銷(xiāo)毀后調(diào)用寓搬。調(diào)用后珍昨,Vue實(shí)例指示的所有東西都會(huì)解綁定,所有的事件監(jiān)聽(tīng)器會(huì)被移除句喷,所有的子實(shí)例也會(huì)被銷(xiāo)毀镣典。