今天是520,單身狗在這裡祝各位520快樂!
dom 的體積過大會影響頁面效能,假如你想在使用者關閉頁面時統計(計算並反饋給伺服器)當前頁面中元素節點的數量總和、元素節點的最大巢狀深度以及最大子元素個數,請用 js 配合原生 dom api 實現該需求(不用考慮陳舊瀏覽器以及在現代瀏覽器中的相容性,可以使用任意瀏覽器的最新特性;不用考慮 shadow dom)。比如在如下頁面中執行後
<會得出這樣乙個物件: 我的答案html
>
<
head
>
head
>
<
body
>
<
div>
<
span
>f
span
>
<
span
>o
span
>
<
span
>o
span
>
div>
body
>
html
>
const obj={}效果圖:class ele
//取當前節點的元素深度
geteledepth()
else
}//去當前節點的子元素個數
getelesubnum()
}return
zinum;
}}const totalelements=document.getelementsbytagname("*")
obj.totalelementscount=totalelements.length;//
dom中的所有節點數量
let eledeptharr=;
let elesubarr=;
for(let i=0;i)
eledeptharr=eledeptharr.sort((a,b)=>(b-a))
elesubarr=elesubarr.sort((a,b)=>(b-a))
obj.maxdomtreedepth=eledeptharr[0]//
元素節點的最大巢狀深度
obj.maxchildrencount=elesubarr[0]//
最大子元素個數
console.log(obj)
給點html:
<給定部分css:html
>
<
head
>
<
title
>按圖完成布局和拖動效果
title
>
head
>
<
body
>
<
div
class
="container"
>
<
div
class
="left"
>left<
div
class
="drag"
>
div>
div>
<
div
class
="right"
>right
div>
div>
body
>
html
>
.container .left,我的改動:.right .right
有些未完成。。。暫時想到是這個思路
.container .left,.right .right/*--
*/.left.drag
<div
class
="container"
>
<
div
id="left"
class
="left"
>
left
<
div
id="drag"
class
="drag"
>
div>
div>
<
div
class
="right"
>right
div>
div>
const drag=document.getelementbyid("drag");const left=document.getelementbyid("left");
drag.onmousedown=function
(e)
this.onmouseup=function
()}
web前端面試2(css)
1 css sprite 精靈圖,雪花圖 將多個拼接到乙個中,通過background position和元素尺寸調節背景圖 優點 減少http請求次數,提高載入速度,修改方便,只要在一張上修改顏色或者深淺。缺點 需要修改大小時,或者調整時,需要全域性考慮。2.display none和visibi...
前端面試整理
專案優化策略 cdn建立非同步物件 var xmlhttp new xmlhttprequest 傳送請求 xmlhttp.send 監聽狀態變化 xmlhttp.onreadystatechange function ev2 0 請求未初始化 1 伺服器連線已建立 2 請求已接收 3 請求處理中 ...
web前端面試總結
因為最近在找工作,所以避免不了的就是面試,關於面試的話,其實不僅僅只是知道做面試題這麼簡單,因為我們要從公司的角度考慮問題。其實初級的程式設計師是最好塑造的,我的建議是不管你的薪水有多低,一定要以學習新知識為己任,多去嘗試不同方法,去適應不同的環境,做人做事都應該有乙個全新的認識。因為畢竟是工作,所...