文章來源於https://juejin.im/post/5bee888fe51d4557fe34e356,感謝原文做者的分享。另推薦一篇文章:[前端技術清單]css
本部分主要從如下幾個方面來回顧前端相關的基礎知識:html
<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″>複製代碼
①ie盒模型算上border、padding及自身(不算margin),標準的只算上自身窗體的大小 css設置方法以下:
前端
/* 標準模型 */vue
box-sizing:content-box;html5
/*IE模型*/ react
box-sizing:border-box;
webpack
②幾種得到寬高的方式
css3
dom.style.width/height
es6
這種方式只能取到dom元素內聯樣式所設置的寬高,也就是說若是該節點的樣式是在style標籤中或外聯的CSS文件中設置的話,經過這種方法是獲取不到dom的寬高的
web
dom.currentStyle.width/height
這種方式獲取的是在頁面渲染完成後的結果,就是說無論是哪一種方式設置的樣式,都能獲取到。但這種方式只有IE瀏覽器支持。
window.getComputedStyle(dom).width/height
這種方式的原理和2是同樣的,這個能夠兼容更多的瀏覽器,通用性好一些。
dom.getBoundingClientRect().width/height
這種方式是根據元素在視窗中的絕對位置來獲取寬高的。
dom.offsetWidth/offsetHeight
這個就沒什麼好說的了,最經常使用的,也是兼容最好的
{clear:both;height:0;overflow:hidden;}
content:"."; clear:both;
display:block; height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid transparent;
border-bottom: 50px solid blue;
background: white;
}
2.(function(){...}()) (function(x){ console.log(x); }(12345))
做用 不破壞污染全局的命名空間,若須要使用,將其用變量傳入如 (function(window){...}(window)
ES7 提出的async 函數,終於讓 JavaScript 對於異步操做有了終極解決方案。No more callback hell。 async 函數是 Generator 函數的語法糖。使用 關鍵字 async 來表示,在函數內部使用 await 來表示異步。 想較於 Generator,Async 函數的改進在於下面四點:
下面是使用示例:
const makeRequest = () => {
return getJSON() .then(data => {
if (data.needsAnotherRequest) {
return makeAnotherRequest(data) .then(moreData => {
console.log(moreData) return moreData })
} else {
console.log(data) return data } })
} async/await示例 const makeRequest = async () => {
const data = await getJSON() if (data.needsAnotherRequest) { const moreData = await makeAnotherRequest(data); console.log(moreData) return moreData
} else {
console.log(data) return data
}
}
3開頭 (請求被重定向)表示要完成請求,須要進一步操做。 一般,這些狀態代碼用來重定向。
①建立新節點
createDocumentFragment //建立新DOM片斷
createElement //建立一個元素
createTextNode //建立一個文本節點
②添加 移除 替換 插入
appendChild() //添加
removeChild //移除
replaceChild //替換
insertBofore //插入
③查找
getElementsByTagName() //經過標籤名查找
getElementsByName() //經過元素的name屬性查找
getElementById() //經過元素的id查找
querySelectorAll()和querySelector()複製代碼
定義和用法: 一個父函數裏面包含了一個子函數,子函數調用了父函數內部的變量,若是子函數在外部被調用,就產生了閉包。簡單的說,閉包就是可以讀取其餘函數內部變量的函數。
閉包的做用:
①讀取其餘函數內部的變量
②變量保存在內存中
注意: 使用過多的閉包會消耗大量內存,形成網頁的性能問題,能夠在函數執行完成以前把不須要的局部變量刪除。
①數據存儲大小 cookie:4kb webStorge:5mb
②數據存儲有效期限 cookie:根據本身的設置時間 sessionStorage:關閉窗口後失效
localStorage:永久有效除非js刪除或者瀏覽器刪除 ③做用域 cookie和localStorage是在同源窗口,同一個瀏覽器共享的,sessionStorage只在同一個標籤頁共享。
ready:頁面的文檔結構加載完成,不包括圖片視頻等非文字內容。 load:全部頁面元素都加載完成 ready的速度比load快
①資源文件js css 圖片合併壓縮
②減小頁面dom操做,操做多的話能夠考慮使用虛擬dom
③減小http請求
④使用cdn加速 cdn的做用:cdn能夠處理整個網站 70%-95%的訪問量,從而解決網站的併發量,簡單的說就是經過在不一樣地點緩存內容,而後經過負載平衡等技術將用戶請求定向到最近的緩存服務器上獲取內容,提升用戶訪問網站的響應速度。
⑤減小cookie大小
①瀏覽器根據請求的URL,交給DNS域名解析,找到真實的ip,交給域名解析。
②服務器交給後端處理完成後返回的數據,瀏覽器接收文件HTML,CSS,JS圖片等。
③瀏覽器對加載的資源進行語法解析,創建相應的數據內部結構。
④解析html,建立dom樹,自上而下的順序
⑤解析css,優先級:瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式;
⑥將css與dom合併,構建渲染樹
⑦佈局重繪重排,頁面完成渲染。
主要分爲渲染引擎和js引擎 渲染引擎:主要負責取得網頁的(html,xml,圖片等),整理信息結合css渲染頁面,計算網頁的顯示方式,瀏覽器內核的不一樣對網頁的語法解釋也會有所不一樣,因此渲染效果也會有所不一樣,這也是咱們須要作兼容性處理的緣由。
js引擎:解析和執行js來達到網頁的動態交互效果。
新增了 canvas,video,audio,nav,section,footer,header等元素。 表單控件,calendar、date、time、email、url、search 存儲技術:localStorage,sessionStorage等 新的技術:webworker, websocket, Geolocation
②搜索引擎不可以解讀 iframe 頁面,不利於 seo
③iframe和主頁面共享鏈接池,然而瀏覽器對相同域的連接是有限制的,因此這會影響頁面的並行加載。
④若是想要繞開以上的2個問題,能夠考慮經過js動態復職給 iframe添加src值。
標籤閉合,標籤小寫,不亂嵌套,使用外鍊形式的css和js,結構層,表現層,行爲層分離。
TML與XHTML之間的差異,主要分爲功能上的差異和書寫習慣的差異兩方面。
關於功能上的差異,主要是XHTML可兼容各大瀏覽器、手機以及PDA,而且瀏覽器也能快速正確地編譯網頁。
因爲XHTML的語法較爲嚴謹,因此若是你是習慣鬆散結構的HTML編寫者,那須要注意XHTML的規則。
Doctype處於文檔的最前面,用來告訴瀏覽器的解析器,文檔的類型。 嚴格模式的js運行和排版是按照瀏覽器支持的最高標準的。 混雜模式就是兼容性模式,當頁面兼容很差的時候,就能夠選用這種模式,防止頁面佈局錯落沒法站點工做。
行內元素:a b span img input select strong 塊級元素:div ul li ol dl dt dd h1 h2 h3 p 空元素:br hr link meta 塊級元素獨佔一行,行內元素合一併行一行
class:爲元素設置類標識 data-**:爲元素添加自定義屬性 draggable:設置元素是否能夠拖曳 id:元素的id,同一個id文檔內是惟一的 style:元素樣式 title:鼠標上移顯示信息
svg繪製出來的圖片有獨立dom節點,能夠綁定事件,是矢量圖,放大圖片不會有鋸齒。 canvas繪製出來的圖片是一個畫布,等於就是一張圖,放大會產生鋸齒。
就是將多個小圖標拼接在一張圖片上,減小對圖片的請求,使用 background-size來定位到相關圖片上。
優勢: ①減小HTTP請求數,極大地提升頁面加載速度; ②增長圖片信息重複度,提升壓縮比,減小圖片大小; ③更換風格方便,只需在一張或幾張圖片上修改顏色或樣式便可實現;
缺點: ①圖片合併麻煩; ②維護麻煩,修改一個圖片可能須要重新佈局整個圖片,樣式;
總的來講,他們的做用都是讓元素不可見。區別在於: display:none會讓元素徹底從 dom 樹中消失,渲染的時候不佔據任何空間。 visibility:hidden不會讓元素從渲染樹 dom 中消失,並且仍是會佔據必定的空間,只是內容不可見而已。
1.link是html 的方式,@import是css的方式 2.link最大限度支持並行下載,@import過多嵌套致使串行下載 3.link能夠經過rel="alternate stylesheet"指定候選樣式 4.整體來講:link優於@import
1.clear:both,添加一個空標籤div 2.父級div定義僞類:after和zoom 3.父級div定義overflow:hidden 4.父級div也浮動,須要定義寬度 5.結尾處加br標籤clear:both
例如:
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
.clearfix{display:inline-table}
.clearfix{height:1%}
.clearfix{display:block;*zoom:1}複製代碼
由於瀏覽器的兼容問題,不一樣瀏覽器對有些標籤的默認值是不一樣的,若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。 固然,初始化樣式會對SEO有必定的影響,但魚和熊掌不可兼得,但力求影響最小的狀況下初始化。
主要的新特性有:
有兩種, IE盒子模型、W3C盒子模型; 盒模型: 內容(content)、填充(padding)、邊界(margin)、 邊框(border); 區 別: IE(低版本)的content部分把 border 和 padding計算了進去;
優先級爲: !important > id > class > tag 且important 比 內聯優先級高。
優勢:能夠將二進制數據轉化爲可打印字符,方便傳輸數據,對數據進行簡單的加密,肉眼安全。 缺點:內容編碼後體積變大,編碼和解碼須要CPU額外工做量。
做用域鏈中的變量都是向上訪問的,變量訪問到windows對象後終止,向下訪問是不容許的。 簡單的說,做用域就是變量函數的可訪問範圍。
每一個對象在內部都是會初始化一個屬性的,prototype(原型),當咱們訪問一個對象的屬性時,若是這個對象不存在這個屬性,那麼他就會去 prototype中查找,而後 prototype中還有本身的 prototype,就這樣一直找下去,這就是原型鏈的概念。
假如咱們有一個 ul 列表,裏面有4個li,咱們能夠在 li 上綁定 click 事件,可是也能夠在她們的 父節點 ul上綁定,這種在 父節點上綁定事件來代替子節點事件的方法,就叫作事件委託。
this老是指向函數的直接調用者(而非間接調用者) 若是有new關鍵字,this指向new出來的那個對象 在事件中,this指向觸發這個事件的對象,特殊的是,IE中的attachEvent中的this老是指向全局對象Window
w3c中定義的事件發生的過程的3個階段: 捕獲階段(capturing)、目標階段(targetin)、冒泡階段(bubbling)
優勢: 經過異步模式,提高了用戶體驗. 優化了瀏覽器和服務器之間的傳輸,減小沒必要要的數據往返,減小了帶寬佔用. Ajax在客戶端運行,承擔了一部分原本由服務器承擔的工做,減小了大用戶量下的服務器負載。 Ajax能夠實現動態不刷新(局部刷新)
缺點: 安全問題 AJAX暴露了與服務器交互的細節。 對搜索引擎的支持比較弱。 不容易調試。
跨域問題能夠從jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面等方面來解決。通常由後臺設置容許跨域。
內存泄漏是指 一些對象咱們不在使用它的時候,他任然存在 setTimeout 的第一個參數使用字符串而非函數的話,會引起內存泄漏 閉包使用不當。
1、Angular特性: 由本身實現一套模板編譯規則,數據變化依賴髒檢查, 基本屬性包括:數據雙向綁定、基本模板指令、自定義指令、表單驗證、路由操做、依賴注入、過濾器、內置服務、自定義服務、組件、模塊。 運行效率較低,數據變動檢測方式。 學習angular會迫使你學習特有的預發,上手成本很大,代碼看起來很乾淨 依賴注入,即一個對象將依賴項提供給另外一個對象(客戶端)的模式。致使更多的靈活性和更乾淨的代碼。 Angular 最適合單頁應用(SPA),由於它可能太臃腫而不能用於微服務。 框架比較臃腫,每次用啥功能要引入一大堆東西 Angular錯誤提示不夠清晰明顯,對於初級開發者,很難看懂Angular的錯誤提示。(我的認爲這是最大的很差之處,當初學習這個遇到不少坑啊),並且定位bug很難。 面向對象編程的思想,Angular由後端開發人員設計的前端框架。 詳細比較:React和Vue的區別
2、React特性: 單向綁定,先更新model,而後渲染UI元素,數據在一個方向流動,使得調試更加容易。代碼冗餘,各類生命週期太麻煩,剛開始接觸好難記。 用了虛擬DOM。(對虛擬DOM的理解剛開始我不是很理解概念,建議你們去看【深刻REACT技術棧】這本書有很好的講解) 更適合大型應用和更好的可測試性 Web端和移動端原生APP通吃 更大的生態系統,更多的支持和好用的工具
3、Vue特性 模板和渲染函數的彈性選擇 簡單的語法和項目配置 更快的渲染速度和更小的體積四
它的功能是把對應的字符串解析成JS代碼並運行 應該避免使用eval,不安全,很是耗性能(2次,一次解析成js語句,一次執行) 由JSON字符串轉換爲JSON對象的時候能夠用eval,var obj =eval('('+ str +')')
undefine: 表示不存在這個值,若是變量被聲明瞭沒有賦值。 null: 變量被定義賦值了,可是爲空的狀況,沒有任何屬性方法和值 在驗證null時,必定要使用 === ,由於 ==沒法分別null 和 undefined
json是JavaScript Object Notation的縮寫,即JavaScript對象表示法,是一種輕量級的數據交換格式,易於閱讀和編寫,同時也易於機器解析和生成。json是存儲和交換文本信息的語法,相似於XML。json採用徹底獨立與語言的文本格式,它的語言格式相似於c語言家族。這些特性也使的json成爲理想的數據交換語言。
JSON字符串轉換爲JSON對象:
var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str);
複製代碼複製代碼
JSON對象轉換爲json字符串
var last=obj.toJSONString();
var last=JSON.stringify(obj);
複製代碼複製代碼
同步:瀏覽器訪問服務器請求,用戶看獲得頁面刷新,從新發請求,等請求完,頁面刷新,新內容出現,用戶看到新內容,進行下一步操做。 異步:瀏覽器訪問服務器請求,用戶正常操做,瀏覽器後端進行請求。等請求完,頁面不刷新,新內容也會出現,用戶看到新內容。
漸進加強 :針對低版本瀏覽器進行構建頁面,保證最基本的功能,而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。 優雅降級 :一開始就構建完整的功能,而後再針對低版本瀏覽器進行兼容。
attribute是dom元素在文檔中做爲html標籤擁有的屬性; property就是dom元素在js中做爲對象擁有的屬性。
es6是一個新的標準,它包含了許多新的語言特性和庫,是JS最實質性的一次升級。 好比’箭頭函數’、’字符串模板’、’generators(生成器)’、’async/await’、’解構賦值’、’class’等等,還有就是引入module模塊的概念。
可讓this指向固定化,這種特性頗有利於封裝回調函數
async/await 是寫異步代碼的新方式,之前的方法有回調函數和Promise。 async/await是基於Promise實現的,它不能用於普通的回調函數。async/await與Promise同樣,是非阻塞的。 async/await使得異步代碼看起來像同步代碼,這正是它的魔力所在。
面向過程就是對一個問題提出解決思路,而後一步步的列出函數解決,依次調用。 面向對象就是將構成問題分解成各個對象,創建對象的目的不是爲了完成一個步驟,而是爲了描敘某個事物在整個解決問題的步驟中的行爲。 面向對象是以功能來劃分問題,而不是步驟
所謂Promise,簡單說就是一個容器,裏面保存着某個將來纔會結束的事件(一般是一個異步操做)的結果。從語法上說,Promise 是一個對象,從它能夠獲取異步操做的消息。Promise 提供統一的 API,各類異步操做均可以用一樣的方法進行處理。
Promise對象有如下兩個特色: