天天看點

前端開發查詢,一個合格的初級前端工程師需要掌握的子產品筆記

面試知識點

主要内容包括html,css,前端基礎,前端核心,前端進階,移動端開發,計算機基礎,算法與資料結構,設計模式,項目等等。
html

1.浏覽器頁面有哪三層構成,分别是什麼,作用是什麼?

2.HTML5的優點與缺點?

3.Doctype作用? 嚴格模式與混雜模式如何區分?它們有何意義?

4.HTML5有哪些新特性、移除了哪些元素?

5.你做的網頁在哪些浏覽器測試過,這些浏覽器的核心分别是什麼?

6.每個HTML檔案裡開頭都有個很重要的東西,Doctype,知道這是幹什麼的嗎?

7.說說你對HTML5認識?(是什麼,為什麼)

8.對WEB标準以及W3C的了解與認識?

9.HTML5行内元素有哪些,塊級元素有哪些, 空元素有哪些?

10.什麼是WebGL,它有什麼優點?

11.請你描述一下 cookies,sessionStorage 和 localStorage 的差別?

12.說說你對HTML語義化的了解?

13.

link

和@import的差別?

14.說說你對SVG了解?

15.HTML全局屬性(global attribute)有哪些?

16.說說超連結target屬性的取值和作用?

17.

data-

屬性的作用是什麼?

18.介紹一下你對浏覽器核心的了解?

19.常見的浏覽器核心有哪些?

20.iframe有那些缺點?

21.Label的作用是什麼,是怎麼用的?

22.如何實作浏覽器内多個标簽頁之間的通信?

23.如何在頁面上實作一個圓形的可點選區域?

24.title與h3的差別、b與strong的差別、i與em的差別?

25.實作不使用 border 畫出1px高的線,在不同浏覽器的标準模式與怪異模式下都能保持一緻的效果?

前端開發查詢,一個合格的初級前端工程師需要掌握的子產品筆記
CSS

1.解釋一下CSS的盒子模型?

2.請你說說CSS選擇器的類型有哪些,并舉幾個例子說明其用法?

3.請你說說CSS有什麼特殊性?(優先級、計算特殊值)

4.要動态改變層中内容可以使用的方法?

5.常見浏覽器相容性問題與解決方案?

6.列出display的值并說明他們的作用?

7.如何居中div, 如何居中一個浮動元素?

8.CSS中 link 和@import 的差別是?

9.請列舉幾種清除浮動的方法(至少兩種)?

10.block,inline和inlinke-block細節對比?

11.什麼叫優雅降級和漸進增強?

12.說說浮動元素會引起的問題和你的解決辦法

13.你有哪些性能優化的方法?

14.為什麼要初始化CSS樣式?

15.解釋下浮動和它的工作原理?清除浮動的技巧?

16.CSS樣式表根據所在網頁的位置,可分為哪幾種樣式表?

17.談談你對CSS中刻度的認識?

18.請你說說em與rem的差別?

19.請你說說box-sizing屬性的的用法?

20.浏覽器标準模式和怪異模式之間的差別是什麼?

21.怪異Quirks模式是什麼,它和标準Standards模式有什麼差別?

22.說說你對邊距折疊的了解?

23.内聯與塊級标簽有何差別?

24.說說隐藏元素的方式有哪些?

25.為什麼重置浏覽器預設樣式,如何重置默浏覽器認樣式?

26.談談你對BFC與IFC的了解?(是什麼,如何産生,作用)

27.說說你對頁面中使用定位(position)的了解?

28.如何解決多個元素重疊問題?

29.頁面布局的方式有哪些?

30.overflow :hidden是否形成新的塊級格式化上下文?

前端開發查詢,一個合格的初級前端工程師需要掌握的子產品筆記
前端基礎

1.說一下http和https

2.tcp三次握手,一句話概括

3.TCP和UDP的差別

4.WebSocket的實作和應用

5.HTTP請求的方式,HEAD方式

6.一個圖檔url通路後直接下載下傳怎樣實作?

7.說一下web Quality(無障礙)

8.幾個很實用的BOM屬性對象方法?

9.說一下HTML5 drag api

10.說一下http2.0

11.補充400和401、403狀态碼

12.fetch發送2次請求的原因

13.Cookie、sessionStorage、localStorage的差別

14.說一下web worker

15.對HTML語義化标簽的了解

16.iframe是什麼?有什麼缺點?

17.Doctype作用?嚴格模式與混雜模式如何區分?它們有何意義?

18.Cookie如何防範XSS攻擊

19.Cookie和session的差別

20.一句話概括RESTFUL

21.講講viewport和移動端布局

22.click在ios上有300ms延遲,原因及如何解決?

23.addEventListener參數

24.cookie sessionStorage localStorage差別

25.cookie session差別

26.介紹知道的http傳回的狀态碼

27.http常用請求頭

28.強,協商緩存

29.HTTP狀态碼說說你知道的

30.講講304

31.強緩存、協商緩存什麼時候用哪個

32.前端優化

33.GET和POST的差別

34.301和302的差別

35.如何畫一個三角形

36.狀态碼304和 200

37.說一下浏覽器緩存

38.HTML5新增的元素

39.在位址欄裡輸入一個URL,到這個頁面呈現出來,中間會發生什麼?

40.cookie和session的差別,localstorage和sessionstorage的差別

41.常見的HTTP的頭部

42.HTTP2.0 的特性

43.cache-control的值有哪些

44.浏覽器在生成頁面的時候,會生成那兩顆樹?

45.csrf和xss的網絡攻擊及防範

46.怎麼看網站的性能如何

47.介紹HTTP協定(特征)

48.說一下對Cookie和Session的認知,Cookie有哪些限制?

49.描述一下XSS和CRSF攻擊?防禦方法?

50.知道304嗎,什麼時候用304?

51.具體有哪些請求頭是跟緩存相關的

52.cookie和session的差別

53.cookie有哪些字段可以設定

54.cookie有哪些編碼方式?

55.既然你看過圖解http,那你回答下200和304的差別

56.除了cookie,還有什麼存儲方式。說說cookie和localStorage的差別

57.浏覽器輸入網址到頁面渲染全過程

58.HTML5和CSS3用的多嗎?你了解它們的新屬性嗎?有在項目中用過嗎?

59.http常見的請求方法

60.get和post的差別

61.說說302,301,304的狀态碼

62.web性能優化

63.浏覽器緩存機制

64.post和get差別

65.說一下css盒模型

66.畫一條0.5px的線

67.link标簽和import标簽的差別

68.transition和animation的差別

69.Flex布局

70.BFC(塊級格式化上下文,用于清楚浮動,防止margin重疊等)

71.垂直居中的方法

72.關于js動畫和css3動畫的差異性

73.說一下塊元素和行元素

74.多行元素的文本省略号

75.visibility=hidden, opacity=0,display:none

76.雙邊距重疊問題(外邊距折疊)

77.position屬性

78.浮動清除

79.css3新特性

80.CSS選擇器有哪些,優先級呢

81.怎麼樣讓一個元素消失

82.介紹一下盒模型

83.css動畫如何實作

84.如何實作圖檔在某個容器中居中的?

85.如何實作元素的垂直居中

86.CSS3中對溢出的處理

87.float的元素,display是什麼

88.隐藏頁面中某個元素的方法

89.三欄布局的實作方式,盡可能多寫,浮動布局時,三個div的生成順序有沒有影響

90.什麼是BFC

91.calc屬性

92.有一個width300,height300,怎麼實作在螢幕上垂直水準居中

93.display:table和本身的table有什麼差別

94.position屬性的值有哪些及其差別

95.z-index的定位方法

96.CSS盒模型

97.如果想要改變一個DOM元素的字型顔色,不在它本身上進行操作?

98.對CSS的新屬性有了解過的嗎?

99.用的最多的css屬性是啥?

100.line-height和height的差別

101.設定一個元素的背景顔色,背景顔色會填充哪些區域?

102.知道屬性選擇器和僞類選擇器的優先級嗎

103.inline-block、inline和block的差別;為什麼img是inline還可以設定寬高

104.用css實作一個硬币旋轉的效果

105.了解重繪和重排嗎,知道怎麼去減少重繪和重排嗎,讓文檔脫離文檔流有哪些方法

106.CSS畫正方體,三角形

107.overflow的原理

108.清除浮動的方法

109.box-sizing的文法和基本用處

110.使元素消失的方法有哪些?

111.兩個嵌套的div,position都是absolute,子div設定top屬性,那麼這個top是相對于父元素的哪個位置定位的

112.說說盒子模型

113.display

114.怎麼隐藏一個元素

115.display:none和visibilty:hidden的差別

116.相對布局和絕對布局,position:relative和obsolute

117.flex布局

118.block、inline、inline-block的差別

119.css的常用選擇器

120.css布局

121.css定位

122.relative定位規則

123.垂直居中

124.css預處理器有什麼

125.get請求傳參長度的誤區

126.補充get和post請求在緩存方面的差別

127.說一下閉包

128.說一下類的建立和繼承

129.如何解決異步回調地獄

130.說說前端中的事件流

131.如何讓事件先冒泡後捕獲

132.說一下事件委托

133.說一下圖檔的懶加載和預加載

134.mouseover和mouseenter的差別

135.js的new操作符做了哪些事情

136.改變函數内部this指針的指向函數(bind,apply,call的差別)

137.js的各種位置,比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的差別?

138.js拖拽功能的實作

139.異步加載js的方法

140.Ajax解決浏覽器緩存問題

141.js的節流和防抖

142.JS中的垃圾回收機制

143.eval是做什麼的

144.如何了解前端子產品化

145.說一下Commonjs、AMD和CMD

146.對象深度克隆的簡單實作

147.實作一個once函數,傳入函數參數隻執行一次

148.将原生的ajax封裝成promise

149.js監聽對象屬性的改變

150.如何實作一個私有變量,用getName方法可以通路,不能直接通路

151.和=、以及Object.is的差別

152.setTimeout、setInterval和requestAnimationFrame之間的差別

153.實作一個兩列等高布局,講講思路

154.自己實作一個bind函數

155.用setTimeout來實作setInterval

前端開發查詢,一個合格的初級前端工程師需要掌握的子產品筆記
前端核心

1.JSONP的缺點

2.跨域(jsonp,ajax)

3.如何實作跨域

4.dom是什麼,你的了解?

5.關于dom的api有什麼

6.ajax傳回的狀态

7.實作一個Ajax

8.如何實作ajax請求,假如我有多個請求,我需要讓這些ajax請求按照某種順序一次執行,有什麼辦法呢?如何處理ajax跨域

9.如何實作一個ajax請求?如果我想發出兩個有順序的ajax需要怎麼做?

10.Fetch和Ajax比有什麼優缺點?

11.移動應用和web應用的關系

12.知道PWA嗎

13.做過移動端嗎

14.知道touch事件嗎

前端進階

1.前端測試

2.接口文檔的制定

3.webpack和gulp差別(子產品化與流的差別)

4.redux用處

5.redux裡常用方法

6.angularJs和react差別

7.vue雙向綁定原理

8.說說vue react angularjs jquery的差別

9.node的事件方法講講看

10.node的特性,适合處理什麼場景

11.你有用到Express,講講Express

12.promise的狀态有那些

13.數組移除第一個元素的方法有哪些?

前端開發查詢,一個合格的初級前端工程師需要掌握的子產品筆記
移動端開發

1.介紹一下react

2.React單項資料流

3.react生命周期函數和react元件的生命周期

4.react和Vue的原理,差別,亮點,作用

5.reactJs的元件交流

6.有了解過react的虛拟DOM嗎,虛拟DOM是怎麼對比的呢

7.項目裡用到了react,為什麼要選擇react,react有哪些好處

8.怎麼擷取真正的dom

9.選擇react的原因

10.react的生命周期函數

11.setState之後的流程

12.react高階元件知道嗎?

13.React的生命周期

14.說說自己了解的react

15.react的元件是通過什麼去判斷是否重新整理的

計算機基礎

1.TCP 建立連接配接的三次握手過程

2.cdn 原理

3.HTTP 的頭部包含哪些内容。常見的請求方法(我為什麼要 說後面的 options,head,connect)

4.請求方法 head 特性

5.HTTP 狀态碼,301和302 有什麼具體差別,200 和 304 的 差別

6.OSI 七層模型

7.TCP 和 UDP 的差別,為什麼三次握手四次揮手

8.HTTP 緩存機制

9.websocket 和 ajax 的差別是什麼,websocket 的應用場景有哪些

10.TCP/IP 的網絡模型

11.知道什麼跨域方式嗎,jsonp 具體流程是什麼,如何實作 原生 Jsonp 封裝,優化,對于 CORS,伺服器怎麼判斷它該不 該跨域呢

12.怎麼生成 token,怎麼傳遞

13.作業系統程序和線程的差別

14.什麼是程序線程

15.線程的那些資源共享,那些資源不共享

16.作業系統裡面程序和線程的差別

17.Linux 查詢程序指令,查詢端口,殺程序

18.程序間的通信方式有哪些?

19.Redis 和 mysql

前端開發查詢,一個合格的初級前端工程師需要掌握的子產品筆記
算法與資料結構

1.二叉樹層序周遊

2.B 樹的特性,B 樹和 B+樹的差別

3.尾遞歸

4.如何寫一個大數階乘?遞歸的方法會出現什麼問題?

5.把多元數組變成一維數組的方法

6.知道的排序算法 說一下冒泡快排的原理

7.Heap 排序方法的原理?複雜度?

8.幾種常見的排序算法,手寫

9.數組的去重,盡可能寫出多個方法

10.如果有一個大的數組,都是整型,怎麼找出最大的前 10 個數

11.知道資料結構裡面的常見的資料結構

12.找出數組中第 k 大的數組出現多少次,比如數組【1,2, 4,4,3,5】第二大的數字是 4,出現兩次,是以傳回 2

13.合并兩個有序數組

14.給一個數,去一個已經排好序的數組中尋找這個數的位 置(通過快速查找,二分查找)

前端開發查詢,一個合格的初級前端工程師需要掌握的子產品筆記

結尾

正式學習前端大概 3 年多了,很早就想整理這個書單了,因為常常會有朋友問,前端該如何學習,學習前端該看哪些書,我就講講我學習的道路中看的一些書,雖然整理的書不多,但是每一本都是那種看一本就秒不絕口的感覺。

以下大部分是我看過的,或者說身邊的人推薦的書籍,每一本我都有些相關的推薦語,如果你有看到更好的書歡迎推薦呀。

戳這裡免費領取前端學習資料

合并兩個有序數組

14.給一個數,去一個已經排好序的數組中尋找這個數的位 置(通過快速查找,二分查找)

[外鍊圖檔轉存中…(img-9rR1N2j5-1626873774358)]

結尾

正式學習前端大概 3 年多了,很早就想整理這個書單了,因為常常會有朋友問,前端該如何學習,學習前端該看哪些書,我就講講我學習的道路中看的一些書,雖然整理的書不多,但是每一本都是那種看一本就秒不絕口的感覺。

以下大部分是我看過的,或者說身邊的人推薦的書籍,每一本我都有些相關的推薦語,如果你有看到更好的書歡迎推薦呀。

戳這裡免費領取前端學習資料

前端開發查詢,一個合格的初級前端工程師需要掌握的子產品筆記