前端工程師2022版【W(wǎng)整】

時(shí)間：2023-07-23 07:15:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-23 07:15:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

前端工程師2022版【W(wǎng)整】：Download:

前端工程師2022版如何快速學(xué)習(xí)

前端開發(fā)是創(chuàng)建Web頁(yè)面或app等前端界面呈現(xiàn)給用戶的過(guò)程，通過(guò)HTML，CSS及JavaScript以及衍生出來(lái)的各種技術(shù)、框架、解決方案，來(lái)實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互 。它從網(wǎng)頁(yè)制作演變而來(lái)，名稱上有很明顯的時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁(yè)制作是Web1.0時(shí)代的產(chǎn)物，早期網(wǎng)站主要內(nèi)容都是靜態(tài)，以圖片和文字為主，用戶使用網(wǎng)站的行為也以瀏覽為主。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展和HTML5、CSS3的應(yīng)用，現(xiàn)代網(wǎng)頁(yè)更加美觀，交互效果顯著，功能更加強(qiáng)大。


1：學(xué)習(xí)過(guò)程中遇到一個(gè)小錯(cuò)誤卡住很長(zhǎng)時(shí)間，很多人就會(huì)在網(wǎng)上不斷的找資料，找案例這樣效率是比較慢的，應(yīng)該自己一步一步進(jìn)行反推，其實(shí)有時(shí)候可能你本來(lái)就沒有任何問(wèn)題而是你的代碼出現(xiàn)一個(gè)中文符號(hào)，空格，括號(hào)不全，所以耐心的先反推一下，這樣一是提高自己獨(dú)立解決能力，二是讓自己能記住這樣錯(cuò)誤下次可以快速反應(yīng)。

2：很多人習(xí)慣邊看視頻邊敲代碼，其實(shí)這樣對(duì)于提高是有影響的，應(yīng)該是你先了解原理和寫法，然后自己在操作一遍，并且拓展自己這樣的原理還在哪里可以運(yùn)用，這樣下次再寫類似的效果或者插件的時(shí)候，可以直接想起來(lái)。

3：格式問(wèn)題，代碼編寫的格式，說(shuō)重要可能不重要，因?yàn)橹灰銓懗鰜?lái)效果是沒問(wèn)題的，但是我們要想一下代買的可維護(hù)性，當(dāng)你過(guò)幾天幾周，幾個(gè)月的時(shí)候在看這個(gè)代碼，你確定你還能知道是怎么寫的，并且在給上級(jí)看的時(shí)候上級(jí)能看懂，所以代碼的格式也很重要的，所以盡量把代買寫的規(guī)范一些，記得在大板塊的方面加一個(gè)小小的備注，不光方便自己也方便他人。

2022最新web前端開發(fā)工程師面試題

前端工程師2022版面試

display:none; 和visibility:hidden;

display:none; 徹底消失，釋放空間。可能引發(fā)頁(yè)面的reflow回流（重排）。

visibility:hidden; 就是隱藏，但是位置沒釋放，好比opacity:0; 不會(huì)引發(fā)頁(yè)面回流。

你做的頁(yè)面在哪些瀏覽器內(nèi)核中測(cè)試過(guò)

1、IE瀏覽器內(nèi)核：Trident內(nèi)核，也是俗稱的IE內(nèi)核；

2、Chrome瀏覽器內(nèi)核：統(tǒng)稱為Chromium內(nèi)核或Chrome內(nèi)核，以前是Webkit內(nèi)核，現(xiàn)在是Blink內(nèi)核；

3、Firefox瀏覽器內(nèi)核：Gecko內(nèi)核，俗稱Firefox內(nèi)核；

4、Safari瀏覽器內(nèi)核：Webkit內(nèi)核；

5、Opera瀏覽器內(nèi)核：最初是自己的Presto內(nèi)核，后來(lái)是Webkit，現(xiàn)在是Blink內(nèi)核 ；

6、360瀏覽器、獵豹瀏覽器內(nèi)核：IE+Chrome雙內(nèi)核；

7、搜狗、遨游、QQ瀏覽器內(nèi)核：Trident（兼容模式）+Webkit（高速模式）；

8、百度瀏覽器、世界之窗內(nèi)核：IE內(nèi)核；

9、2345瀏覽器內(nèi)核：以前是IE內(nèi)核，現(xiàn)在也是IE+Chrome雙內(nèi)核

CSS 選擇器權(quán)重如何計(jì)算

就近原則：直接選中的，一定比繼承的權(quán)重大。

一樣近，比權(quán)重：id是100，class是10，標(biāo)簽是1， 總數(shù)權(quán)重一樣誰(shuí)寫在下面聽誰(shuí)的。

行內(nèi) > 內(nèi)嵌 = 外聯(lián) > 導(dǎo)入 !important能夠提升權(quán)限，但是不能提升繼承的 class="a b c" 和掛載順序無(wú)關(guān)，看寫的順序

web 前端開發(fā)，如何提高頁(yè)面性能優(yōu)化（常問(wèn)）

1.減少http請(qǐng)求次數(shù)

2.從用戶的角度講，靜態(tài)資源（圖片，css，js）都使用cdn，cdn就是一組分布在不同地方的web服務(wù)器，用戶離服務(wù)器更近，請(qǐng)求的時(shí)間就更短

3.講css放在文件頭部，js文件放在底部（資源加載是，自上而下的，先加載css會(huì)讓用戶感覺頁(yè)面加載更快）

4.盡可能使用iconfont代替圖片圖標(biāo)

5.善用緩存，不重復(fù)加載相同的資源（數(shù)據(jù)如果要重復(fù)使用，就可以使用緩存，不要重復(fù)請(qǐng)求）

6.圖片懶加載（當(dāng)滾動(dòng)條，滾動(dòng)到一定值的時(shí)候，再加載），

• 不要縮放圖片（例如你要50*50的圖片，就不要拿500乘以500的大圖片，影響加載）
• 降低圖片質(zhì)量
• 盡可能用css來(lái)代替圖片（例如漸變，陰影）
• 使用webp格式圖片

什么叫優(yōu)雅降級(jí)和漸進(jìn)漸強(qiáng)

優(yōu)雅降級(jí)和漸進(jìn)漸強(qiáng) 是瀏覽器兼容的兩種方案。

1、優(yōu)雅降級(jí)： 能力檢測(cè)，如果能力有用新的；如果能力沒有，用舊的。（先從高級(jí)功能實(shí)現(xiàn)，后面在逐級(jí)降低）

2、漸進(jìn)漸強(qiáng)： 低端瀏覽器僅實(shí)現(xiàn)基本功能，高級(jí)瀏覽器實(shí)現(xiàn)額外功能。 （先實(shí)現(xiàn)基本功能。然后在實(shí)現(xiàn)高級(jí)功能）

比如上傳文件，低端瀏覽器就給它提供上傳按鈕，高端瀏覽器增加外部拖拽文件上傳。

如何形成 BFC

BFC是塊級(jí)格式化上下文。

理論上講，頁(yè)面上所有的盒子必須都裝到BFC盒子中，頁(yè)面渲染才快。

BFC的形成：

① 有明確寬度、高度的盒子。

② overflow:hidden；

③ 定位的、浮動(dòng)的

④ display ：inline-block，

BFC的性質(zhì)： 內(nèi)部有浮動(dòng)，能清除這些浮動(dòng)，能為浮動(dòng)元素?fù)胃摺?br>

CSS 的盒模型

1、標(biāo)準(zhǔn)盒模型：

范圍：margin、border、padding、content

在標(biāo)準(zhǔn)盒子模型中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。

增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。

標(biāo)準(zhǔn)盒模型下盒子的大小 = content + border + padding + margin

2、IE盒子模型（怪異盒模型）中

范圍：margin、border、padding、content都有，但是不同是content包含border、padding

width 和 height 指的是content+border+padding的寬度和高度。

怪異盒模型下盒子的大小=width（content + border + padding） + margin

3、盒模型的選擇

可以為box-sizing賦三個(gè)值：

content-box： 默認(rèn)值，border和padding不算到width范圍內(nèi)，可以理解為是W3c的標(biāo)準(zhǔn)模型(default)

border-box：border和padding劃歸到width范圍內(nèi)，可以理解為是IE的怪異盒模型

padding-box：將padding算入width范圍

當(dāng)設(shè)置為box-sizing:content-box時(shí)，將采用標(biāo)準(zhǔn)模式解析計(jì)算（默認(rèn)模式）；

當(dāng)設(shè)置為box-sizing:border-box時(shí)，將采用怪異模式解析計(jì)算；

如何垂直水平居中一個(gè)元素（常問(wèn)）

1、彈性布局：display:flex; justify‐content: center; align‐items: center;

2、定位

3、display:inline-block配合text-align:center

對(duì)單位px、em、rem、vh、vw的理解

px物理像素，絕對(duì)值；

em相對(duì)于父級(jí)的大小，相對(duì)值；

rem相對(duì)于html的大小，相對(duì) 值；

vh相對(duì)于屏幕的高度，相對(duì)值；vw相對(duì)于屏幕的寬度，相對(duì)值