強者沒有winter

時間 2019-11-05

標籤強者沒有 winter 简体版

原文原文鏈接

目錄
一：目錄
二：前言
2-1：關於dog蛋
2-2 ：寫給大家
三 HTML
3.1 HTML 語義化
3.2 HTML5 新標籤
3.3 常見瀏覽器及其內核
四 CSS
4.1 CSS 盒模型
4.2 CSS 單位
4.3 CSS 選擇器及優先級
4.4 CSS 常見佈局
4.5 CSS3 新特性
4.6 BFC
五 JavaScript
5.1 原型與原型鏈
5.2 閉包
5.3 淺拷貝與深拷貝
5.4 防抖與節流
5.5 ES6
5.6 promise
5.7 Generator，async/await相關
5.8 數組操做
六 Vue
6.1 MVVM
6.2 生命週期
6.3 雙向數據綁定
6.4 Virtual DOM
6.5 template 編譯
6.6 key
6.7 nextTick
6.8 父子組件通信
6.9 父子組件生命週期
6.10 keep-alive
6.11 vuex用法
七瀏覽器
7.1 一個url從輸入到顯示的過程
7.2 重繪與迴流
7.3 內存泄漏
7.4 瀏覽器兼容性
八網絡協議
8.1 HTTP/HTTPS
8.2 HTTP 狀態碼
8.3 跨域問題

二：前言

首先對於你們所說的互聯網寒冬本蛋不發表任何意見，此圖爲證 css

2.1:關於dog蛋

你們好，我是前端經驗長達三年多的前端dog蛋，會唱跳，敲代碼，喜歡ctrl-c,ctrl-v，hah～html

2.2:寫給大家

雖然已通過了金三銀四但身邊找工做的小夥伴仍是不少的，不少小夥伴擔憂如今是招聘淡季怕很差找工做，其實換個思惟方式，既然如今是招聘淡季那確定也是求職淡季，因此相對來講仍是好找的，但願找工做的小夥伴們放平心態，對每次的面試都要進行記錄和總結，相信很快就能夠收到滿意的offer的。前端

三：Html

3.1 HTML 語義化

語義化的含義就是用正確的標籤作正確的事情，HTML 語義化就是讓頁面的內容結構化，它有以下優勢：

便於對瀏覽器、搜索引擎解析；
便於盲人瀏覽網頁；
便於閱讀源代碼的人對網站進行分開，維護和理解

3.2 HTML5 新標籤

若是想把切換出去的組件保留在內存中，並保留它的狀態或避免從新渲染。爲此能夠添加一個keep-alive指令

<header>，<footer>，<<aside>，<nav>，<canvas>，<video>等vue

3.3 常見瀏覽器及其內核

	Chrome	Firefox	Safari	IE	Opera
內核	Blink	Gecko	Webkit	Trident	Blink

四：CSS

4.1： CSS 盒模型

盒模型主要分爲兩種，一種是標準模型，一種是IE模型。

能夠經過css3新增的的box-sizing屬性進行設置：css3

/* 標準模型 */git

box-sizing:content-box;es6

/IE模型/github

box-sizing:border-box;面試

border-box 中，整個 div 的寬、高，包括 margin、padding、border。vuex

content-box 中，整個 div 的寬、高，則不包括上面元素。

4.2： CSS 單位

單位	描述
px	像素。計算機屏幕上的一個點爲 1px。
em	相對單位。相對於父元素計算，假如某個 p 元素爲 font-size: 12px，在它內部有個 span 標籤，設置 font-size: 2em，那麼，這時候的 span 字體大小爲：12 * 2 = 24px
rem	相對單位。相對於根元素 html 的 font-size，假如 html 爲 font-size: 12px，那麼，在其當中的 div 設置爲 font-size: 2rem，就是當中的 div 爲 24px。
rpx	微信小程序相對單位。1rpx = 屏幕寬度 / 750 px。在 750px 的設計稿上，1rpx = 1px。

4.3： CSS 選擇器及優先級

CSS 經常使用選擇器

1:通配符：*

2:ID 選擇器：#ID

3:類選擇器：.class

4:元素選擇器：p、a 等……

5:後代選擇器：p span、div a 等……

6:僞類選擇器：a:hover 等……

7:屬性選擇器：input[type="text"] 等……

8:子元素選擇器：li:firth-child、p:nth-child(1) 等……

CSS 選擇器權重

!important -> 行內樣式 -> #id -> .class -> 元素和僞元素 -> * -> 繼承 -> 默認

4.4： CSS 常見佈局

乾貨!各類常見佈局實現+知名網站實例分析

4.5： CSS3 新特性

transition：過渡

transform：旋轉、縮放、移動或者傾斜

animation：動畫

gradient：漸變

shadow：陰影

border-radius：圓角

4.6： BFC

《我對BFC的理解》

五 JavaScript

5.4 防抖與節流

防抖: 任務頻繁觸發的狀況下，只有任務觸發的間隔超過指定間隔的時候，任務纔會執行（有個輸入框，輸入以後會調用接口，獲取聯想詞。可是，由於頻繁調用接口不太好，因此咱們在代碼中使用防抖功能，只有在用戶輸入完畢的一段時間後，纔會調用接口，出現聯想詞。）

節流：指定時間間隔內只會執行一次任務。使用場景：

懶加載要監聽計算滾動條的位置，使用節流按必定時間的頻率獲取。
用戶點擊提交按鈕，假設咱們知道接口大體的返回時間的狀況下，咱們使用節流，只容許必定時間內點擊一次。

不防抖和節流會損害頁面性能

面試知識點 - JS 防抖與節流

5.5 ES6

ECMAScript 6 入門

5.6 promise

promise實現原理：手把手教你實現一個完整的 Promise

5.7 Generator，async/await相關

阮一峯：Generator，async，Thunk，co 系列

5.8 數組操做

【乾貨】js 數組詳細操做方法及解析合集

六：Vue

6.1: MVVM

看完這篇關於MVVM的文章，面試經過率提高了80%

6.2: 生命週期

面試中如何簡短精幹的描述vue生命週期

6.3: 雙向數據綁定原理

答：vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，經過 Object.defineProperty()來劫持各個屬性的 setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

具體步驟: 第一步:須要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上setter和getter 這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化

第二步:compile解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖

第三步:Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要作的事情是:

一、在自身實例化時往屬性訂閱器(dep)裏面添加本身

二、自身必須有一個update()方法

三、待屬性變更dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。

第四步:MVVM做爲數據綁定的入口，整合Observer、 Compile和Watcher三者，經過Observer來監聽本身的model 數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化->視圖更新;視圖交互變化(input)->數據model變動的雙向綁定效果。

6.4: Virtual DOM

虛擬 DOM 究竟是什麼？

6.5: template 編譯

簡而言之，就是先轉化成AST樹，再獲得的render函數返回VNode（Vue的虛擬DOM節點）

詳情步驟：首先，經過compile編譯器把template編譯成AST語法樹（abstractsyntaxtree即源代碼的抽象語法結構的樹狀表現形式），compile是createCompiler的返回值，createCompiler是用以建立編譯器的。另外compile還負責合併option。

而後，AST會通過generate（將AST語法樹轉化成renderfuntion字符串的過程）獲得render函數，render的返回值是 VNode，VNode是Vue的虛擬DOM節點，裏面有（標籤名、子節點、文本等等）

6.6: key

key 的做用就是在更新組件時判斷兩個節點是否相同。相同就複用，不相同就刪除舊的建立新的。

6.7: nextTick

簡單理解Vue中的nextTick

6.8: 父子組件通信

1. 父-> 子: props

子-> 父: on+emit
父<>子: on.sync(語法糖)來的
兄弟 : event bus | vuex

6.9: 父子組件生命週期

vue 父子組件的生命週期順序

6.10: keep-alive

若是想把切換出去的組件保留在內存中，並保留它的狀態或避免從新渲染。爲此能夠添加一個keep-alive指令

<component:is='curremtView' keep-alive></component>

6.11: vuex用法

vuex是一個狀態管理容器(你也能夠理解爲相似於全局變量),數據的流向是是單向數據流

vuex	vue
state	data
getters	computed
mutations	methods（同步操做）
actions	methods（異步操做

七瀏覽器

7.1 一個url從輸入到顯示的過程

1-1：DNS解析

1-2:TCP三次握手

1-3:發送請求，分析url，設置請求報文（頭，主題）

1-4:把請求回來的html代碼通過解析生成DOM樹

1-5:解析css代碼生成，生成樣式樹

1-6:結合DOM和style樹生成渲染樹

7.2 重繪與迴流

面試知識點 - JS 防抖與節流

7.3 內存泄漏

意外的全局變量：沒法被回收。

2.定時器：未被正確關閉，致使所引用的外部變量沒法被釋放。

3.事件監聽：沒有正確銷燬（低版本瀏覽器可能出現）。

4.閉包：會致使父級中的變量沒法被釋放。

5.DOM 引用：DOM 被刪除時，內存中的引用未被正確清空。

如何查看內存變化狀況？

使用 Chrome 的 Timeline（新版本 Performance）進行內存標記，可視化查看內存的變化狀況，找出異常點。

7.4 瀏覽器兼容性

PC端兼容性

瀏覽器兼容性問題解決方案 · 總結

移動端兼容性

移動 Web 開發問題和優化小結

八網絡協議

8.1 HTTP/HTTPS

HTTP：超文本傳輸協議（HTTP）是用於分佈式，協做式和超媒體信息系統的應用協議。它是Web上數據交換的基礎，是一種 client-server 協議，也就是說請求一般是由像瀏覽器這樣的接受方發起的。

HTTPS：HTTPS（全稱：Hypertext Transfer Protocol over Secure Socket Layer），是以安全爲目標的 HTTP 通道，簡單講是 HTTP 的安全版。即 HTTP 下加入 SSL 層，HTTPS 的安全基礎是 SSL，所以加密的詳細內容就須要 SSL。它是一個 URI scheme（抽象標識符體系），句法類同 http: 體系。用於安全的HTTP數據傳輸。https:URL 代表它使用了 HTTP，但 HTTPS 存在不一樣於 HTTP 的默認端口及一個加密/身份驗證層（在 HTTP 與 TCP 之間）。這個系統的最初研發由網景公司進行，提供了身份驗證與加密通信方法，如今它被普遍用於萬維網上安全敏感的通信，例如交易支付方面。