這裡蒐索程式師資訊,查找有用的技術資料
當前位置:首頁 » 網頁前端 » web有趣的題目
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web有趣的題目

發布時間: 2022-09-21 03:49:36

❶ web前端面試十大總結,不了解一下嗎

在互聯網時代,瀏覽器幾乎主宰著一切,而前端開發人員決定著瀏覽器的內容展現形式和信息的提供,是不可或缺的一部分。前端開發實際上具有很明顯的時代特徵,它在很大程度上決定著大眾的信息攝入,以及用戶讀取信息的有效方式。那麼今天小編為大家總結了一些web前端的面試題,希望對大家有幫助哦!

一:字體高亮函數


題目:請你完成highlight函數,可以把模版字元串中的插入內容替換掉,並且插入文檔以後顯示紅色。例如:


constyourName='ScriptOJ'


constmyName='Jerry'


document.body.innerHTML=highlight`Hello,${yourName}.Iam
${myName}.`


上面例子的頁面顯示如下:


0_1498033735172_upload-2abd65b1-1e98-46ba-b46f-df4188a036a5


請你完成highlight函數的編寫。


答案:


css:


.highlight{


color:red;


}


js:


//考察的是Taggedtemplateliterals的使用


//
#/en-US/docs/Web/JavaScript/Reference/Template_literals


consthighlight=(strings,...args)=>{


returnstrings.rece((str,cur,i)=>{


return`${str}${cur}${args[i]?`class="highlight">${args[i]}`:''}`


},'')


}


二:數組去重


題目:編寫一個函數unique(arr),返回一個去除數組內重復的元素的數組。例如:


unique([0,1,2,2,3,3,4])//=>[0,1,2,3,4]


unique([0,1,Ƈ',Ƈ',2])//=>[0,1,Ƈ',2]


答案:


constunique=(arr)=>[...newSet(arr)]


三:解析字串


題目:完成一個extractStr函數,可以把一個字元串中所有的:到.的子串解析出來並且存放到一個數組當中,例如:


extractStr('Mynameis:Jerry.Myageis:12.')//=>['Jerry',཈']


注意,:和.之間不包含:和.。也即是說,如果::abc..,則返回['abc']。


(本題來源:《JavaScriptCookbook》)


答案:·


constextractStr=(str)=>{


constret=str.match(/:([^:.])*?./g)||[]


returnret.map((subStr)=>subStr.replace(/[:.]/g,''))


}


四:spacify題目:


請你給字元串都添加上原型方法spacify,可以讓一個字元串的每個字母都多出一個空格的間隔:"ScriptOJ".spacify()//=>
"ScriptO
J"(本題來源:#/interview-questions)答案:String.prototype.spacify
=function(){


returnthis.split('').join('')


}


五:safeGet


題目:有時候我們需要訪問一個對象較深的層次,但是如果這個對象某個屬性不存在的話就會報錯,例如:


vardata={a:{b:{c:'ScriptOJ'}}}


data.a.b.c//=>scriptoj


data.a.b.c.d//=>報錯,代碼停止執行


console.log('ScriptOJ')//=>不會被執行


請你完成一個safeGet函數,可以安全的獲取無限多層次的數據,一旦數據不存在不會報錯,會返回undefined,例如:


vardata={a:{b:{c:'ScriptOJ'}}}


safeGet(data,'a.b.c')//=>scriptoj


safeGet(data,'a.b.c.d')//=>返回undefined


safeGet(data,'a.b.c.d.e.f.g')//=>返回undefined


console.log('ScriptOJ')//=>列印ScriptOJ


答案:


constsafeGet=(o,path)=>{


try{


returnpath.split('.').rece((o,k)=>o[k],o)


}catch(e){


returnvoid666


}


}


六:判斷兩個矩形是否重疊


題目:用一個對象的數據來表示一個矩形的位置和大小:


{


x:100,


y:100,


width:150,


height:250


}


它表示一個寬為150高為250的矩形在頁面上的(100,100)的位置。


請你完成一個函數isOverlap可以接受兩個矩形作為參數,判斷這兩個矩形在頁面上是否重疊。例如:


constrect1={x:100,y:100,width:100,height:100}


constrect2={x:150,y:150,width:100,height:100}


isOverlap(rect1,rect2)//=>true


答案:


//原理:#/find-two-rectangles-overlap/


constisOverlap=(rect1,rect2)=>{


constl1={x:rect1.x,y:rect1.y}


constr1={x:rect1.x+rect1.width,y:rect1.y+rect1.height}


constl2={x:rect2.x,y:rect2.y}


constr2={x:rect2.x+rect2.width,y:rect2.y+rect2.height}


if(


l1.x>r2.x||


l2.x>r1.x||


l1.y>r2.y||


l2.y>r1.y


)returnfalse


returntrue


}


七:按下標插入


題目:現在有一個數組存放字元串數據:


['item1','item2','item3','item4','item5']


有另外一個數組存放一組對象:


[


{content:'section1',index:0},


{content:'section2',index:2}


]


它每個對象表示的是會往原來的數組的index坐標插入content數據(index不會重復):


01234


item1itme2item3item4item5


^^


||


section1section2


最後結果是:['section1','item1','item2','section2','item3','item4',
'item5']


請你完成injectSections函數,可以達到上述的功能:


injectSections(


['item1','item2','item3','item4','item5'],


[


{content:'section1',index:0},


{content:'section2',index:2}


]


)//=>['section1','item1','item2','section2','item3','item4',
'item5']


答案:


constinjectSections=(items,sections)=>{


/*需要插入坐標對應數據存放到map裡面*/


constsectionsMap=newMap(sections.map(({index,content})=>[index,
content]))


/*新建一個數組,然後往裡面push原來數組的數據*/


returnitems.rece((ret,item,index)=>{


/*push的時候先檢查map裡面有沒有,有的話先pushmap裡面的數據*/


if(sectionsMap.has(index))ret.push(sectionsMap.get(index))


/*再push原來的數據*/


ret.push(item)


returnret


},[])


}


八:數組拍平(二)


題目:編寫一個JavaScriptgenerator函數,接受一個僅包含數字的多維數組
,返回一個迭代器,可以遍歷得到它拍平以後的結果。例如:


constnumbers=flatten2([1,[[2],3,4],5])


numbers.next().value//=>1


numbers.next().value//=>2


numbers.next().value//=>3


numbers.next().value//=>4


numbers.next().value//=>5


答案:


function*flatten2(arr){


for(leti=0;i

constitem=arr[i]


/*yield*的使用可以大大簡化程序編寫*/


Array.isArray(item)?yield*flatten2(item):yielditem;


}


}


/*用flatten2來完成flatten也是很方便的*/


//constflatten=(arr)=>[...flatten2(arr)]


九:判斷兩個Set是否相同


題目:完成isSameSet函數,它接受了兩個Set對象作為參數,請你返回true/false來表明這兩個set
的內容是否完全一致,例如:


consta={}


constb=1


constc='ScriptOJ'


constset1=newSet([a,b,c])


constset2=newSet([a,c,b])


isSameSet(set1,set2)//=>true


答案:


//codefrom#/js-example.html


/*這道題不能簡單地使用sort,使用sort並不靠譜。因為Set裡面的內容可能有很多種類


*字元串、對象、數字,不同類型之間是不可對比的,所以排序結果並不會一致


*


*最好的方式是按照數學上集合相等的定義:


*A=B當且僅當A是B的子集並且B是A的子集。


*


*這種判斷方式還可以用在對象、map等其他數據類型的判斷當中。


*/


constisSameSet=(s1,s2)=>{


/*獲取一個集合所有的值,判斷另外一個集合是否全部包含該這些值*/


constisSame=(a,b)=>{


constvalues=[...a]


for(letvalofvalues){


/*及時跳出循環,可以降低演算法復雜度*/


if(!b.has(val))returnfalse


}


returntrue


}


/*a包含b,b包含a,那麼兩個集合相同*/


returnisSame(s1,s2)&&isSame(s2,s1)


}


/*By陳小俊*/


//constisSameSet=(set1,set2)=>


//[...set1].every((o)=>set2.has(o))&&


//[...set2].every((o)=>set1.has(o))


十:記憶化斐波那契函數(Memoization)


題目:斐波那契數列指的是類似於以下的數列:


1,1,2,3,5,8,13,....


也就是,第n個數由數列的前兩個相加而來:f(n)=f(n-1)+f(n-2)


請你完成fibonacci函數,接受n作為參數,可以獲取數列中第n個數,例如:


fibonacci(1)//=>1


fibonacci(2)//=>1


fibonacci(3)//=>2


...


測試程序會從按順序依次獲取斐波那契數列中的數,請注意程序不要超時,也不要添加額外的全局變數。


本題來源:《JavaScript語言精髓》


答案:


constfibonacci=((memo=[0,1])=>{


constfib=(n)=>{


letresult=memo[n]


if(typeofresult!=="number"){


result=fib(n-1)+fib(n-2)


memo[n]=result


}


returnresult


}


returnfib


})()
最後就是反應能力,臨場出現意外什麼的了,這就看你自己了,萬一自己一不留神說錯話了,大神給你指出來,請記得謝謝一定要謙虛!在這里小編也希望每一位web培訓班畢業的學員都能順利找到稱心的工作!


免責聲明:內容和圖片源自網路,版權歸原作者所有,如有侵犯您的原創版權請告知,我們將盡快刪除相關內容
在互聯網時代,瀏覽器幾乎主宰著一切,而前端開發人員決定著瀏覽器的內容展現形式和信息的提供,是不可或缺的一部分。前端開發實際上具有很明顯的時代特徵,它在很大程度上決定著大眾的信息攝入,以及用戶讀取信息的有效方式。那麼今天小編為大家總結了一些web前端的面試題,希望對大家有幫助哦!

一:字體高亮函數


題目:請你完成highlight函數,可以把模版字元串中的插入內容替換掉,並且插入文檔以後顯示紅色。例如:


constyourName='ScriptOJ'


constmyName='Jerry'


document.body.innerHTML=highlight`Hello,${yourName}.Iam
${myName}.`


上面例子的頁面顯示如下:


0_1498033735172_upload-2abd65b1-1e98-46ba-b46f-df4188a036a5


請你完成highlight函數的編寫。


答案:


css:


.highlight{


color:red;


}


js:


//考察的是Taggedtemplateliterals的使用


//
#/en-US/docs/Web/JavaScript/Reference/Template_literals


consthighlight=(strings,...args)=>{


returnstrings.rece((str,cur,i)=>{


return`${str}${cur}${args[i]?`class="highlight">${args[i]}`:''}`


},'')


}


二:數組去重


題目:編寫一個函數unique(arr),返回一個去除數組內重復的元素的數組。例如:


unique([0,1,2,2,3,3,4])//=>[0,1,2,3,4]


unique([0,1,Ƈ',Ƈ',2])//=>[0,1,Ƈ',2]


答案:


constunique=(arr)=>[...newSet(arr)]


三:解析字串


題目:完成一個extractStr函數,可以把一個字元串中所有的:到.的子串解析出來並且存放到一個數組當中,例如:


extractStr('Mynameis:Jerry.Myageis:12.')//=>['Jerry',཈']


注意,:和.之間不包含:和.。也即是說,如果::abc..,則返回['abc']。


(本題來源:《JavaScriptCookbook》)


答案:·


constextractStr=(str)=>{


constret=str.match(/:([^:.])*?./g)||[]


returnret.map((subStr)=>subStr.replace(/[:.]/g,''))


}


四:spacify題目:


請你給字元串都添加上原型方法spacify,可以讓一個字元串的每個字母

❷ web前端經典面試題

為大家帶來一些web前端的面試題,希望可以幫助到大家啊。


1.css3有哪些新特性?


選擇器、圓角、動畫、多重背景、背景的寬度高度flex布局響應式布局邊框陰影文本陰影


2.響應式布局怎麼理解的,響應式布局是通過什麼實現?


根據不同的屏幕載入不同的css樣式


1).移動端適配


2).一套代碼適配pc端移動端多個


3.js創建對象有哪幾種方式?


1).自面量


2).newObject


3).構造函數


4.es6有哪些新特性?


1).letconst


2).模板字元串


3).方法的簡寫屬性的簡寫


4).三點運算符


5).解構賦值


6).箭頭函數


7).setmap


8).class類


9).模塊化


5.箭頭函數和普通的方法有什麼區別?


1).箭頭函數省略了function


2).箭頭函數裡面的this指向上下文(可以改變this指向)


6.gulp可以干什麼


gulp自動化構建工具。


壓縮代碼合並代碼壓縮圖片自動處理前綴創建web服務處理sass


7.清除浮動有哪些方法。


1).浮動元素的父元素overflow:hiddenoverflow:auto


2).浮動元素的最後面加一個空div給他clear:both


3).after偽類清除浮動


.clearfix:after{


content:"";


dislpay:block;


height:0px;


clear:both;


}


4)、給父元素設置高度。


8.行內元素塊元素的區別?


1)塊元素默認獨佔一行,行內元素默認情況不獨佔一行,行內元素的的寬度就是內容的寬度


2)默認情況塊元素可以設置寬度高度默認情況行內元素不可以設置寬度高度


3)默認可以margin上下左右,行內默認只能margin左右不能上下。


9.網站載入速度優化?


1).圖片不失真盡量小


2).多個背景圖片合並


3).代碼壓縮代碼合並


4).js寫到頁面最底部


5).懶載入


6).不要有冗餘代碼


7).伺服器帶寬款一些


8).伺服器固態硬碟


9).開啟緩存


10.以前寫代碼什麼情況會成出現亂碼怎麼解決?


解決亂碼文件保存的編碼和設置的編碼必須保持一致


11.以前如何測試調試移動端頁面


1).首先在瀏覽器自帶的調試工具模擬器裡面調試


2).真機的內置瀏覽器調試


3).真機上面的UC裡面調試


4).真機上的微信裡面調試。

❸ 有哪些經典的 Web 前端或者 JavaScript 面試筆試題

一、不定項選擇題 (每題3分,共30分)
1. 聲明一個對象,給它加上name屬性和show方法顯示其name值,以下代碼中正確的是( D )
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:」zhangsan」,show:」alert(this.name)」};
C. var obj = {name:」zhangsan」,show:function(){alert(name);}};
D. var obj = {name:」zhangsan」,show:function(){alert(this.name);}};
2. 以下關於Array數組對象的說法不正確的是( CD )
A. 對數組里數據的排序可以用sort函數,如果排序效果非預期,可以給sort函數加一個排序函數的參數
B. reverse用於對數組數據的倒序排列
C. 向數組的最後位置加一個新元素,可以用pop方法
D. unshift方法用於向數組刪除第一個元素
3. 要將頁面的狀態欄中顯示「已經選中該文本框」,下列JavaScript語句正確的是( A )
A. window.status=」已經選中該文本框」
B. document.status=」已經選中該文本框」
C. window.screen=」已經選中該文本框」
D. document.screen=」已經選中該文本框」
4. 點擊頁面的按鈕,使之打開一個新窗口,載入一個網頁,以下JavaScript代碼中可行的是( AD )
A. <input type=」button」 value=」new」
onclick=」open(『new.html』, 『_blank』)」/>
B. <input type=」button」 value=」new」
onclick=」window.location=』new.html』;」/>
C. <input type=」button」 value=」new」
onclick=」location.assign(『new.html』);」/>
D. <form target=」_blank」action=」new.html」>
<inputtype=」submit」 value=」new」/>
</form>
5. 使用JavaScript向網頁中輸出<h1>hello</h1>,以下代碼中可行的是( BD )
A. <scripttype=」text/javascript」>
document.write(<h1>hello</h1>);
</script>
B. <scripttype=」text/javascript」>
document.write(「<h1>hello</h1>」);
</script>
C. <scripttype=」text/javascript」>
<h1>hello</h1>
</script>
D. <h1>
<scripttype=」text/javascript」>
document.write(「hello」);
</script>
</h1>
6. 分析下面的代碼:
<html>
<head>
<script type=」text/javascript」>
function writeIt (value) { document.myfm.first_text.value=value;}
</script>
</head>
<body bgcolor=」#ffffff」>
<form name=」myfm」>
<input type=」text」 name=」first_text」>
<input type=」text」 name=」second_text」>
</form>
</body>
</html>
以下說法中正確的是( CD )
A. 在頁面的第二個文本框中輸入內容後,當滑鼠離開第二個文本框時,第一個文本框的內容不變
B. 在頁面的第一個文本框中輸入內容後,當滑鼠離開第一個文本框時,將在第二個文本框中復制第一個文本框的內容
C. 在頁面的第二個文本框中輸入內容後,當滑鼠離開第二個文本框時,將在第一個文本框中復制第二個文本框的內容
D. 在頁面的第一個文本框中輸入內容後,當滑鼠離開第一個文本框時,第二個文本框的內容不變
7. 下面的JavaScript語句中,( D )實現檢索當前頁面中的表單元素中的所有文本框,並將它們全部清空
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==」text」)
form1.elements.value=」";}
B. for(vari=0;i<document.forms.length;i++) {
if(forms[0].elements.type==」text」)
forms[0].elements.value=」";
}
C. if(document.form.elements.type==」text」)
form.elements.value=」";
D. for(vari=0;i<document.forms.length; i++){
for(var j=0;j<document.forms.elements.length; j++){
if(document.forms.elements[j].type==」text」)
document.forms.elements[j].value=」";
}
}
8. 在表單(form1)中有一個文本框元素(fname),用於輸入電話號碼,格式如:010-82668155,要求前3位是010,緊接一個「-」,後面是8位數字。要求在提交表單時,根據上述條件驗證該文本框中輸入內容的有效性,下列語句中,( A )能正確實現以上功能
A. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」|| str.substr(4).length!=8 ||
isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼!」);
B. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」 && str.substr(4).length!=8 &&
isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼!」);
C. var str= form1.fname.value;
if(str.substr(0,3)!=」010-」|| str.substr(3).length!=8 ||
isNaN(parseFloat(str.substr(3))))
alert(「無效的電話號碼!」);
D. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」&& str.substr(4).length!=8 &&
!isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼!」);

❹ 找個java畢業設計題目 web方面的,要新穎 實用

我來推薦你一些題目,都是些實用而且新穎的題目,你可以參考試試,滿意請給分。
基於SSM的酒店管理系統-java酒店管理系統
基於SSM的勤工助學管理系統
基於SSM的供應商管理系統
基於springboot&mybatis的銷售管理系統輕量級銷售團隊管理-java銷售管理系統
基於SSM的寵物領養系統-java寵物領養系統
基於SSH的綠咖奶茶網站
基於SSH的教務管理課程管理選課管理系統
基於SSM的小區業主服務平台之垃圾回收信息管理系統
基於SSM的科技項目評估及專家會議評審系統
基於SSM&EasyUI的西服門店管理系統-java門店管理服裝管理系統
基於Mybatis的教學管理系統作業提交批改管理系統-java教學管理系統作業提交批改管理系統
基於SSM的圖書館座位預約管理系統佔座系統-java圖書館座位預約管理系統佔座系統
基於Mybatis的教學管理系統作業提交批改管理系統-java教學管理系統作業提交批改管理系統
基於SSM的駕校預約報名管理系統-java駕校預約報名管理系統
基於SSM的圖書館座位預約管理系統佔座系統-java圖書館座位預約管理系統佔座系統
基於SSM的水質檢測系統-java水質檢測系統
基於SSM的學生作業管理系統作業提交作業批改-java作業批改作業提交系統
基於springboot2.0的易居二手房網站-房屋管理系統
基於SSM的泉州信息工程學院教師測評系統-java教師測評系統
基於SSM的超市進銷存管理系統-java進銷存管理

❺ 參加Web前端面試一定看的Web前端面試題庫(一)

今天小編要跟大家分享的文章是關於參加Web前端面試一定看的Web前端面試題庫。正在學習web前端知識准備參加web前端面試的小夥伴們來和小編一起看一看吧。


HTML(5)和CSS3方面


01.前端與後端數據交互的格式有哪些,為什麼大部分現在都用json而不用xml?


答:XML:知了堂3歲


JSON:{name:」知了堂」,age:3}


JSON書寫方便節省位元組,更輕量,前後台都有直接解析JSON的方法(JSON.stringfity/parse)使用方便。


02.Flex布局熟悉嗎,說幾個常用的屬性。


答:這個幾乎每天都在用,還是挺熟悉的。


__
display:flex


___align-items多個


__
align-content:單個


___justify-content


___justify-items


___flex-direction


__
flex-wrap:


__
flex-basic:初始盒子寬度_lex


_
_lex-grow:增長因子2004*40=1601,1,1,21/5*40_lex


___flex-shrink
:縮減因子20060*4=240


03.說一下CSS盒模型。


答:CSS的盒模型包含了以下幾個內容margin,padding,border,content。


在計算盒子寬高的時候,IE和Chrome會有一些區別,IE算到border,Chrome的寬度只包含content區域,因此CSS3提供了box-sizing這個屬性來修改。


04.CSS常用選擇器,選擇器權重問題。


答:*(has,not,target,root。。。。)通配符,ID,class,attr屬性,element,子代(>+~),


___UI狀態偽類選擇器(hover,active,link,seceted..,checked),


___結構性偽類選擇器(nth-child,fist-child,last,nth-of-type...before,after....)


___!important
>style>id>class>elemnet>偽類和屬性


05.請用5種方式實現元素垂直居中。


答:


(1)flex

(2)Tranform

(3)定位+margin負值(知道子節點寬高)

(4)定位+margin:auto

(5)JS動態計算top、left值


06.什麼是BFC?垂直margin重疊是為什麼?怎麼解決這個問題?


答:


概念:BFC全稱BlockFormatting
Context,中文意思為塊級格式上下文。


通俗的來說:BFC是一個獨立的布局環境,我們可以理解為一個箱子(實際上是看不見摸不著的),箱子內部的元素無論如何翻江倒海,都不會影響到外部。轉換為BFC的理解則是:BFC中的元素的布局是不受外界的影響(我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。比如清除浮動)並且在一個BFC中,塊元素與行元素都會垂直的沿著其父元素的邊框排列。


如何觸發BFC


1.浮動元素,float除none以外的值


2.position的值不為static或者relative


3.display不為none


4.overflow除了visible以外的值


BFC的應用


1.解決浮動塌陷問題


2.自適應兩欄布局(我們還可以運用BFC可以阻止元素被浮動元素覆蓋的特性來實現自適應兩欄布局。方法:給沒有浮動的元素加overflow:hidden。)


3.解決設置margin值重疊問題。


總結:


BFC就是頁面上的一個隔離的獨立容器,容器裡面的子元素不會影響到外面的元素。


07.什麼是浮動,有什麼作用,有何副作用,以及如何清除浮動?


答:浮動是使用給節點添加float屬性,最初的設計是用來實現文字環繞的。


添加了float的節點脫離文檔流,同時觸發節點的BFC,讓節點往一個方向靠,並排成一行。


當一個父節點的子節點全部浮動,就會造成父節點高度塌陷,


解決的辦法首先是可以給父節點主動添加高度值,再者利用只要有一個子節點不浮動原理來添加一個不浮動的節點(通常使用偽元素before,after),再者還可以觸發父節點的bfc,常用的定位,或者overflow:hidden。


08.CSS裡面有哪些相對單位?都是相對什麼的?


答:REM,EM,VW,VH等


__
REM:相對於根節點html的font-size


__
EM:父節點的font-size


__W:視口的寬度為100VW,相對於把視口分為100份


__
VH:視口高度為100VH,同理


__隕系ノ歡伎梢栽諞貧俗鮃趁媸逝洌ǔJ褂_EM和VW


09.fixed是相對於誰定位的?如果加上transform會出現問題嗎?


答:fixed定位相對於瀏覽器視口來定位的。


添加上transform以後,fixed定位會失效。如果fixed元素的祖先有transform屬性,則fixed元素會相對與這個祖先計算,而不是視口。


10.為什麼不推薦用style內聯元素?內聯元素有什麼缺點?(css文件可以緩存)


答:首先是style是節點的屬性,不能被緩存;代碼的可讀性和可維護性相對弱一些,特別是多人協作開發的時候。但是如果一個頁面的style樣式足夠少的時候,可以使用style元素,因為一次請求最多攜帶14K的數據,如果足夠小,還可以節約一次請求。


11.簡單描述http與https協議,以及為什麼要三次握手?什麼是長鏈接?


答:http與https都是目前主流傳輸協議。


目前http協議已經發展到2.0階段,支持長鏈接,斷點續傳,cache緩存策略,多路復用,伺服器推送等。


https相對於http更安全,增加了證書SSL加密,埠是433。


客戶端SYN=1,Seq
=x,服務端接受到後,服務端就知道了,有一個客戶端要鏈接我,然後伺服器就會開啟一個TCPsocket的埠,然後返回數據給前端也是SYN=1,SEQ=Y,ACK=x+1,客戶端接受到後,在發一個seq,和ACK+1.主要是為了防止開啟無用的鏈接,或者網路延遲丟包,伺服器無法確定到底客戶端有沒有收到消息。


在使用長連接的情況下,當一個網頁打開完成後,客戶端和伺服器之間用於傳輸HTTP數據的TCP連接不會關閉,客戶端再次訪問這個伺服器時,會繼續使用這一條已經建立的連接。


Keep-Alive不會永久保持連接,它有一個保持時間,可以在不同的伺服器軟體(如Apache)中設定這個時間。實現長連接需要客戶端和服務端都支持長連接。


為何需要長鏈接?


長鏈接可以省去較多的TCP建立和關閉的操作,減少浪費,節約時間。


12.http常見狀態碼有哪些?301和302的區別是什麼?304是指什麼?


答:404:找不到資源;


500:伺服器內部錯誤;


200:請求成功,並返回數據;


301:永久重定向;


302:_偈幣貧墒褂迷_RI;


304:資源未修改,可使用緩存;


400:請求語法錯誤(一般為參數錯誤);


403:沒有許可權訪問。。。等


13.瀏覽器頁面渲染的流程是什麼(輸入url後頁面發生什麼)?


答:首先dns解析IP,建立tcp鏈接下載資源,構建dom樹,當遇到link標簽,會下載並執行解析css(不會阻止dom樹的構建)當遇到script標簽的是,dom樹構建會暫停,下載並執行完js才會繼續(defer(下載延遲執行),async(非同步下載並執行))然後再布局和繪制(layout,paint)最後再render。


14.什麼是reflow與repain?哪些操作會觸發reflow,如何避免?


答:reflow:迴流,當元素的尺寸、結構或觸發某些屬性時,瀏覽器會重新渲染頁面,稱為迴流。


__repain:重繪,當元素的樣式(布局不發生)發生改變的時候。


以下常見操作都會觸發:


瀏覽器窗口大小改變


元素尺寸、位置、內容發生改變


元素字體大小變化


添加或者刪除可見的dom元素


激活CSS偽類(例如::hover)等


盡量減少DOM操作。


15.HTML5常用的API有哪些?你用過哪些?


答:video、audio,獲取dom的方式(queryselector),websocket


Canvas,svg,requestAnimationFrame,Geolocation,stroage,notification,OrientationAPI用於檢測手機的擺放方向等


16.請列舉出幾個常見的瀏覽器兼容性問題?


答:現在市面上IE678基本已經停止使用了,所以盡量不要說這方面的兼容性。


1、不同瀏覽器的默認margin和padding不一致


2、圖片的默認間距不一致


3、獲取視口的寬高window.innerheight/width


4、CSS3的動畫,過渡,漸變,flex也有


5、Canvas,SVG


6、IE9以下不能的opacity,使用filter:alpha(opacity=50);


7、event.offsetX/Y


8、綁定事件IE9才支持


17.什麼是瀏覽器緩存(知道什麼是強緩存和協商緩存)?


答:當瀏覽器訪問過後的資源,會被瀏覽器緩存的本地,當下次在訪問頁面的時候,如果沒有過期,直接讀取緩存,加快瀏覽器的載入效率。


http緩存機制:


1、Expires:通過設置最大緩存時間,當時間超過了就去伺服器下載,


2、http1.1,cache-control:max-age=time,當time過期後,檢測etag帶上etag往伺服器發請求,如果etag沒變,直接告訴瀏覽器讀本地緩存,如果沒有etag就會檢測Last-Modified,判斷如果上一次更改的時候,距離本次訪問時間比較久,說明文件沒有發生改變,返回304。


強緩存就是當前訪問時間還在設置的最大時間范圍內。


協商緩存就是時間過了,通過檢查etag或者last-modifed來使用緩存的機制。


18.說一下瀏覽器垃圾回收機制


答:老:標記清除演算法,GC會檢測當前對象有沒有被變數所引用,如果沒有就回收。


新:Scavenge,把內存空間分為兩部分,分別為From空間和To空間。當一個空間滿了以後,會把空間中活動對象轉移到另外一個空間,這樣互換。


以上就是小編今天為大家分享的關於參加Web前端面試一定看的Web前端面試題庫的文章,希望本篇文章能夠對正准備參加web前端面試的小夥伴們有所幫助,想要了解web前端知識記得關注北大青鳥web培訓官網,最後祝願小夥伴們工作順利!


❻ Web前端面試之css高頻面試題

今天小編要跟大家分享的文章是關於web前端面試之css高頻面試題。想要參加web前端面試的小夥伴們來和小編一起看一看吧,希望本篇文章能夠對大家有所幫助。


1.什麼是BFC機制


BFC(BlockFormattingContext),塊級格式化上下文,是一個獨立的渲染區域,讓處於BFC內部的元素與外部的元素相互隔離,使內外元素的定位不會相互影響。


·___シ⑻跫(以下任意一條)


§_loat的值不為none


§_verflow的值不為visible


§_isplay的值為table-cell、tabble-caption和inline-block之一


§_osition的值不為static或則releative中的任何一個


在IE下,Layout,可通過zoom:1_シ


·___FC布局與普通文檔流布局區別:


BFC布局規則:


1._浮動的元素會被父級計算高度(父級元素觸發了BFC)


2._非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發了BFC)


3._margin不會傳遞給父級(父級觸發BFC)


4._屬於同一個BFC的兩個相鄰元素上下margin會重疊


5._普通文檔流布局:浮動的元素是不會被父級計算高度


6._非浮動元素會覆蓋浮動元素的位置


7._margin會傳遞給父級元素


8._兩個相鄰元素上下的margin會重疊


·___⒅械撓τ


§_柚_argin重疊


§_梢園《亍宄誆扛《(清除浮動的原理是兩個div都位於同一個BFC區域之中)


§_允視α嚼覆季


§_梢宰柚乖乇桓《馗哺


2.CSS3中新增的選擇器以及屬性


這里只是列出來,具體的使用,請查看我的關於css3新增選擇器與屬性文章


·___糶匝≡衿


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}


屬性選擇器
含義描述
E[att^="val"]
屬性att的值以"val"開頭的元素


E[att$="val"]
屬性att的值以"val"結尾的元素


E[att*="val"]
屬性att的值包含"val"字元串的元素


·___峁刮崩嘌≡衿


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}


選擇器
含義描述
E:root
匹配文檔的根元素,對於HTML文檔,就是HTML元素


E:nth-child(n)
匹配其父元素的第n個子元素,第一個編號為1


E:nth-last-child(n)
匹配其父元素的倒數第n個子元素,第一個編號為1


E:nth-of-type(n)
與:nth-child()作用類似,但是僅匹配使用同種標簽的元素


E:nth-last-of-type(n)
與:nth-last-child()作用類似,但是僅匹配使用同種標簽的元素


E:last-child
匹配父元素的最後一個子元素,等同於:nth-last-child(1)


E:first-of-type
匹配父元素下使用同種標簽的第一個子元素,等同於:nth-of-type(1)


E:last-of-type
匹配父元素下使用同種標簽的最後一個子元素,等同於:nth-last-of-type(1)


E:only-child
匹配父元素下僅有的一個子元素,等同於:first-child:last-child或:nth-child(1):nth-last-child(1)


E:only-of-type
匹配父元素下使用同種標簽的唯一一個子元素,等同於:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)


E:empty
匹配一個不包含任何子元素的元素,注意,文本節點也被看作子元素


·___ss3新增屬性


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}


屬性
含義描述
兼容
transition
設置過渡效果
transform
變換效果(移動、縮放、轉動、拉長或拉伸)
animation
動畫效果
box-shadow
陰影效果
FF3.5,Safari4,Chrome3


text-shadow
文本陰影
FF3.5,Opera10,Safari4,Chrome3


border-colors
為邊框設置多種顏色
FF3+


boder-image
圖片邊框
FF3.5,Safari4,Chrome3


text-overflow
文本截斷
IE6+,Safari4,Chrome3,Opera10


word-wrap
自動換行
IE6+,FF3.5,Safari4,Chrome3


border-radius
圓角邊框
FF3+,Safari4,Chrome3


opacity
不透明度
all


box-sizing
控制盒模型的組成模式
FF3+,Opera10,Safari4,Chrome3


outline
外邊框
FF3+,safari4,chrome3,opera10


background-size
不指定背景圖片的尺寸
safari4,chrome3,opera10


background-origin
指定背景圖片從哪裡開始顯示
safari4,chrome3,FF3+


background-clip
指定背景圖片從什麼位置開始裁切
safari4,chrome3


rgba
基於r,g,b三個顏色通道來設置顏色值,通過a來設置透明度
safari4,chrome3,FF3,opera10


3.居中布局


·___驕又


1._行內元素:_ext-align:center


2._塊級元素:_argin:0auto


3._絕對定位和移動:_bsolute+transform


4._絕對定位和負邊距:_bsolute+margin


5._flex布局:_lex+
justify-content:center


·___怪本又


1._子元素為單行文本:_ine-height:height


2._absolute+transform


3._flex+align-items:center


4._table:_isplay:table-cell;vertical-align:
middle


5._利用position和top和負margin


·___醬怪本又_HAPE*MERGEFORMAT


1.已知元素寬高:絕對定位+margin:auto:


_div{
___idth:200px;
___eight:200px;
___ackground:
green;

___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_


2.已知元素寬高:_遠ㄎ+負margin


_div{
___idth:200px;
___eight:200px;
___ackground:
green;

___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_


3.absolute+transform


_div{
__width:200px;
__height:200px;
__background:
green;

__position:absolute;
__left:50%;_/*定位父級的50%*/
__top:50%;
__transform:translate(-50%,-50%);/*自己的50%*/
_}


4.flex+justify-content
+align-items


.box{
_height:600px;

_display:flex;
_justify-content:center;//子元素水平居中
_align-items:center;__//子元素垂直居中
__/*aa只要三句話就可以實現不定寬高水平垂直居中。*/
__
.box>div{
__ackground:
green;
__idth:200px;
__eight:200px;
_


4.清除浮動有哪些方法,各有什麼優缺點


·___褂_lear屬性的空元素
在浮動元素後使用一個空元素如

❼ 急求一個關於web方面的畢業設計題目,容易做一點的更好

可以通過修改這個web進銷存系統,邊修改邊學習。免費的隨便用。https://download.csdn.net/download/wrwttsy/11110050

❽ 常見的web前端面試題及答案分享

1、 說下行內元素和塊級元素的區別?行內塊元素的兼容性使用?(IE8 以下)


答:行內元素:會在水平方向排列,不能包含塊級元素,設置width無效,height無效(可以設置line-height),margin上下無效,padding上下無效。塊級元素:各占據一行,垂直方向排列。從新行開始結束接著一個斷行。兼容性:display:inline-block;*display:inline;*zoom:1。



2、box-sizing常用的屬性有哪些?分別有什麼作用?


答:box-sizing: content-box|border-box|inherit。content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。


border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。


3、Doctype作用?標准模式與兼容模式各有什麼區別?


答:告知瀏覽器的解析器用什麼文檔標准解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。


標准模式的排版和JS運作模式都是以該瀏覽器支持的最高標准運行。在兼容模式中,頁面以寬松的向後兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。


4、html5有哪些新特性?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?


答:HTML5 現在已經不是 SGML 的子集,主要是關於圖像,位置,存儲,多任務等功能的增加。


(1)繪畫 canvas;


(2)用於媒介回放的 video 和 audio 元素;


(3)本地離線存儲 localStorage 長期存儲數據,瀏覽器關閉後數據不丟失;


(4)sessionStorage 的數據在瀏覽器關閉後自動刪除;


(5)語意化更好的內容元素,比如 article、footer、header、nav、section;


(6)表單控制項,calendar、date、time、email、url、search;


(7)新的技術webworker, websocket, Geolocation;


IE8/IE7/IE6支持通過document.createElement方法產生的標簽,可以利用這一特性讓這些瀏覽器支持HTML5新標簽,瀏覽器支持新標簽後,還需要添加標簽默認的樣式。當然也可以直接使用成熟的框架、比如html5shim。


以上就是環球青藤小編關於web前端面試題的相關分享,希望對大家有所幫助,想要了解更多相關內容,請及時關注本平台並進行查看!

❾ 有哪些經典的 Web 前端或者 JavaScript 面試筆試題

一、不定項選擇題 (每題3分,共30分)
1. 聲明一個對象,給它加上name屬性和show方法顯示其name值,以下代碼中正確的是( D )
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:」zhangsan」,show:」alert(this.name)」};
C. var obj = {name:」zhangsan」,show:function(){alert(name);}};
D. var obj = {name:」zhangsan」,show:function(){alert(this.name);}};
2. 以下關於Array數組對象的說法不正確的是( CD )
A. 對數組里數據的排序可以用sort函數,如果排序效果非預期,可以給sort函數加一個排序函數的參數
B. reverse用於對數組數據的倒序排列
C. 向數組的最後位置加一個新元素,可以用pop方法
D. unshift方法用於向數組刪除第一個元素
3. 要將頁面的狀態欄中顯示「已經選中該文本框」,下列JavaScript語句正確的是( A )
A. window.status=」已經選中該文本框」
B. document.status=」已經選中該文本框」
C. window.screen=」已經選中該文本框」
D. document.screen=」已經選中該文本框」
4. 點擊頁面的按鈕,使之打開一個新窗口,載入一個網頁,以下JavaScript代碼中可行的是( AD )
A. <input type=」button」 value=」new」
onclick=」open(『new.html』, 『_blank』)」/>
B. <input type=」button」 value=」new」
onclick=」window.location=』new.html』;」/>
C. <input type=」button」 value=」new」
onclick=」location.assign(『new.html』);」/>
D. <form target=」_blank」action=」new.html」>
<inputtype=」submit」 value=」new」/>
</form>

❿ 2020年Web前端面試題匯總(一)

今天小編要跟大家分享的文章是關於2020年Web前端面試題匯總。由於內容較多小編分開為大家介紹,今天首先來和小編一起看一看第一部分的內容,希望這些面試題能夠對正准備找Web前端相關工作的小夥伴們有所幫助。

1.說幾條寫JavaScript的基本規范?


1)不要在同一行聲明多個變數;


2)請使用===/!==來比較true/false或者數值;


3)使用對象字面量替代newObject這種形式;


4)減少使用全局函數,全局變數;


5)switch語句必須帶有default分支;


6)if語句必須使用大括弧;


7)for-in循環中的變數;


應該使用var關鍵字明確限定作用域;


從而避免作用域全局污染。


2.說說平衡二叉樹?


平衡二叉搜索樹(Self-balancingbinarysearchtree)


又被稱為AVL樹。


具有以下性質:


1)它是一棵空樹或它的左右兩個子樹


的高度差的絕對值不超過1,


並且左右兩個子樹都是一棵平衡二叉樹。


2)平衡二叉樹必定是二叉搜索樹,反之則不一定。


3)平衡二叉樹的常用實現方法有紅黑樹、AVL、


替罪羊樹、Treap、伸展樹等。


最小二叉平衡樹的節點的公式如下:


F(n)=F(n-1)+F(n-2)+1備註:1是根節點,


F(n-1)是左子樹的節點數量,


F(n-2)是右子樹的節點數量。


3.清除浮動和解決垂直外邊距重疊的解決方案?


問題描述:


1)父元素沒有設置寬高,尺寸由子元素撐起;


子元素一旦浮動,父元素高度會發生塌陷。


2)子元素設置margin-top會作用的父元素的margin-top;


此時會造成垂直外邊距重疊。


.clearfix::after,.clearfix::before{


content:''


display:table;


clear:both;


}


4.sessionStorage、localStorage和cookie?


相同點:


都用於瀏覽器端存儲的緩存數據;


不同點:


1)存儲內容是否發送到伺服器端


當設置了Cookie後,數據會發送到伺服器端,


造成一定的寬頻浪費;xxxstorage則會將數據保存


到本地,不會造成寬頻浪費;


2)數據存儲大小不同


Cookie數據不能超過4K,適用於會話標識;


xxxstorage數據存儲可以達到5M;


3)數據存儲的有效期限不同


cookie只在設置了Cookid過期時間


之前一直有效,即使關閉窗口或者瀏覽器;


sessionStorage,僅在關閉瀏覽器之前有效;


localStorage,數據存儲永久有效;


4)作用域不同


cookie和localStorage是在同源同窗口中


都是共享的;


sessionStorage不在不同的瀏覽器窗口


中共享,即使是同一個頁面;


5.判斷一個單詞是否是迴文?


迴文是指把相同的詞彙或句子,


在下文中調換位置或顛倒過來,


產生首尾回環的情景,


叫做迴文,也叫回環。


比如cacac,redivider。


letcheckPalindrom=(str)=>{


returnstr===


str.split('').reverse().join('');


}


6.不藉助臨時變數,進行兩個整數的交換?


輸入a=3,b=1,


輸出a=1,b=3


letswap=(a,b)=>{


b=b-a;


a=a+b;


b=a-b;


return[a,b];


}


7.請寫出至少5個html5新增的標簽,並說明其語義和應用場景?


section:定義文檔中的一個章節;


nav:定義只包含導航鏈接的章節;


header:定義頁面或章節的頭部;


它經常包含logo、頁面標題和導航性的目錄。


footer:定義頁面或章節的尾部;


它經常包含版權信息、法律信息鏈接和反饋建議用的地址。


aside:定義和頁面內容關聯度較低的內容,


如果被刪除,剩下的內容仍然很合理。


8.get和post請求在緩存方面的區別?


get請求類似於查找的過程,用戶獲取數據,


可以不用每次都與資料庫連接,所以可以使用緩存。


post不同,post做的一般是修改和刪除的工作,


所以必須與資料庫交互,所以不能使用緩存。


因此get請求適合於請求緩存。


9.如何解決非同步回調地獄?


promise、generator、async/await


10.圖片的懶載入和預載入?


預載入:提前載入圖片,


當用戶需要查看時可直接


從本地緩存中渲染。


懶載入:懶載入的主要目的


是作為伺服器前端的優化,


減少請求數或延遲請求數。


兩種技術的本質:


兩者的行為是相反的,


一個是提前載入,


一個是遲緩甚至不載入。


懶載入對伺服器前端有一定


的緩解壓力作用,


預載入則會增加伺服器前端壓力。


11.bind,apply,call的區別?


通過apply和call改變函數的this指向,


這兩個函數的第一個參數都是一樣的,


表示要改變指向的那個對象,


第二個參數,apply是數組,


而call則是arg1,arg2...這種形式。


通過bind改變this作用域


會返回一個新的函數,


這個函數不會馬上執行。


12.js怎麼控制一次載入一張圖片,載入完後再載入下一張?


方法一:





varobj=newImage();


obj.src="#/21.jpg";


obj.onload=function(){


document.getElementById("pic")


.innnerHTML="";


}


載入中