前端面試基礎(1年以內需掌握)

xiaochao 發布于2019-05-22 19:43 / 469人閱讀

摘要：客戶端數據存儲，能維持在多個會話范圍內。向元素開頭插入由參數指定的內容。向匹配的元素添加指定的類名。移除指定的屬性。主要解決了中大量的操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗。區別數據驅動，通過數據來顯示視圖層而不是節點操作。

金三銀四公司讓我面試 1年經驗的前端，特此花時間研究了一番面試題，近日整理了一下想分享出來，讓更多小掘友看到，在我看來這些基本都是必備的知識點

css常用布局

基本值	flexbox	grid	table	float布局
none	flex	grid	table	float-fixed
inline	inline-flex	inline-grid	table-row	float-fluid
block			table-cell	960網格布局
inline-block

使用inline-block 的問題以及解決方案

水平間隙問題這是因為編寫代碼時輸入空格、換行都會產生空白符。而瀏覽器是不會忽略空白符的，并且對于多個連續的空白符自動合并成一個，故產生了所謂的間隙。

一般來說我們有兩種方法來去掉這個換行引起間隙： 代碼不換行和設置 font-size。

(推薦)通過設置父元素的 font-size 為 0 來去掉這個間隙，然后重置子元素的 font-size，讓其恢復子元素文字字符。 只要設置 inline-block 就要去間隙

float清除浮動詳解

主要是為了解決由于浮動元素脫離文流導致的元素重疊或者父元素高度坍塌的問題

清除前面兄弟元素浮動

清除前面兄弟元素浮動很簡單，只需要在不想受到浮動元素影響的元素上使用 clear:both 即可

閉合子元素浮動

給元素設置 clearfix 常用

通過父元素的偽元素（::after）實現的著名 clearfix 方法，代碼如下：
"container clearfix">
    "box">

.clearfix::after {
    content:"";
    display:table;
    clear: both;
}
給父元素增加一個專門用于處理閉合子元素浮動的 clearfix 類名，該類使用 ::after 偽元素類選擇器增加一個內容為空的結構來清除浮動.

給父元素新建一個 BFC(塊格式化上下文)

請詳情講一下定位方式

實現一個彈窗全屏居中的效果。

div使用絕對布局，設置 margin:auto; 并設置 top、left、right、bottom 的值相等即可，不一定要都是0。

.center{
    text-align: center; /*讓div內部文字居中*/
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

絕對布局，讓left和top都是50%，這在水平方向上讓div的最左與屏幕的最左相距50%，垂直方向上一樣，所以再用transform向左（上）平移它自己寬度（高度）的50%，也就達到居中效果了，效果圖和上方相同。

.center{
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

說下幾種常用選擇器

五大類選擇器：

基本選擇器

元素選擇（直接獲取元素名 P、h1）【過于直接】

ID選擇（#id）【取值唯一不能復用】

類選擇（.class）【組合、復用】

* 通用選擇器(所有元素)

關系選擇器

偽類選擇器

:nth-child(n) ： n可以是數字(4)、關鍵詞(old,even)或公式(2n+1)

:active: 將樣式添加到被激活的元素

:focus: 將樣式添加到被選中的元素

:hover: 鼠標懸浮在元素上時添加樣式

:link: 添加到未被訪問過的鏈接

:visited 添加到被訪問過的鏈接

:first-child: 添加到元素的第一個子元素

:lang：定義使用的語言

偽元素選擇器 :first-letter : 添加到文本的首字母 :first-line : 添加到文本的首行 :before : 某元素之前插入某些內容 :after : 某元素之后插入某些內容

屬性選擇器

說一下 CSS3新特性

HTML5 語義元素

HTML5 Web 存儲

sessionStorage: 客戶端數據存儲，只能維持在當前會話范圍內。

localStorage: 客戶端數據存儲，能維持在多個會話范圍內。對象存儲的數據沒有時間限制。對于大量復雜數據結構，一般使用IndexDB

CSS3 多媒體查詢 @media all and(min-width:800px){...}

CSS3 轉換和變形：transform

CSS3 過渡：transition

CSS3 動畫：animation

異步請求實現方式

最原始的js ,new XMLHttpRequest(); //由于瀏覽器兼容的原因，代碼復雜，多使用基于jQuery的異步請求方法（內部封裝）

基于jQuery的Ajax方法：

Vue--axios （promise）

講一下自己代碼調試方法

JS數組操作

concat() 鏈接兩個或更多的數組,并返回結果

join() 把數組通過指定分隔符進行分割并拼接成一個字符串

pop() 刪除并返回數組的最后一個元素

push() 向數組的末尾添加一個或更多元素,并返回新長度

reverse() 反轉數組中元素的順序

Jq DOM選擇器、DOM文檔操作

append() : 向元素結尾插入由參數指定的內容。

prepend():向元素開頭插入由參數指定的內容。

after() : 在匹配的元素之后插入內容。

before(): 在每個匹配的元素之前插入內容。

addClass():向匹配的元素添加指定的類名。

attr() :設置或返回匹配元素的屬性和值。

removeAttr():移除指定的屬性。

Vue框架的優勢

MVVM: Model 層代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯； View 代表UI 組件，它負責將數據模型轉化成UI 展現出來， ViewModel 是一個同步View 和 Model的對象。

mvc和mvvm其實區別并不大。都是一種設計思想。主要就是mvc中Controller演變成mvvm中的viewModel。 mvvm主要解決了mvc中大量的DOM 操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗。

區別 vue數據驅動，通過數據來顯示視圖層而不是節點操作。場景：數據操作比較多的場景，更加便捷

vue生命周期（詳解）

beforeCreate：初始化了部分參數，如果有相同的參數，做了參數合并，執行beforeCreate；el和數據對象都為undefined，還未初始化；

created：初始化了 Inject、Provide 、props、methods、data、computed和watch，執行created ；data有了，el還沒有；

beforeMount：檢查是否存在el屬性，存在的話進行渲染dom操作，執行beforeMount；$el和data都初始化了，但是dom還是虛擬節點，dom中對應的數據還沒有替換；

mounted：實例化 Watcher,渲染dom，執行mounted；vue實例掛載完成，dom中對應的數據成功渲染；

beforeUpdate：在渲染dom 后，執行了mounted 鉤子后，在數據更新的時候，執行 beforeUpdate；

updated：檢查當前的watcher列表中，是否存在當前要更新數據的watcher，如果存在就執行updated；

beforeDestroy：檢查是否已經被卸載,如果已經被卸載,就直接return出去,否則執行beforeDestroy；

destroyed：把所有有關自己痕跡的地方，都給刪除掉；

git常用命令

git clone:  下載初始化
Git add:添加
Git commit -m ‘ ’ :提交 帶消息
Git push：推送
Git pull： 拉取

前端1W左右的面試

轉載請標注出處謝謝~ 感覺有幫助的不妨圈起來，后期不定期發布前端知識

GPU云服務器云服務器 java基礎需要掌握前端需要掌握哪些前端需要掌握什么前端開發需要掌握

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

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

騰訊前端求職直播課——筆試篇

摘要：主講人黎騰年加入騰訊，技術面試官引入面試是一個讓面試官認識你的過程，盡全力展現的你就好，正常發揮沒通過再接再厲，失常發揮沒通過實為遺憾要求要求找準定位，重視基礎前端發展日新月異，打牢基礎原生，才能以不變應萬變如性能，安全要求用更遠的視角去看主講人：黎騰(Litten)：13年加入騰訊，技術面試官 1.引入面試是一個讓面試官認識你的過程，盡全力展現100%的你就好，正常發揮沒通過...

Sunxb 2019-08-20 18:02 評論0 收藏0
騰訊前端求職直播課——筆試篇

摘要：主講人黎騰年加入騰訊，技術面試官引入面試是一個讓面試官認識你的過程，盡全力展現的你就好，正常發揮沒通過再接再厲，失常發揮沒通過實為遺憾要求要求找準定位，重視基礎前端發展日新月異，打牢基礎原生，才能以不變應萬變如性能，安全要求用更遠的視角去看主講人：黎騰(Litten)：13年加入騰訊，技術面試官 1.引入面試是一個讓面試官認識你的過程，盡全力展現100%的你就好，正常發揮沒通過...

cnTomato 2019-08-29 12:55 評論0 收藏0
騰訊前端求職直播課——筆試篇

摘要：主講人黎騰年加入騰訊，技術面試官引入面試是一個讓面試官認識你的過程，盡全力展現的你就好，正常發揮沒通過再接再厲，失常發揮沒通過實為遺憾要求要求找準定位，重視基礎前端發展日新月異，打牢基礎原生，才能以不變應萬變如性能，安全要求用更遠的視角去看主講人：黎騰(Litten)：13年加入騰訊，技術面試官 1.引入面試是一個讓面試官認識你的過程，盡全力展現100%的你就好，正常發揮沒通過...

yintaolaowanzi 2019-08-01 17:09 評論0 收藏0
前端實習面試的一些建議

摘要：作者今年大三，在春招過程中參加了多家大公司的面試后，拿到了騰訊的前端實習，在這里做一些總結，希望給還未參加過實習面試的同學一些幫助。在之后的面試時就更加從容一些了。作者今年大三，在春招過程中參加了多家大公司的面試后，拿到了騰訊的前端實習 offer，在這里做一些總結，希望給還未參加過實習面試的同學一些幫助。一、簡歷的準備簡歷制作是很重要的一個環節，一份好的簡歷會給面試官留下很不錯...

Rango 2019-08-23 16:58 評論0 收藏0
java面試總結

摘要：面試總結因為我是開發，所以面試的都是后端開發，只能總結一些這方面的題。因為我也沒有面試太多的公司，在小城市，沒有太多的大公司，所以總結的只有這些，希望想要換工作的人，提前準備。好久沒有更新文章了，不是因為偷懶，是因為忙著準備面試了，現在總結下最近的面試心得，希望對大家有幫助時刻準備著每次入職一個公司，我們都是想著一直干下去的，但是這只不過是我們的一廂情愿罷了，工作中有太多的不可控...

Lionad-Morotar 2019-08-16 18:01 評論0 收藏0