display:none和visibility:hidden都可以實現元素在視窗的不可見,display:none不會保留元素的位置,結構發生了改變,所以觸發了回流和重繪;visibility:hidden會保留元素的位置,結構沒有發生改變,所以只是觸發了重繪。
new的過程主要完成了以下操作
完成以上步驟,我們可以自己模擬乙個new
通過new建立的物件和通過字面量建立的物件本質上是一樣的,字面量內部也是使用new來完成的。但是通過字面量的方式比較簡單,也不用呼叫建構函式,效能較好,所以推薦使用字面量的方式。
前端路由本質就是監聽 url 的變化,然後匹配路由規則,顯示相應的頁面,並且無須重新整理頁面。目前前端使用的路由就只有兩種實現方式:hash 模式和history 模式。
hash 模式
hash模式會在請求的url後拼接#,當 # 後面的雜湊值發生變化時,可以通過 hashchange 事件來監聽到 url 的變化,從而進行跳轉頁面,並且無論雜湊值如何變化,服務端接收到的 url 請求永遠是不包含#的url。使用window.location.hash可以讀取#後的內容。
history 模式
history 模式是 html5 新推出的功能,主要使用 history.pushstate 和 history.replacestate 來改變url。通過 history 模式改變 url 同樣不會引起頁面的重新整理,只會更新瀏覽器的歷史記錄。
當使用者做出瀏覽器動作時,比如history.back()、history.forward()、history.go(),會觸發 popstate 事件,在popstate事件裡可以拿到路由資訊,從而進行頁面跳轉。
兩種模式對比
優點:
缺點:
debug不太方便
使用場景:
分布式應用:通過高效的並行 i/o 使用已有的資料
工具類應用:海量的工具,小到前端壓縮部署(如 grunt),大到桌面圖形介面應用程式
遊戲類應用:遊戲領域對實時和併發有很高的要求(如網易的 pomelo 框架)
總而言之,node適合運用在高併發、i/o密集、少量業務邏輯的場景。
vue在切換頁面的時候會將原來的元件登出掉然後渲染新的元件,看似一樣實則每次開啟的都是新頁面。如果我們需要在頁面切換的時候,不讓他重新渲染,就可以使用 keep-alive 元件包裹需要儲存的元件。
對於 keep-alive 元件來說,它擁有兩個獨有的生命週期鉤子函式,分別為 activated 和 deactivated 。
用 keep-alive 包裹的元件在切換時不會進行銷毀,而是快取到記憶體中並執行 deactivated 鉤子函式,根據快取渲染後會執行 actived 鉤子函式。
假設乙個頁面比較長,每次切換重新渲染的話都要在頁面頂端開始瀏覽,這對使用者來說不太友好。如果我們使用keep-alive每次切換頁面前將狀態存到記憶體中,然後返回時再從記憶體中讀取,每次開啟都是上次瀏覽的地方,相對體驗比較好
react.createelement():jsx 語法就是用 react.createelement()來構建 react 元素的。它接受三個引數,第乙個引數可以是乙個標籤名。如 div、span,或者 react 元件。第二個引數為傳入的屬性。第三個以及之後的引數,皆作為元件的子元件。
react.cloneelement()與 react.createelement()相似,不同的是它傳入的第乙個引數是乙個 react 元素,而不是標籤名或元件。新新增的屬性會併入原有的屬性,傳入到返回的新元素中,而舊的子元素將被替換,舊元素的key和ref會保留。
常見的前端面試題
元件封裝的目的是為了重用,提高開發效率和 質量 低耦合,單一職責,可復用性,可維護性 前端元件化設計思路 渲染引擎遇到 script 標籤會停下來,等到執行完指令碼,繼續向下渲染 載入 es6模組的時候設定 type module,非同步載入不會造成阻塞瀏覽器,頁面渲染完再執行,可以同時加上asyn...
常見前端面試題備註
1 iframe上監聽click事件 1 iframe.onload function 5 2 常見的布局方式 1靜態布局 px 2 流式布局 百分比 em 或者 rem 3自適應布局 media query 4 響應式布局 media query 3 同源策略 三種不嚴格的同源策略 1不同視窗同d...
前端面試題
sprites是什麼和為什麼要使用他們?css 精靈 把一堆小的整合到一張大的上,減輕伺服器對的請求數量 有可能替代sprites的方法是什麼?svg圖示,字型圖示,字元編碼等等。1 在div排版的時候,假設現在是100px的寬,我在盒子左側用padding left留個10px的白,div就撐開了...