IMWeb前端提高營七天學習總結

時間 2019-12-08

標籤 imweb 前端提高七天 7天學習總結简体版

原文原文鏈接

寫在前面

5月24到30這7天，IMWeb前端提高營，騰訊大佬們分享我的經驗，使出各類前端方面的大招。從中學習了不少前端方面的知識，也get到了前端學習的方法論，還有一些算法知識等等。javascript

現將總結以下：（本文長度略長，看官保持耐心，嘿嘿）html

早報前端面試題

天天早上，助教老師會發一些經典前端面試題，歸檔一下：前端

05/24

問題1: CSS引入的方式有哪些?html5

答案: 
CSS與HTML文檔結合的4中方法：
　　一、使用<link>元素連接到外部的樣式文件
　　二、在<head>元素中使用"style"元素來指定
　　三、使用CSS "@import"標記來導入樣式表單
　　四、在<body>內部的元素中使用"style"屬性來定義樣式

問題2: 行內元素有哪些？塊級元素有哪些？CSS的盒模型？java

答案: 塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding

問題3: link和@import的區別是?git

答案: 本質上，這兩種方式都是爲了加載CSS文件，但仍是存在着細微的差異。
　　一、老祖宗的差異。link屬於XHTML標籤，而@import徹底是CSS提供的一種方式。link標籤除了能夠加載CSS外，還能夠作不少其它的事情，好比定義RSS，定義rel鏈接屬性等，@import就只能加載CSS了。
　　二、加載順序的差異。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面所有被下載完再被加載。
　　三、兼容性的差異。因爲@import是CSS2.1提出的因此老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題。
　　四、使用dom控制樣式時的差異。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的。

問題4： ==和===的不一樣github

答案： 前者會自動轉換類型，後者不會

前端常見題目我的思考題：web

一、你以前自認爲作得最好的，最具備挑戰的一項需求是什麼，爲何？如今回頭去看，還有哪些地方能夠值得優化？
 二、說一下h5中的離線存儲有哪些

05/25

問題1: XHTML和HTML有什麼區別?面試

答案: 
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不一樣：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文檔必須擁有根元素。

問題2: Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?ajax

答案: 用於聲明文檔使用那種規範（html/Xhtml）通常爲 嚴格 過分 基於框架的html文檔
加入XMl聲明可觸發，解析方式更改成IE5.5 擁有IE5.5的bug

問題3: 寫出幾種IE6 BUG的解決方法

答案:
1.雙邊距BUG float引發的 使用display
2.3像素問題 使用float引發的 使用dislpay:inline -3px
3.超連接hover 點擊後失效 使用正確的書寫順序 link visited hover active
4.Ie z-index問題 給父級添加position:relative
5.Png 透明 使用js代碼 改
6.Min-height 最小高度 ！Important 解決’
7.select 在ie6下遮蓋 使用iframe嵌套
8.爲何沒有辦法定義1px左右的寬度容器（IE6默認的行高形成的，使用over:hidden,zoom:0.08 line-height:1px）

問題4： IE和DOM事件流的區別

答案： 
1.執行順序不同、
2.參數不同
3.事件加不加on
4.this指向問題

前端常見題目我的思考題：

一、談一談你作過的一個項目，業務邏輯模塊如何劃分的？
二、什麼是xss漏洞，怎麼防護？

05/26

問題1: 優先級算法如何計算？

答案: 
重要性和來源的優先級排序從低到高是：
   一、瀏覽器默認樣式
   二、用戶在瀏覽器中定義的普通樣式（normal規則，不帶important規則）
   三、開發人員定義的普通樣式（ normal規則，不帶important規則）
   四、開發人員定義特殊樣式（帶important規則）
   五、用戶在瀏覽器中定義特殊樣式（帶important規則）
另外還有一些原則：
   一、相同的樣式在CSS規則後添加了!important的優先於沒有添加的。
   二、CSS規則在文檔中出現的順序後面定義的的優先於前面定義的。
   三、加了!important的優先於內聯樣式。
   四、內聯樣式優先於用link引入的樣式和頁面上<style>裏的樣式。

問題2: split() join() 的區別?

答案: 前者是切割成數組的形式，後者是將數組轉換成字符串

問題3: ajax請求的時候get 和post方式的區別?

答案:
一、一個在url後面 一個放在虛擬載體裏面
二、有大小限制
三、安全問題
四、應用不一樣 一個是論壇等只須要請求的，一個是相似修改密碼的

問題4： IE和標準下有哪些兼容性的寫法？

答案： 
一、Var ev = ev || window.event
二、document.documentElement.clientWidth || document.body.clientWidth
三、Var target = ev.srcElement||ev.target

前端常見題目我的思考題：

一、 說一下你理解的MVVM，畫一下你的設計模式。
二、 說一下h5中的離線存儲有哪些?

05/27

問題1: 清除浮動的幾種方式，各自的優缺點

答案:
1. 使用空標籤清除浮動 clear:both（理論上能清楚任何標籤，增長無心義的標籤）
2. 使用overflow:auto（空標籤元素清除浮動而不得不增長無心代碼的弊端,,使用zoom:1用於兼容IE）
3. 是用afert僞元素清除浮動(用於非IE瀏覽器)

問題2: call和apply的區別

答案: Object.call(this,obj1,obj2,obj3)
         Object.apply(this,arguments)

問題3: <img>標籤上title與alt屬性的區別是什麼？

答案:
Alt 當圖片不顯示是 用文字表明。
Title 爲該屬性提供信息

問題4：什麼是語義化的HTML？

答案：直觀的認識標籤 對於搜索引擎的抓取有好處

前端常見題目我的思考題：

一、 請說出三種減小頁面加載時間的方法。（加載時間指感知的時間或者實際加載時間）
二、 描述下「reset」CSS文件的做用和使用它的好處。

05/28

問題1: Ajax的優缺點都有什麼？

答案：
1）頁面無刷新，用戶體驗很是好。
2）使用異步方式與服務器通訊，具備更加迅速的響應能力。
3）能夠把一些服務器負擔的工做轉到客戶端，利用客戶端閒置的能力來處理，減輕服務器負擔，節約空間和寬帶租用成本。而且減輕服務器的負擔，ajax的原則是「按需取數據」，能夠最大程度的減小冗餘請求和響應對服務器形成的負擔。
4）基於標準化並被普遍支持的技術，不須要下載插件或者小程序。
Ajax的缺點:
1）Ajax不支持瀏覽器back按鈕。
2）安全問題， Ajax暴露了與服務器交互的細節。
3）對搜索引擎的支持比較弱。
4）破壞了程序的異常機制。
5）不容易調試。

問題2: 簡述一下Ajax的工做原理

答案: Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest使您可使用JavaScript向服務器提出請求並處理響應，而不阻塞用戶。

問題3: CSS+DIV開發Web頁面的優點有哪些？

答案:
1）CSS+DIV，這個網頁設計模式中，DIV承擔了網頁的內容，CSS承擔了網頁的樣式。這樣就使網頁的內容和樣式的分離開來。有利於頁面的維護升級。
2）有助於提升搜索引擎親和力（快速找到須要的數據，而不是像在TABLE中一層層的查找）
3）有助於頁面的重構(換皮膚如blog，直接套用另一套樣式就能夠實現，而不用改動網頁腳本。)

問題4：簡述DIV元素和SPAN元素的區別

答案：DIV默認狀況下是分行顯示，SPAN在同行顯示。

前端常見題目我的思考題：

一、前端安全方面有沒有了解？CSRF如何攻防？
二、 說說你對SVG理解?

05/29

問題1: 簡單說一下瀏覽器本地存儲是怎樣的

答案：在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。
    html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。
    sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
    而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

問題2: 在JavaScript腳本中，isNaN的做用是什麼？

答案: isNaN的做用是判斷值是否爲數字

問題3: 編寫JavaScript腳本生成1-6之間的整數？

答案:
var NowFrame;
NowFrame=Math.random( )*6+1 //隨機生成一個1-6之間的小數
NowFrame=parseInt(NowFrame) //把1-6之間的小數轉化爲整數

問題4： CSS規範中，.（句點）後面跟一個名稱表明什麼含義？#（井號）後面跟一個名稱表明什麼含義？若是要對一個元素設置CSS樣式（內嵌樣式），應將CSS樣式寫在它的什麼屬性內？

答案：
1） .（句號）後面跟一個名稱表示文檔中全部class屬性值包含這個名稱的應用其樣式，
2） #（井號）後面跟個名稱表示文檔中ID爲此名稱的元素應用其樣式。
3） CSS樣式寫在style屬性內。

前端常見題目我的思考題：

一、請你談談Cookie的弊端 。
二、對BFC規範的理解？

05/30

問題1: display:none和visibility:hidden的區別

答案：
    display:none 隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就當他歷來不存在。
    visibility:hidden 隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。

問題2: position的absolute與fixed共同點與不一樣點

答案:
    A：共同點：
    1.改變行內元素的呈現方式，display被置爲block；
    2.讓元素脫離普通流，不佔據空間；
    3.默認會覆蓋到非定位元素上
 
    B不一樣點：
    absolute的」根元素「是能夠設置的，而fixed的」根元素「固定爲瀏覽器窗口。
    當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。

問題3: CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

答案:
    CSS 選擇符：
    1.id選擇器(# myid)
    2.類選擇器(.myclassname)
    3.標籤選擇器(div, h1, p)
    4.相鄰選擇器(h1 + p)
    5.子選擇器(ul > li)
    6.後代選擇器(li a)
    7.通配符選擇器( * )
    8.屬性選擇器(a[rel = "external"])
    9.僞類選擇器(a: hover, li:nth-child)
     
    可繼承的樣式：
    1.font-size
    2.font-family
    3.color
    4.text-indent
     
    不可繼承的樣式：
    1.border
    2.padding
    3.margin
    4.width
    5.height
     
    優先級算法：
    1.優先級就近原則，同權重狀況下樣式定義最近者爲準;
    2.載入樣式以最後載入的定位爲準;
    3.!important>  id > class > tag  
    4.important 比 內聯優先級高，但內聯比 id 要高
     
    CSS3新增僞類舉例：
    p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
    p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
    p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
    p:only-child   選擇屬於其父元素的惟一子元素的每一個<p> 元素。
    p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
    :enabled:disabled 控制表單控件的禁用狀態。
    :checked       單選框或複選框被選中。

問題4：你知道多少種Doctype文檔類型？

答案：
    1. 該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
    2. HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
    3. XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
    4. Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。

前端常見題目我的思考題：

一、請說出三種減小頁面加載時間的方法
二、哪些操做會形成內存泄漏？

劍指offer算法題

天天下午，組織一塊兒刷題，刷題連接是https://www.nowcoder.com/ta/coding-interviews

若想看Java版本（混雜有JavaScript），移步於個人GitHub熱情的看官一顆星星是給我最大的鼓勵~

若想看JavaScript版本，移步於IMWeb社區

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。