09.26 騰訊校招前端一面經歷

endiat 發布于2019-08-02 11:35 / 1931人閱讀

摘要：自我介紹對前端的理解為什么中間會出現空隙瀏覽器會把元素間的空白字符空格換行等渲染成一個空格。解決方法一為設置。方法二將所有寫在同一行。選擇器選擇器匹配出現在后面的。和這兩種元素必須具有相同的父元素，但不必緊跟在的后面。

1. 自我介紹 2. 對前端的理解 3. 為什么li中間會出現空隙

li{
    display: inline-block;
    background: red;
    width: 300px;
    height: 100px;
}

    
      1
      2
      3
      4

瀏覽器會把inline元素間的空白字符（空格、換行、Tab等）渲染成一個空格。而為了美觀。我們通常是一個放在一行，這導致
換行后產生換行字符，它變成一個空格，占用了一個字符的寬度。
解決：
方法一：為
設置float: left。不足：有些容器是不能設置浮動，如左右切換的焦點圖等。
方法二：將所有
寫在同一行。不足：代碼不美觀。
方法三：將內的字符尺寸直接設為0，即font-size: 0。不足：中的其他字符尺寸也被設為0，需要額外重新設定其他字符尺寸，且在Safari瀏覽器依然會出現空白間隔。
方法四：消除的字符間隔letter-spacing: -8px，而這也設置了內的字符間隔，因此需要將
內的字符間隔設為默認letter-spacing: normal。

4. 實現圖片瀑布流(自適應多列)

在以前是需要用到js與css才可以順利完成一個圖片瀑布流的實現，現在有了CCS3之后就可以只用CSS樣式實現完美的自適應多列圖片瀑布流

要點
1、column-count 把div中的文本分為多少列
2、column-width 規定列寬
3、column-gap 規定列間隙
4、break-inside: avoid; 避免元素內部斷行并產生新列
注意: Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。

        /*瀑布流層*/
        .waterfall {
            -moz-column-count: 4;
            /* Firefox */
            -webkit-column-count: 4;
            /* Safari 和 Chrome */
            column-count: 4;
            -moz-column-gap: 1em;
            -webkit-column-gap: 1em;
            column-gap: 1em;
        }

        /*一個內容層*/
        .item {
            padding: 1em;
            margin: 0 0 1em 0;
            -moz-page-break-inside: avoid;a
            -webkit-column-break-inside: avoid;
            break-inside: avoid;
            border: 1px solid #000;
        }

擴展
CSS3多列屬性

column-count 一行需要分割多少列

column-gap 每一列的列距

column-rule-style 列邊框樣式

column-rule-width 列邊框寬度

column-rule-color 列邊框顏色

column-rule column-rule-* 所有屬性的簡寫。如：column-rule: 1px solid #ccc(與border使用相似)

column-span 指定元素跨越多少列

column-width 指定列的寬度

5. css選擇器選擇一個表格中第二行第二列的td

可以直接使用CSS3中的:nth-child(n)選擇器。
:nth-child(n) 選擇器匹配父元素中的第 n 個子元素，元素類型沒有限制。n 可以是一個數字，一個關鍵字，或者一個公式。

table tbody tr:nth-child(2) td:nth-child(2){
    background: red;
}

6. 從一個表格中第二行第二列的td開始之后的所有的td

我當時提出的是使用排除法，只要第二行第二列，也就是排除第一行第一列，所以就可以直接使用:not()排除就可以了。不過當需要排除的行列更多時，這個方法明顯不行，因此可以用第二種方法，CSS3中的~選擇器。

~選擇器
element1~element2 選擇器匹配出現在 element1 后面的 element2。
element1和 element2這兩種元素必須具有相同的父元素，但 element2不必緊跟在  element1的后面。

//可以修改第幾行第幾列，即為第n+1行第n+1列  這里的n為1
tr:nth-child(n)~tr>td:nth-child(n)~td {
    background: red;
}

7. 做移動端有沒有遇到兼容性的問題 8. 處理過canvas？ 9. canvas跨域 10. canvas貝塞爾曲線 11. 點擊事件的生命周期？

經典問題，具體參考javaScript事件流

12. 委托點擊事件對象的target與currentTarget是誰？

事件委托：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。
通俗來講就是把多個相同的子元素的點擊事件綁定到父元素上，利用時間冒泡的原理，點擊子元素最終都會冒泡到父元素，因此只把事件綁定在父元素判斷是哪個子元素被點擊就可以了。

舉個栗子  
子節點實現相同的功能：

//  實現功能是點擊li，彈出123：

    111
    222
    333
    444


// 傳統的方法 需要通過循環對多個li進行時間綁定
window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName("li");
    for(var i=0;i
target:觸發事件的某個具體對象，只會出現在事件流的目標階段（誰觸發誰命中，所以肯定是目標階段）
currentTarget:綁定事件的對象，恒等于this，可能出現在事件流的任意一個階段中

13.  對vue的掌握
14.  父組件與子組件的通信
也是一個經典問題，參考Vue.js 父子組件及非父子組件間實現通信

15.  如果是爺孫通信？假如是跨多層組件通信？
有多種方法解決

使用一個空的 Vue 實例作為中央事件總線
使用Vuex
使用localStorage和SessionStorage


16.  localStorage與cookies區別？
相同點：都可以作為瀏覽器存儲，且都不能進行跨域訪問；
不同點：

cookie始終會在同源 http 請求頭中攜帶（即使不需要），在瀏覽器和服務器間來回傳遞
localStorage 不會自動把數據發給服務器，僅在本地保存；
localStorage 存儲大小比cookie大得多，可以達到5M或更大；
localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；
cookie 設置的cookie過期時間之前一直有效，與瀏覽器是否關閉無關。


17.  localStorage跨域問題？cookies跨域問題？
18.  www.baidu.com/m/index.html ； m.baidu.com/n/index.html  m設置了一個cookies，n這個頁面可以訪問嗎？

云服務器 GPU云服務器 web前端工程師校招騰訊云服務器的使用經歷 java繪制一面國旗求職經歷

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52988.html

09.26 騰訊校招前端一面經歷

摘要：自我介紹對前端的理解為什么中間會出現空隙瀏覽器會把元素間的空白字符空格換行等渲染成一個空格。解決方法一為設置。方法二將所有寫在同一行。選擇器選擇器匹配出現在后面的。和這兩種元素必須具有相同的父元素，但不必緊跟在的后面。 1. 自我介紹 2. 對前端的理解 3. 為什么li中間會出現空隙 showImg(https://segmentfault.com/img/bVbhxip?w=131...

BearyChat 2019-08-23 12:09 評論0 收藏0
09.26 騰訊校招前端一面經歷

摘要：自我介紹對前端的理解為什么中間會出現空隙瀏覽器會把元素間的空白字符空格換行等渲染成一個空格。解決方法一為設置。方法二將所有寫在同一行。選擇器選擇器匹配出現在后面的。和這兩種元素必須具有相同的父元素，但不必緊跟在的后面。 1. 自我介紹 2. 對前端的理解 3. 為什么li中間會出現空隙 showImg(https://segmentfault.com/img/bVbhxip?w=131...

stdying 2019-08-30 15:54 評論0 收藏0
2017暑期實習面試總結（前端方向）

摘要：的暑期實習面試到現在差不多都結束了，算下來自己也投了十幾家簡歷，經歷的差不多十場筆試，現場和電話面試也差不多有五六家公司。阿里三面三面不知道是不是交叉面，不過這次面試面試官說他是北京的之前都是杭州。 2017的暑期實習面試到現在差不多都結束了，算下來自己也投了十幾家簡歷，經歷的差不多十場筆試，現場和電話面試也差不多有五六家公司。雖然最后只拿到兩個offer，所幸是自己期待的公司，下面從...

worldligang 2019-08-20 16:13 評論0 收藏0
10.26 酷狗音樂校招前端一面經歷

摘要：安全性請求可被緩存，請求保存在瀏覽器歷史記錄中則不能被緩存。與相比，的安全性較差，因為發送的數據是的一部分。酷狗一面 1. 如何實現三欄布局（左右兩邊固定寬度，中間自適應）？使用flex布局：父元素設置display: flex，左右兩邊設置固定寬度，中間設置flex-grow: 1；使用浮動布局：左右兩邊設置固定寬度，而且分別設置float:left和right，這個方法有...

GitCafe 2019-08-23 12:35 評論0 收藏0