摘要:安全性請求可被緩存,請求保存在瀏覽器歷史記錄中則不能被緩存。與相比,的安全性較差,因為發送的數據是的一部分。
酷狗一面 1. 如何實現三欄布局(左右兩邊固定寬度,中間自適應)?
使用flex布局: 父元素設置display: flex,左右兩邊設置固定寬度,中間設置flex-grow: 1;
使用浮動布局:左右兩邊設置固定寬度,而且分別設置float:left和right,這個方法有一個需要注意的是在HTML中,中間欄需要和右邊欄進行對調;
使用絕對定位布局:左右兩邊設置固定寬度和position:absolute,而且分別設置left: 0和right: 0,中間欄只要設置左右margin為左右欄的寬度就可以了(需要注意的是左右兩邊需要設置 top: 0,不然右邊會被頂下來)
補充
其實還有表格布局,網格布局和圣杯布局,詳細請看三欄布局的5種解決方案及優缺點2. 如何實現彈窗水平垂直居中?
.dialog{ position: relative; width: 500px; height: 500px; background: goldenrod } .dialog-content{ width: 200px; height: 200px; background: rebeccapurple; position: absolute; top: 50%; left: 50%; margin:-100px 0 0 -100px; }
.dialog{ position: relative; width: 500px; height: 500px; background: goldenrod } .dialog-content{ width: 200px; height: 200px; background: rebeccapurple; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.dialog { width: 500px; height: 500px; background: goldenrod; display: flex; justify-content: center; align-items: center; } .dialog-content { width: 200px; height: 200px; background: rebeccapurple; }3. ==和 === 的區別
===為恒等符:當等號兩邊的值為相同類型的時候,直接比較等號兩邊的值,值相同則返回true,若等號兩邊的值類型不同時直接返回false。4. 30 == "30" 的過程是怎樣的?==為等值符: 當等號兩邊的值為相同類型時比較值是否相同,類型不同時會發生類型的自動轉換,轉換為相同的類型后再作比較。
a、如果一個是null、一個是undefined,那么[相等]。
b、如果一個是字符串,一個是數值,把字符串轉換成數值再進行比較。
c、如果任一值是 true,把它轉換成 1 再比較;如果任一值是 false,把它轉換成 0 再比較。
d、如果一個是對象,另一個是數值或字符串,把對象轉換成基礎類型的值再比較。對象轉換成基礎類型,利用它的toString或者valueOf方法。 js核心內置類,會嘗試valueOf先于toString;例外的是Date,Date利用的是toString轉換。非js核心的對象,令說(比較麻 煩,我也不大懂)
e、任何其他組合,都[不相等]。
5. 以下代碼輸出的是什么?為什么呢?30為數值類型,而"30"未字符串類型,因此等號兩邊的數據類型不相等,需要進行轉換類型;
由于一個是數值,另一個字符串,所以需要將字符串轉換成數值再進行比較,即"30" => 30;
這時等號兩邊同樣為數值型數據,即30 == 30,所以返回true
for (var i=0; i<5; i++) { setTimeout( function timer() { console.log(i); }, 0 ); }
回答: 直接輸出 5 5 5 5 5
首先這里涉及到setTimeout的執行順序,頁面中所有由setTimeout定義的操作,都將放在同一個隊列中(這里涉及到兩種,微任務隊列和宏任務隊列,剛好下面問Promise的時候就問到了)依次執行。6. 你有使用過閉包嗎? 7. 模塊化的異步加載怎樣做? 8. window.onload執行時間? 9.圖片加載完的時候會執行嗎? 10. 了解JS繼承嗎? 11. 利用原型鏈的繼承有什么缺點嗎? 12. 知道如何修改this的指向嗎?這個隊列執行的時間,需要等待到函數調用棧清空之后才開始執行。即所有可執行代碼執行完畢之后,才會開始執行由setTimeout定義的操作。而這些操作進入隊列的順序,則由設定的延遲時間來決定。
根據setTimeout定義的操作在函數調用棧清空之后才會執行的特點,for循環里定義了5個setTimeout操作,這些setTimeout操作是在循環執行完成后才開始執行,這個時候i = 5,因為每個setTimeout操作的延遲時間一樣,所以按順序輸出 5 5 5 5 5
修改this指向的辦法有三種:apply、call和bind
apply、call:通過傳入需要指向的對象,從而改變this的指向,指向傳入的第一個參數;
bind:它會創建一個函數的實例,其this值會被綁定到傳給bind()函數的值。
window.color = "red"; var o = { color:"blue" }; function sayColor(){ console.log(this.color); } var globalSaycolor = sayColor; var objectSaycolor = sayColor.bind(o); globalSaycolor(); // red objectSaycolor(); // blue
補充
其實還有一種:new關鍵字改變this指向13. apply和call的區別?
因為在new的過程中,其中有一個步驟為將構造函數內部的this指向實例對象,所以通過new關鍵字也可以改變this的指向。
相同點:可以用來代替另一個對象調用一個方法,將一個函數的對象上下文從初始的上下文改變為由thisObj指定的新對象。14. 有一個按鈕是異步生成的,怎樣對它進行事件綁定?不同點:實際上,apply和call的功能是一樣的,只是傳入的參數列表形式不同。
apply:最多只能有兩個參數——新this對象和一個數組argArray。如果給該方法傳遞多個參數,則把參數都寫進這個數組里面,當然,即使只有一個參數,也要寫進數組里。如果argArray不是一個有效的數組或arguments對象,那么將導致一個TypeError。如果沒有提供argArray和thisObj任何一個參數,那么Global對象將被用作thisObj,并且無法被傳遞任何參數。call:它可以接受多個參數,第一個參數與apply一樣,后面則是一串參數列表。這個方法主要用在js對象各方法相互調用的時候,使當前this實例指針保持一致,或者在特殊情況下需要改變this指針。如果沒有提供thisObj參數,那么 Global 對象被用作thisObj。
由于按鈕是異步生成的,所以我選擇將事件綁定在按鈕生成的父元素上,通過事件委托的機制,利用事件冒泡,把事件綁定在父元素上,可以通過判斷event.target按鈕是否已經生成,從而實現相應的事件。15. 跨域有處理過嗎?科普補充:
事件冒泡可以形象地比喻為把一顆石頭投入水中,泡泡會一直從水底冒出水面。也就是說,事件會從最內層的元素開始發生,一直向上傳播,直到document對象;
事件捕獲則跟事件冒泡相反,事件會從document對象開始發生,直到最具體的元素;
我處理過的跨域有兩種情況:
一種是在頁面中嵌入了一個iframe,因此父子iframe間產生了跨域,要解決這個問題,只需要把document.domain設置成相同的值就可以在兩個頁面里進行相應的操作了;
另外一種情況是用Vue開發涉及到的跨域問題,這個問題只需要修改config文件夾下的index.js中的dev:{}部分中修改proxyTable參數即可,相當于對跨域的url進行了代理,從而可以順利訪問。
另外說了一下自己比較熟悉的一種跨域解決方案:JSONP
JSONP解決跨域問題的本質其實就是 標簽可以請求不同域名下的資源,即
補充
共同點: 都是從客戶端緩存中讀取資源18. 看你有用過Promise,知道Promise有幾種狀態?
不同點: 強緩存不會發送請求;協商緩存會發請求。
Promise 有三個狀態Pending、Fulfilled和Rejected,只能從Pending轉換為Fulfilled,和Pending轉換為Rejected,狀態一旦改變就不能再次變化。19. 你知道pending狀態可以停止嗎? 20. 那XMLHttpRequest 的pending狀態可以停止嗎? 21. 知道Promise和setTimeout的執行順序嗎?
如果Promise和setTimeout同時存在的話,一般是先執行Promise之后再執行setTimeout。因為這里涉及到微任務隊列(Microtasks)和宏任務隊列(Macrotasks)。
microtasks queue中的內容經常是為了需要直接在當前腳本執行完后立即發生的事,所以當同步執行完之后就調用隊列中的內容,然后把異步隊列中的setTimeout放入執行棧中執行。
科普補充
理解 JavaScript 中的 macrotask 和 microtask
Tasks, microtasks, queues and schedules
首先可以在beforecreate中添加一個loading,然后在created中結束這個loading,還做一些初始化,實現函數自執行;
可以在mounted中向后臺請求數據,進行頁面的渲染;
可以update中對data中的數據進行檢測,實現對頁面的修改。
如果把數據獲取放在created中,如果數據量很大,會出現頁面加載緩慢的結果……24. 對Vue的數據雙向綁定有了解嗎?
這兩個問題回答的不是非常的好,希望有人可以幫忙解答一下嗎?
經典問題,具體參考剖析Vue原理&實現雙向綁定MVVM25. 了解重繪和回流嗎?頁面的加載順序?
重繪:當元素的一部分屬性發生變化,如外觀背景色不會引起布局變化而需要重新渲染的過程;
回流: 當render樹中的一部分或者全部因為大小邊距等問題發生改變而需要重建的過程;
回流一定會發生重繪,重繪不一定引發回流。
頁面加載的順序:
26. 如何減少回流、重繪?怎樣控制只有一部分回流?瀏覽器解析HTML文件構建DOM樹;
解析CSS文件構建Style Rules;
兩者合并生成Render Tree;
Layout 根據Render Tree計算每個節點的信息;
Painting 根據計算好的信息繪制整個頁面;
P.S 當文檔加載過程中遇到JS文件,HTML文檔會掛起渲染過程,不僅要等到文檔中JS文件加載完畢還要等待解析執行完畢,才會繼續HTML的渲染過程
一. CSS中避免回流
盡可能在DOM樹的最末端改變class
避免設置多層內聯樣式
動畫效果應用到position屬性為absolute或fixed的元素上
犧牲平滑度換取速度
避免使用table布局
避免使用CSS的JavaScript表達式
二. JS操作避免回流
避免逐項更改樣式。最好一次性更改style屬性,或者將樣式列表定義為class并一次性更改class屬性。
避免循環操作DOM。創建一個documentFragment或div,在它上面應用所有DOM操作,最后再把它添加到window.document。
也可以在一個display:none的元素上進行操作,最終把它顯示出來。因為display:none上的DOM操作不會引發回流和重繪。
避免循環讀取offsetLeft等屬性。在循環之前把它們存起來。
絕對定位具有復雜動畫的元素。絕對定位使它脫離文檔劉,否則會引起父元素及后續元素大量的回流。
27. 了解什么算法?快排? 28. 還了解什么排序算法? 29. 了解二叉查找樹嗎? 30. 有了解什么后端語言嗎?知道面向對象的特性嗎? 31. 知道數據庫連接池嗎? 32. 未來前端的規劃? 酷狗二面在面完第一面之后,本來以為終于結束了,沒想到迎來的是第二技術面,后面面試官介紹說其實本來是應該兩個人同時面我的,因為有一個面試官沒空,所以就錯開了,就有了"二面"了,其實本質上還是一面而已。1. 自我介紹 2. 問了一下筆試的時候不應該錯的題 3. 理解的HTTP狀態碼有哪些?
4. 正則的題目,對比/^[a-z0-9][a-z]+$/和 /^[a-z0-9][a-z]*$/的區別?1XX系列:指定客戶端應相應的某些動作,代表請求已被接受,需要繼續處理;
2XX系列:代表請求已成功被服務器接收、理解、并接受;
3XX系列:代表需要客戶端采取進一步的操作才能完成請求,這些狀態碼用來重定向,后續的請求地址(重定向目標)在本次響應的 Location 域中指明;301:被請求的資源已永久移動到新位置;
302:請求的資源臨時從不同的URI響應請求,但請求者應繼續使用原有位置來進行以后的請求;
304:資源找到但是不符合請求條件,不會返回任何主體(用于協商緩存,表示瀏覽器緩存資源未改變,仍然可用);4XX系列:表示請求錯誤。代表了客戶端看起來可能發生了錯誤,妨礙了服務器的處理。
5xx系列:代表了服務器在處理請求的過程中有錯誤或者異常狀態發生,也有可能是服務器意識到以當前的軟硬件資源無法完成對請求的處理。
兩者的區別主要是最后的 *和+,5. display:none 和 visibility:hidden的區別?
+ 出現一次或多次(至少出現一次),等價于{1, }
* 出現零次或多次(任意次),等價于{0, }
最后再借助正則可視化對比就很明顯了
visibility:hidden:所占據的空間位置仍然存在,僅為視覺上的完全透明;
visibility:hidden變化不會觸發reflow。
display:none : 不為被隱藏的對象保留其物理空間。
display:none變化時將觸發reflow;
科普補充
CSS魔法堂:display:none與visibility:hidden的恩怨情仇6. CSS選擇器的理解,你知道多少選擇器? 7. CSS3布局,移動端有用過rem嗎?布局的話一般怎樣布局? 8. Flex布局和傳統的其他布局有什么優點? 9. Flex的居中方式有哪些?其他方式有哪些?
可參考一面的第一和第二個問題。10. display設置inline-block的話,多個之間有間隔應該怎樣處理?
li{ display: inline-block; background: red; width: 300px; height: 100px; }
- 1
- 2
- 3
- 4
瀏覽器會把inline元素間的空白字符(空格、換行、Tab等)渲染成一個空格。而為了美觀。我們通常是一個放在一行,這導致換行后產生換行字符,它變成一個空格,占用了一個字符的寬度。11. 更熟悉那方面的技術棧? 12. 對自己項目是怎樣設計和選型的? 13. 有用到vuex嗎? 14. 組件之間的通訊怎樣做到?
解決:
方法一:為設置float: left。不足:有些容器是不能設置浮動,如左右切換的焦點圖等。
方法二:將所有寫在同一行。不足:代碼不美觀。
方法三:將內的字符尺寸直接設為0,即font-size: 0。不足:
中的其他字符尺寸也被設為0,需要額外重新設定其他字符尺寸,且在Safari瀏覽器依然會出現空白間隔。
方法四:消除的字符間隔letter-spacing: -8px,而這也設置了內的字符間隔,因此需要將內的字符間隔設為默認letter-spacing: normal。
15. 真的學習前端是什么時候開始? 16. 方向是選擇全棧還是只做前端? 17. 有沒有在nodeJS上做過什么? 18. 有沒有在npm上面做過開源的學習? 19. 對畢業之后的學習規劃?有多種方法解決
使用一個空的 Vue 實例作為中央事件總線
使用Vuex
使用localStorage和SessionStorage
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98787.html
摘要:自我介紹對前端的理解為什么中間會出現空隙瀏覽器會把元素間的空白字符空格換行等渲染成一個空格。解決方法一為設置。方法二將所有寫在同一行。選擇器選擇器匹配出現在后面的。和這兩種元素必須具有相同的父元素,但不必緊跟在的后面。 1. 自我介紹 2. 對前端的理解 3. 為什么li中間會出現空隙 showImg(https://segmentfault.com/img/bVbhxip?w=131...
摘要:自我介紹對前端的理解為什么中間會出現空隙瀏覽器會把元素間的空白字符空格換行等渲染成一個空格。解決方法一為設置。方法二將所有寫在同一行。選擇器選擇器匹配出現在后面的。和這兩種元素必須具有相同的父元素,但不必緊跟在的后面。 1. 自我介紹 2. 對前端的理解 3. 為什么li中間會出現空隙 showImg(https://segmentfault.com/img/bVbhxip?w=131...
摘要:自我介紹對前端的理解為什么中間會出現空隙瀏覽器會把元素間的空白字符空格換行等渲染成一個空格。解決方法一為設置。方法二將所有寫在同一行。選擇器選擇器匹配出現在后面的。和這兩種元素必須具有相同的父元素,但不必緊跟在的后面。 1. 自我介紹 2. 對前端的理解 3. 為什么li中間會出現空隙 showImg(https://segmentfault.com/img/bVbhxip?w=131...
摘要:背景個人背景就讀于東北某普通二本院校計算機軟件工程專業,現大四,北京實習前端方向,自學,技術棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經結束招聘崗位不多,投遞對象為大一些的互聯網公司事件背景第一個入職的是好未來的前端實習崗,待遇工 背景 個人背景 就讀于東北某普通二本院校計算機軟件工程專業,現大四,北京實習 前端方向,自學,vue技術棧 時間背景 大概是在11月9日準備...
摘要:背景個人背景就讀于東北某普通二本院校計算機軟件工程專業,現大四,北京實習前端方向,自學,技術棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經結束招聘崗位不多,投遞對象為大一些的互聯網公司事件背景第一個入職的是好未來的前端實習崗,待遇工 背景 個人背景 就讀于東北某普通二本院校計算機軟件工程專業,現大四,北京實習 前端方向,自學,vue技術棧 時間背景 大概是在11月9日準備...
閱讀 2111·2021-11-24 10:28
閱讀 1115·2021-10-12 10:12
閱讀 3337·2021-09-22 15:21
閱讀 679·2021-08-30 09:44
閱讀 1895·2021-07-23 11:20
閱讀 1147·2019-08-30 15:56
閱讀 1751·2019-08-30 15:44
閱讀 1483·2019-08-30 13:55