肝完這份前端毒雞湯,你就是賺到了(篇幅較長,建議收藏慢慢細品)

最近看到一份很是有意思的前端知識點清單整合,而後就滋生了一個想法emmmm....javascript

小編根據清單從新畫了一個圖,而後決定對下方這個圖羅列的知識點作一個系統的整合(征服欲燃起了熊熊大火)。工做之餘,小編花了大概一週多的時間整理,篇幅較長,建議收藏慢慢細品。php

Javascript基礎

變量和類型

1.變量css

js的變量,說白了就至關因而一個存儲數據的‘容器’。咱們在定義變量的時候須要注意一下幾點:html

  • 變量名大小對大小寫字母敏感;
  • 變量名須以字母開頭(也能以 $ 和 _ 符號開頭,可是不建議);

2.類型前端

js規定的數據類型有八種:Boolean, String, Number, Null, Undefined, bigInt, Symbol, Objectvue

  • 基本類型有六種: Boolean, String, Number, Null, Undefined,Symbol
  • 引用數據類型有一種: Object(在JS中除了基本數據類型之外的都是對象,Data, function, Array,正則表達式都是對象)

注意:SymbolES6 引入的一種新的原始數據類型,表示獨一無二的值。java

拓展: 關於nullundefined的區別和類似之處。於nullundefined在必定程度上及其類似,可是又有着細微的區別。node

null表示的是‘沒有對象’,即該處不該該有值。(也能夠這樣理解,null是已經定義可是值爲空,分配內存);python

  • 做爲函數的參數,表示該函數的參數不是對象。
  • 做爲對象原型鏈的終點。

undefined表示「未定義」,一個特殊值,一般用於指示變量還沒有賦值,其值就爲undefinedreact

  • 變量被聲明瞭,但沒有賦值時,就等於undefined(較爲常見)。
  • 調用函數時,應該提供的參數沒有提供,該參數等於undefined
  • 對象沒有賦值的屬性,該屬性的值爲undefined
  • 函數沒有返回值時,默認返回undefined

原型和原型鏈

說到原型和原型鏈,難免得說一下構造函數。

構造函數是一種特殊的方法。主要用來在建立對象時初始化對象。每一個構造函數都有prototype(原型)屬性。構造函數的出現是爲了解決使用Object構造函數和字面量表示法不方便建立大量重複對象的問題。看個例子:

function func(name){
this.name=name;
this.sayHello=function(){
  alert('my name is '+this.name);
}
}
var f=new func('phoebe');
f.sayHello();
複製代碼

此處的ffunc實例化以後的一個構造函數,new是用來實例化函數的一種手段。而func的構造函數其實是js內置的function,實際上function func(name){}等價於var func = function (name){}。到這裏相信你大概已經明白了何爲構造函數。

知曉了構造函數的概念以後,咱們來探討一下原型和原型鏈。

1.原型

  • prototype

每一個構造函數在建立時都會自動建立一個prototype屬性,咱們能夠在這個屬性當中添加新的屬性和方法,添加的屬性和方法能夠爲這個函數所使用。將這個函數實例化後的實例也可使用新添加的屬性和方法。這個prototype屬性指向的對象,包括自帶的屬性和咱們添加的屬性、方法,能夠把它指向的對象的內容集合稱爲構造函數的原型

注意prototype是構造函數纔有的屬性。

  • __ proto __

__proto__是每一個對象自帶的屬性,屬性值是當前實例所屬類的原型(prototype),原型對象中有一個屬性constructor, 它指向函數對象。

舉了例子:

function Example() {}
  var ExampleOne = new Example()
  console.log(ExampleOne.__proto__ === Example.prototype) // true
  console.log(Example.prototype.constructor===Example) // true
  // ExampleOne是個實例對象,帶有的是__proto__屬性,Example是個構造函數,帶的是prototype屬性
複製代碼

圖解:

  • constructor

每一個函數都會有一個原型對象,該原型對象有一個constructor屬性,會指向建立對象的函數自己。此外,全部的實例對象均可以訪問constructor屬性,constructor屬性是建立實例對象的函數的引用。

2.原型鏈

通常,每一個對象都會有一個原型__proto__,這個原型也有它本身的原型,將這些原型鏈接起來,造成一個原型鏈。在查找某一特定屬性時,會先去這個對象裏去找,若是對象上沒有的話就會去它的原型對象裏面去,單仍是沒有的話,會再去向原型對象的原型對象裏去尋找。 這個尋找的操做被委託在整個原型鏈上,咱們稱之爲原型鏈

圖解:

舉個例子:

function Example(){}
var ExampleOne = new Example(); //new實例化
console.log(ExampleOne.__proto__ === Example.prototype); // true
console.log(Example.prototype.__proto__ === Object.prototype) //true
console.log(Object.prototype.__proto__) //null

Example.__proto__ == Function.prototype; //true
console.log(Function.prototype)// function(){} (這是個空函數)

var number = new Array()
console.log(number.__proto__ == Array.prototype) // true
console.log( Array.prototype.__proto__ == Object.prototype) // true
console.log(Array.prototype) // [] (這是個空數組)
console.log(Object.prototype.__proto__) //null

console.log(Array.__proto__ == Function.prototype)// true
複製代碼

小結:

  1. __proto__是對象的屬性,prototype是構造函數的屬性,__proto__總指向prototype;
  2. prototype在構造函數建立時會自動生成,它總會被__proto__指向。

做用域和閉包

1.做用域

咱們先來講一下變量的做用域。變量的做用域通常分爲兩種:全局做用域和局部做用域。

全局做用域:函數最外層定義的變量,任何函數內部均可以訪問到。

例如

var a = '1';
function change() {
    console.log(a)
};
change()  // 1
複製代碼

局部做用域: 和全局做用域不一樣,局部做用域只能容許自身內部調用變量,外部函數沒法訪問。

例如:

function num() {
  var b='2'
};
num();
console.log(b) // b is not defined
複製代碼

須要注意的是,在函數內部聲明一個變量的時候,必定要記住得用var定義,否則至關於聲明瞭一個全局變量。

例如:

function change() {
    num=2;
}
change();
console.log(num) // 2
複製代碼

須要注意的是,函數內部存在的變量提高問題。

咱們先看下面例子:

var num1 = 1;
function one() {
    console.log(num1);  // undefined
    var num1 = 2;
    console.log(num1) // 2
}
複製代碼

其實上面的例子等價於:

var num1 = 1;
function one() {
  var num1
  console.log(num1);  // undefined
  num1 = 2;
  console.log(num1) // 2
}
複製代碼

不難看出,這是存在在函數內部變量提高的現象。

或許對概念不清晰的童鞋對於第一個例子會有點疑惑,認爲第一個打印出來的應該是1,而不是undefined(寄拖鞋警告一次)。

爲何呢?其實one()函數內部聲明瞭num1one()此時就是一個局部做用域,在內部沒有聲明num1的狀況下,是會直接獲取全局變量num1

可是在局部做用域聲明瞭num1以後,num1這個變量會提高。如第一個例子,當第一次console.log(num1)的時候,就至關於var num1,定義了一個變量但沒有賦值,第二次打印,會打印出賦值以後的num1,就像上面的第二個例子。

拓展:在這裏,想拓展一下幾種常見的聲明變量的方式。

  • var :若是在當前函數內部聲明一個變量,則做用範圍在函數內部;若是在最外層聲明,則做爲全局變量;若是未使用var定義直接使用變量,則會報錯;
  • const:具備塊級做用域的特徵,同一個做用域中,變量名只能聲明一次,不存在變量提高。const聲明的變量必須是個常量。
  • let: 跟const幾乎相似,可是最主要的區別是let聲明的是一個變量,const聲明的必須是個常量。

不一樣之處:

*var存在變量提高,letconst不會;

  • var在函數內部同一個變量能夠重複聲明,而在同一個塊級做用域內部,letconst只能聲明一次,而且const聲明的是個常量,不能修改;
  • var 聲明的變量屬於函數做用域,letconst 聲明的變量屬於塊級做用域

2.閉包

簡單的說,閉包有兩個做用:一就是可以讀取其餘函數內部變量的函數(也就是讀取自身函數之外的變量)。二是讓這些外部變量始終保存在內存中。

閉包能夠避免使用全局變量,防止變量污染,可是過多使用會形成內存泄露。

舉個例子,我想要獲取一個函數內部的變量:

var num = 200;
function f1() {
    var num = 100;
    return num
};
f1() // 100
var fn = f1(); 
fn() // fn is not a function
複製代碼

這顯然是不行的,fn獲取不到f1內部的變量。這時候咱們能夠考慮在f1內部返回一個函數看看結果:

var num = 200;
function f1() {
    var num = 100;
    return function () {
        return num
    }
};
var fn = f1(); 
fn() // 100
複製代碼

經過在函數內部返回一個函數,外部函數能夠根據返回的函數獲取到原來函數內部的變量,這就體現了閉包的做用。

想研究的更透徹歡迎猛戳:

developer.mozilla.org/zh-CN/docs/…

執行機制

javascipt是單線程的描述性腳本語言,與javaC#等編譯性語言不一樣,它不須要進行編譯成中間語言,而是由瀏覽器進行動態地解析與執行。因此,弄懂它的執行機制是頗有必要的。

因爲javascript是單線程的,爲了防止在網頁加載過程當中因爲圖片音樂等過大文件而致使加載阻塞,從而衍生出了‘同步任務’和‘異步任務’。咱們能夠先看一下以下流程圖:

經過上圖能夠較爲清晰的看到任務執行的流程。

在同步任務和異步任務以外,執行任務的時候還定義了‘宏觀任務’和‘微觀任務’兩種。通常來講:

  • macro-task(宏任務):包括總體代碼scriptsetTimeoutsetInterval
  • micro-task(微任務):Promiseprocess.nextTick(node.js);

任務一開始執行的時候,會進入到相應的Event Queue當中。事件循環的順序,決定js代碼的執行順序。進入總體代碼(宏任務)後,開始第一次循環。接着執行全部的微任務。而後再次從宏任務開始,找到其中一個任務隊列執行完畢,再執行全部的微任務。

雖說js是單線程的,可是並非簡單意義上的就是按順序往下執行。經過以上所講的這些執行順序,相信大家應該在內心有個大概的思路了(拖鞋警告二)。看個例子(網上搜的,就得解釋的能夠就拿過來了):

console.log('1');
 
setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})
 
setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })

複製代碼

最終輸出的順序是:1,7,6,8,2,4,3,5,9,11,10,12。有沒有跟你所預想的同樣?若是是,那麼恭喜這位童鞋,你已經大體掌握了js的執行機制了。若是不是,那就往下瞅瞅。

第一輪事件循環流程分析以下:

總體script做爲第一個宏任務進入主線程,遇到console.log,輸出1。

遇到setTimeout,其回調函數被分發到宏任務Event Queue中。咱們暫且記爲setTimeout1

遇到process.nextTick(),其回調函數被分發到微任務Event Queue中。咱們記爲process1

遇到Promisenew Promise直接執行,輸出7then被分發到微任務Event Queue中。咱們記爲then1

又遇到了setTimeout,其回調函數被分發到宏任務Event Queue中,咱們記爲setTimeout2

宏觀任務(Event Queue 微觀任務(Event Queue
setTimeout1 process1
setTimeout2 then1

上表是第一輪事件循環宏任務結束時各Event Queue的狀況,此時已經輸出了1和7。

咱們發現了process1then1兩個微任務。

執行process1,輸出6。

執行then1,輸出8。

第一輪事件循環正式結束,這一輪的結果是輸出1,7,6,8。那麼第二輪時間循環從setTimeout1宏任務開始:

首先輸出2。

接下來遇到了process.nextTick(),一樣將其分發到微任務Event Queue中,記爲process2new Promise當即執行輸出4,then也分發到微任務Event Queue中,記爲then2

宏觀任務(Event Queue 微觀任務(Event Queue
setTimeout2 process2
then2

第二輪事件循環宏任務結束,咱們發現有process2then2兩個微任務能夠執行。

輸出3。

輸出5。

第二輪事件循環結束,第二輪輸出2,4,3,5

第三輪事件循環開始,此時只剩setTimeout2了,執行。

直接輸出9。

process.nextTick()分發到微任務Event Queue中。記爲process3

直接執行new Promise,輸出11。

then分發到微任務Event Queue中,記爲then3

宏觀任務(Event Queue 微觀任務(Event Queue
process3
then3

第三輪事件循環宏任務執行結束,執行兩個微任務process3then3

輸出10。

輸出12。

第三輪事件循環結束,第三輪輸出9,11,10,12

最終整段代碼,共進行了三次事件循環,完整的輸出爲1,7,6,8,2,4,3,5,9,11,10,12

(須要注意的是,node環境下的事件監聽依賴libuv與前端環境不徹底相同,輸出順序可能會有偏差)

最後補充一點,謹記javascript是一門單線程語言,而Event Loopjavascript的執行機制。

語法和API

關於javascript的語法和API,這裏就不過多介紹了。附上幾個連接,能夠詳細的看一下:


HTML和CSS

HTML

HTML,超文本標記語言,是一種標識性的語言。它是撐起頁面框架結構的重要部分。

HTML部分的內容較爲基礎,前端的童鞋確定是很熟悉的。可是這裏仍是要附上連接: www.w3school.com.cn/html/html_j…

CSS

css,層疊樣式表,用來修飾頁面。除了瞭解css的基本用法以外,小編在這裏想記錄幾個面試常常被問到的有關樣式的硬核問題。

1.經常使用的幾種佈局方式

  • 固定佈局:最外層盒子寬度固定且不能移動,裏面的各個模塊也是固定寬度而不是百分比。不管訪問者的屏幕的分辨率是多少,網頁都顯示爲和其餘訪問者相同的寬度。
  • 流式佈局(自適應佈局):盒子寬高按百分比(故而也稱之爲百分比佈局)。
  • 定位佈局: 使用決定定位,相對定位和固定定位的佈局
  • 浮動佈局:使用float:left;float:right;設置佈局,注意清除浮動。
  • 響應式佈局(媒體查詢): 使用@media,詳情可參考:www.runoob.com/cssref/css3…
  • 彈性佈局(伸縮佈局):獻上阮一峯老師的細緻分析文檔:www.ruanyifeng.com/blog/2015/0…
  1. 關於BFC
  • BFC是什麼

    BFC(Block Formatting Context)塊級格式化上下文,是用於佈局塊級盒子的一塊渲染區域。BFC是web頁面CSS視覺渲染的一部分,用於決定塊盒子的佈局及浮動相互影響範圍的一個區域。

  • BFC的做用

    BFC是頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面元素,反之亦然。

    咱們能夠用BFC來阻止元素被浮動元素覆蓋阻止瀏覽器由於四捨五入形成的多列布局換行的狀況阻止相鄰元素的margin合併等。同時,BFC還能夠包含浮動元素。

  • BFC的約束規則

    (1)內部的元素會在垂直方向上一個接着一個的放置。計算BFC的高度時,須要注意浮動元素也參與計算;

    (2)Box垂直方向的距離由margin決定。注意:屬於同一個BFC的兩個相鄰的Boxmargin會發生重疊;

    (3)生成BFC元素的子元素中,每個子元素的margin與包含塊的左邊界border相接觸(對於從左到右的格式化,不然相反),就算是在浮動中也同樣;

    (4)BFC的區域不會與float box重疊。

    (5)BFC至關於頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面的元素。相反也同樣。

  • BFC能夠解決哪些問題

    margin重疊問題、文本不環繞浮動元素問題、包裹浮動元素沒有高度問題(父元素塌陷問題)等。

  • BFC觸發方式(一種便可)

    (1)float的值不爲none

    (2)overflow的值不爲visible;

    (3)display的值爲table-celltabble-captioninline-block之一;

    (4)position的值不爲static或則releative中的任何一個;

  • BFC佈局與普通文檔流佈局區別

    普通文檔流佈局規則

    (1)浮動的元素是不會被父級計算高度;

    (2)非浮動元素會覆蓋浮動元素的位置;

    (3)margin會傳遞給父級;

    (4)兩個相鄰元素上下margin會重疊;

    BFC佈局規則

    (1)浮動的元素會被父級計算高度(父級觸發了BFC);

    (2)非浮動元素不會覆蓋浮動元素位置(非浮動元素觸發了BFC);

    (3)margin不會傳遞給父級(父級觸發了BFC);

    (4)兩個相鄰元素上下margin會重疊(給其中一個元素增長一個父級,而後讓他的父級觸發BFC);

3.CSS3有哪些新特性

新增各類CSS選擇器, 新增圓角(borser-radiuis),多列布局(multi-column layout),陰影和反射(multi-column layout),文字特效(text-shadow),線性漸變(gradient),旋轉(transform)以及縮放、定位、傾斜、動畫,多背景等。

4.CSS的性能優化

  • 儘可能的避免使用expression表達式[IE]以及filter屬性[IE]
  • CSS的樣式儘量的採起縮寫形式,例如給盒子marginpadding值等;
  • 適當減小使用沒必要要的並行規則,例如content.left{...},content.right{...}等,直接用.left{...},.right{...}代替會更加快;
  • 儘可能減小規則層數,層數越多,定位越慢(很是慢),使用一個有語義的選擇器每每可以取得更好的效率;
  • 利用好繼承機制;
  • 儘可能減小重佈局以及重繪;

5.CSS預處理

css預處理器是用一種專門的語言,進行網頁的樣式設計,以後在被編譯爲正常的css文件,以供項目使用。使用css預處理語言使得css更加簡潔、方便修改、可讀性強、適應新強而且更易於代碼的維護。

(此處將會持續更新)


計算機基礎

編譯原理

網絡協議

其實前端最主要用到的網絡協議主要有TCPUDPHTTPFTPIPICMPIGMPARPRARP等協議。咱們能夠看看以下圖(摘自網頁,主要是爲了描述):

1.分層對應的協議

  • 傳輸層中,主要有TCP/UDP協議;
  • 應用層中,主要有HTTPFTP協議;
  • 網絡層中,主要有IPICMPIGMP協議;
  • 網絡接口層中,主要有 ARPRARP協議;

2.TCP三次握手和四次揮手(圖片摘自百度)

先看三次握手:

第一次握手: 客戶端將含有「同步序列號(SYN)」標誌位的數據段發送給服務端請求連接;

第二次握手:服務器用一個帶有「確認應答(ACK)」和「同步序列號(SYN)」標誌位的數據段響應客戶端;

第三次握手:客戶端收到數據後,發送一個數據段確認收到服務器的數據段,服務器收到數據確認無誤,開始傳送實際數據;

四次揮手:

第一次揮手:客戶端發送一個FIN和一個seq,用來關閉客戶端到服務器端的數據傳送,客戶端進入fin_wait1狀態;

第二次揮手:服務端收到FIN後,返回一個ACK給客戶端,同時,將seq的值+1做爲確認序號一併返回(確認序號爲收到序號+1),服務端進入close_wait狀態;

第三次揮手:服務端發送FIN和一個值爲n的seq給客戶端,用來關閉服務端的數據傳輸,服務端進入last_wait狀態;

第四次揮手:客戶端收到 FIN後, 客戶端進入time_wait狀態,接着發送一個ACK和一個帶值爲n+1seq給服務端(確認序號爲收到序號 +1 ) ,服務端進入close狀態,完成四次揮手。

3.有關創建連接是三次握手,關閉的時候是四次握手的問題。

由於當服務端收到客戶端的SYN鏈接請求報文後,能夠直接發送SYN+ACK報文。其中ACK報文負責響應,SYN報文負責同步。可是在關閉鏈接時,當服務端收到FIN報文時,極可能並不會當即關閉socket,此時只能先回復一個ACK報文,來通知客戶端,"你發的FIN報文我收到了"。只有等到服務端全部的報文都發送完了,才能發送FIN報文,所以不能一塊兒發送。因此須要四步握手。

設計模式

小編我對於這塊瞭解其實不是很深,可是我感受是,每種編程語言都有不同的設計模式。設計模式強調的偏向於一個設計問題的解決辦法,能夠理解爲是一套能夠被反覆使用,供多數人知曉的,通過分類編目的,代碼設計經驗的總結。(有不對的地方望大佬們指正)。

設計模式和框架以及架構仍是有所區別的:

  • 於框架而言,設計模式所講的的是對單一問題的設計思路和解決方法,一個模式可應用於不一樣的框架和被不一樣的程序語言所實現;而框架則是一個應用的體系結構,是一種或多種設計模式和代碼的混合體。設計模式的思想能夠在框架設計中進行應用。
  • 於架構而言,設計模式除了是對單一問題的設計思路和解決方法以外,範疇比較小;而架構是高層次的針對體系結構的一種設計思路,範疇比較大。一個架構中可能會出現多個設計模式的思想。

數據結構和算法

JS編譯能力

手動實現前端輪子

數據結構

算法

以上的這幾部分,emmm好好看書,多動腦多動手,慢慢提升吧,


運行環境

關於運行環境,單看標題可能下意識會有點丈二的和尚摸不着頭腦的感受。多是以爲範圍太大,亦或者是概念模糊,其實小編也是這樣。不太小編以前閱讀過一篇文章,裏邊簡略的介紹了運行環境,可分爲以下幾點:

  1. 加載資源的形式

    有分爲輸入url(或跳轉頁面)加載html和加載html中的靜態資源兩種。

  2. 加載一個資源的過程

    首先瀏覽器根據DNS服務器獲得域名的IP地址,而後向這個IP的機器發送http請求,接着服務器收到、處理並返回http請求,最後瀏覽器獲得返回內容。

  3. 瀏覽器渲染頁面的過程

    首先是瀏覽器根據HTML結構生成DOMTree,而後根據CSS生成CSSOM(視圖模塊),接着將DOMCSSOM整合造成RenderTree(渲染樹),最後根據RenderTree開始渲染和展現。注意,當遇到script時,會執行並阻塞渲染。

  4. 輸入url到獲得html的過程

    瀏覽器根據DNS服務器獲得域名的IP地址->向這個IP的機器發送http請求->服務器收到、處理並返http請求->瀏覽器獲得返回內容。

  5. window.onloadDOMContentLoaded區別

    window.addEventListener('load',function( ){...})//頁面全部資源所有加載完才執行
    document.addEventListener('DOMContentLoaded',function( ){...})//DOM渲染完便可執行,此時圖片視頻可能沒加載完
    複製代碼
  6. 性能優化

  • 多用內存、緩存或其餘方法;
  • 減小CPU計算,減小網絡請求;

要實現以上兩種優化,能夠從兩方面入手:

  • 優化資源加載:例如靜態資源壓縮、靜態資源緩存、使用cdn、使用ssr後端渲染,數據庫直接輸出到html中;
  • 優化渲染:在放置樣式以及腳本代碼時,樣式最好放置在head標籤內,script放置在最後(渲染機制,js會阻礙渲染,對加載頁面不友好)、使用圖片懶加載、減小DOM查詢,對DOM查詢作緩存、減小DOM操做,多個操做盡可能合併在一塊兒執行、事件節流(不要頻繁觸發)、儘早執行操做。
  1. 安全性
  • 跨站腳本攻擊(Cross-site scripting,簡稱XSS

    是一種網站應用程序的安全漏洞攻擊,是代碼注入的一種。它容許惡意用戶將代碼注入到網頁上,其餘用戶在觀看網頁時就會受到影響。這類攻擊一般包含了HTML以及用戶端腳本語言。

  • 跨站請求僞造(Cross-site request forgery,簡稱XSRF

    是一種對網站的惡意利用。與XSS不一樣,XSS利用站點內的信任用戶,而CSRF則經過假裝來自受信任用戶的請求來利用受信任的網站。CSRFXSS更具危險性。

預防措施:有 Token驗證、Referer驗證、隱藏令牌 三種。

瀏覽器API

推薦有須要的童鞋到MDN上去了解。

附上連接: developer.mozilla.org/zh-CN/docs/…

瀏覽器原理

前不久小編恰好看到知乎某位大佬寫的一片關於瀏覽器原理的文章,感受通俗易懂,分析的透徹,有想了解的童鞋也能夠去了解一下。

附上連接:zhuanlan.zhihu.com/p/47407398

Node

Node,簡單的說是運行在服務器的javascript,它是一個基於Chrome javascript運行時創建的一個平臺,同時也是一個事件驅動I/O服務端javascript環境,基於GoogleV8引擎,V8引擎執行javascript的速度很是快,性能很是好。

想大體瞭解node的能夠參考一下連接: www.runoob.com/nodejs/node…

想全面瞭解的能夠把目光轉向:nodejs.cn/api/assert.…


前端工程

項目構建

在構建前端項目的時候,須要考慮如何搭建前端框架。通常來講,有兩種方式:一是採用現有的前端框架(比較省時便捷,後期只須要按照需求往內填充業務邏輯便可);第二種是本身來搭建項目框架。

ant design以及element等是前端常常用到的一些組件庫,其中,也不乏好用的前端框架模板。例如create-react-app,react-starter-kit,react-bolierplate,ant-design-pro等,這些都是較爲經常使用的模板。通常來講,提供的模板都會有一個較爲統一的文件規範,這些有須要的童鞋能夠本身去ant design 的官網瞭解一下,小編這裏就不綴述了。

官網連接: ant.design/components/…

至於如何使用,官網上有詳細的講解。除此以外,在gitclone到本地的時候,須要將其初始化再運行,這點不要忘記啦。對於剛接觸前端的童鞋,再看到這部份內容,想要着手實驗的時候,得先熟悉node.js的使用,切記。

如下是小編好久以前本身着手搭建的一個簡易的框架,多少坑仍是本身親腳踩過,能力才能提升。文章詳細的步驟都已經寫上了,有疑問的地方歡迎留言(不足之處歡迎指出)。附上連接:juejin.im/post/5b6049…

nginx

  1. nginx的概念
  • Nginx是由俄羅斯的程序設計師lgor Sysoev所開發一個高性能的HTTP和反向代理服務器,也是一個IMAP/POP3/SMTP代理服務器;
  • 它是一款輕量級的Web服務器/反向代理服務器以及電子郵件代理服務器,並在一個BSD-like協議下發行;
  • 其特色是佔有內存少,併發能力強,事實上nginx的併發能力確實在同類型的網頁服務器中表現較好;
  • 它相較於Apache\lighttpd具備佔有內存少,穩定性高等優點,而且依靠併發能力強,豐富的模塊庫以及友好靈活的配置而聞名;
  • Linux操做系統下,nginx使用epoll事件模型,得益於此,nginxLinux操做系統下效率至關高。同時NginxOpenBSDFreeBSD操做系統上採用相似於Epoll的高效事件模型kqueue
  • 它做爲負載均衡服務:Nginx 既能夠在內部直接支持 RailsPHP 程序對外進行服務,也能夠支持做爲 HTTP代理服務對外進行服務。Nginx採用C進行編寫,不管是系統資源開銷仍是CPU使用效率都比 Perlbal 要好不少;
  • 反向代理,負載均衡。當網站的訪問量達到必定程度後,單臺服務器不能知足用戶的請求時,須要用多臺服務器集羣可使用nginx作反向代理。而且多臺服務器能夠平均分擔負載,不會由於某臺服務器負載高宕機而某臺服務器閒置的狀況。
  1. nginx的應用場景
  • 應用於虛擬主機,能夠實如今一臺服務器虛擬出多個網站。
  • 應用於http服務器,Nginx是一個http服務能夠獨立提供http服務。能夠作網頁靜態服務器。
  • 反向代理,負載均衡。當某一網站的訪問量達到必定程度後,單臺服務器不能知足用戶的請求時,須要用多臺服務器集羣,可使用nginx作反向代理。多臺服務器能夠平均分擔負載,不會由於某臺服務器負載高宕機而某臺服務器閒置的狀況。

開發提速

在編寫項目的過程當中,咱們在按規定的項目週期以內完成之餘,還須要考慮的是項目的加載速率以及性能優化。友好的頁面展現以及運行能給用戶留下不錯的印象,這是前端開發人員成功的一小步。

在前端開發過程當中,要想頁面展現的更安全更快,須要作到如下幾點:

  • 減小http請求;
  • 合併腳本文件;
  • 指定Expires或者Cache-Control
  • 緩存ajax請求;
  • 移除重複的js;
  • 避免重定向;
  • 使用CDN
  • 減少返回數據的體積(可以使用gzip壓縮返回數據,最小化js文件和css文件,將cssjs獨立成外部文件);
  • 優化cookie(減少cookie的體積,合理設置Cookie域,設置合理的cookie過時時間,使用域分離)
  • 優化瀏覽器加載(將css放在頁面頂部加載,js放在頁面底部加載)

持續集成

什麼是持續集成?持續集成是一種軟件開發實踐,是指團隊開發項目過程當中,集成各自所負責的項目部分到同一個地方。經過每一個成員天天至少集成一次,一天可能會集成屢次。每次集成都經過自動化的構建(包括編譯,發佈,自動化測試)來驗證,從而儘早地發現集成錯誤。

舉個最簡單的例子,項目git提交以及構建。一個前端項目由兩個前端開發人員負責,每一個人負責一部分,項目在git上有個master分支(項目主分支)。開發人員拉取代碼到本地,需創建一個本地分支如(如dev)。當開發人員開發過程當中,部份內容完成了須要提交,在拉取最新版本代碼,合併代碼無誤的狀況下,將本身本地創建的分支內容提交到git,確保代碼無誤,併入到master分支,最後構建項目。小編大概理解的是這樣。

持續集成能夠下降風險,減小重複。同時,不受時間地點的控制,隨時能夠生成部署的軟件,從而提升開發效率。

版本控制

在前端開發中,版本控制也是重要的一環。

舉個例子,在開發人員拉取最近的代碼,而後合併提交了以後,發現了問題,這時候能夠回滾到上一版本。主分支同理,在發現問題或是需求突然變動到原始版本的時候能夠回退到原始任意版本。這在必定程度上爲開發過程當中的突發情況提供了便利。

再舉個例子:在開發過程當中,常常會變成一些內容,好比頁面樣式以及js。在最開始的時候,定義了一個one.cssone.js的文件並引入:

<link rel="stylesheet" href="one.css"></link>
<script src="one.js"></script>
複製代碼

提交構建完以後,瀏覽器打開,考慮到緩存的問題,瀏覽器會緩存此次的樣式以及js。以後需求變動,更改了一部分樣式,構建完以後,打開看到樣式沒有變動。緣由是由於瀏覽器緩存了以前的樣式以及js,並無更新。這時,能夠選擇給改變的樣式以及js添加一個版本號:

<link rel="stylesheet" href="one.css?v=0.01"></link>
<script src="one.css?v=0.01"></script>
複製代碼

可是每次更新代碼都要手動更改版本號,這顯然不合理。這時候咱們能夠考慮,利用生成hash值,來判斷文件內容是否變化。

須要注意的是,咱們發佈項目的時候,資源文件和主文件是分開發的,資源文件部署在CDN中,主文件部署在服務器。在發佈的時候,將資源文件變成非覆蓋式發佈,解決新版和舊版資源文件共存問題。而後先發資源文件,在資源文件部署成功後,在發主文件,這樣能夠避免不少問題。

<link rel="stylesheet" href="one.o3289.css"></link>
<script src="one.o3289.js"></script>
複製代碼

最後代碼呈現的樣子。

懂了麼?嗯?仍是不明白的話....


框架/類庫

TypeScript

關於TypeScript,小編我也是趁着此次總結,去學習了一下阮一峯老師寫的文檔,收穫頗多。

附上連接:ts.xcatliu.com/

React

關於react部分,小編用的也是這個,有js基礎的能夠去看看react官網,熟悉一下react的使用,代碼規範以及生命週期等。

附上連接:reactjs.org/

要是剛接觸前端的童鞋,能夠轉身先看看阮一峯老師寫的這本書,再結合react官網學習。

連接:caibaojian.com/es6/

Vue

vue小編其實不是很擅長,以前跑去它家的官網看了一遍文檔,當下感受還行,可是由於如今的項目通常用的是react,其實如今已是雲裏霧裏,忘得差很少了,害。

附上連接: cn.vuejs.org/

有興趣的童鞋能夠去瞅瞅。

多端開發

對於多端開發,小編的理解實際上是這樣的:

當一個項目明確了需求以後,在開發的過程當中極大程度生會多端共同配合開發。就好比一款產品,除了有後臺和web端開發,還須要開發小程序以及APP,這就須要多端共同配合。

傳統方式開發會花費更多的時間,寫更多的代碼,對於項目上線和發佈都會有必定時間限制,不能作到同時發佈,也須要對應着每一端,相應的開發寫對應的代碼。消耗更多的時間和資源的同時,開發速度和效果也沒有預期的高。不過在如今的開發框架中,已經出現了許多的多端開發框架,這種基本都是用於移動端的開發。對於如今開發的需求,是大大的提高了開發者的速度,和大大減小了項目多端分佈的開發短板。

如今大部分的項目,涉及到多端開發的機率很大,就好比小編最近剛結束提測的這個項目,就是web端結合微信小程序的開發(在react和微信小程序間來回摩擦,被迫切換自如誒)。可是在通常狀況下,一個前端不多會有一我的負責多端開發的狀況出現(也只是小編理解的通常狀況,不排除小公司一我的當多我的使)。一個項目中負責web端的就只負責web端,負責小程序的會另外分配人員。

可是做爲一名前端程序員(媛),對於多端開發得有一個概念性的理解。

數據流管理

鑑於小編目前用的是react,在這裏就着重講解一下react有關數據流的部分。

簡單來說,react是自頂向下的單向數據流,經過setState來改變state的狀態。在管理數據流部分,react常常配合redux一塊兒使用,這樣能夠有效的避免組件臃腫的問題。同時,還能實現跨組件通訊、狀態同步以及狀態共享,處理異步數據流,讓組件變得可預知。

redux是由flux衍生出來的,是flux的進化版。redux有三大原則:惟一數據源,保持只讀狀態,數據狀態只能經過純函數完成。

redux提供了storeactionreduce三個API:

  1. storeRedux 應用只有一個單一的 store
  • 維持應用的 state
  • 提供 getState() 方法獲取 state
  • 提供 dispatch(action) 方法更新 state
  • 經過 subscribe(listener) 註冊監聽器;
  • 經過 subscribe(listener) 返回的函數註銷監聽器
  1. action
  • 把數據從應用傳到 store 的有效載荷。它是 store 數據的惟一來源,通常經過 store.dispatch()action 傳到 store
  1. reduce
  • 指定了應用狀態的變化如何響應 actions 併發送到 storestore收到action後,須要給出一個新的狀態來更新頁面,這種state的計算過程就叫作reducer

數據流過程簡述: 簡單的說就是,在界面中用戶經過dispatch,觸發actionstore調用reducer,而且傳入當前stateaction,更新state並返回新的stateview更新。

實用庫

在這裏,主要列述一下小編目前用到的以及瞭解過的庫吧,畢竟組件庫啊框架之類的有不少,可是實用的確定是本身最常常用到並且用的比較順手的。

1.前端UI組件庫

  1. 前端框架
  1. 前端自動化構建工具
  1. 前端自動化模塊管理工具
  1. 前端自動化css預處理器
  1. js框架
  1. 前端框架模板(開箱即食)
  1. 圖表繪製
  1. 日期格式化
  1. Icon組件

以上是小編目前較爲常常用到的實用庫。

另外,附上最近看到的一個較爲全面的實用庫整理的連接:www.luoxiao123.cn/1196.html

開發測試

關於前端開發測試,小編的理解是,在寫完代碼後檢查所實現的功能是否符合項目需求,界面樣式排版是否符合UI設計等。

有關前端測試,能夠分爲如下幾種類型:

  • 單元測試
  • 集成測試
  • 樣式測試
  • E2E測試
  • 測試覆蓋率與代碼變異測試
  • 代碼變異測試

關於這部分,瞭解一下就好,畢竟還有測試組不是小哥哥小姐姐的麼嘿嘿


項目及業務

後端技能

做爲一名前端,瞭解一門相關的後端語言其實頗有必要,例如java/php/python等。如今不少公司面試的時候都會要求至少掌握或瞭解一門後臺語言,技多不壓身,多學習瞭解提高自身技能是硬道理。

主要是,掌握了基本的後臺技能,在寫前端項目的時候,遇到問題,跟後端溝通起來相對來講也比較方便。

性能優化

性能優化的目的主要仍是讓頁面加載的更快,對用戶操做響應更及時,爲用戶帶來更好的用戶體驗,對於開發者來講優化可以減小頁面請求數,可以節省資源。

關於性能優化,前面小編已經有所介紹,有忘記的童鞋能夠往上翻翻。

前端安全

關於前端安全,其實主要常見的仍是XSS(跨站腳本攻擊)和CSRF(跨站請求僞造),這兩部分文章中已經作了較爲詳細的解釋。

在這裏有一點須要注意的是「點擊劫持」。

概念: 點擊劫持 指第三方網站經過iframe內嵌某一個網站,而且將iframe設置爲透明不可見,將其覆蓋在其餘通過假裝的DOM上,假裝的可點擊DOM(按鈕等)與實際內嵌網站的可點擊DOM位置相同,當用戶點擊假裝的DOM時,實際上點擊的是iframe中內嵌的網頁的DOM從而觸發請求操做。點擊劫持的最大特色是用戶本身觸發了點擊事件,可是絕不知情

解決方案:

  • javascript 禁止內嵌
  • X-FRAME-OPTIONS 禁止內嵌
  • 其餘輔助手段如 添加驗證碼

業務相關

做爲一名前端工做者,小編(以組內大佬小哥爲模板)列舉一下與前端業務相關的事項:

  • 具有良好的團隊溝通技能,能按照產品給出的原型實現相關的功能,按照UI設計師給的設計圖實現佈局;
  • 具備必定的審美,對界面顏色搭配,樣式佈局等有很好的把控與設計;
  • 會使用PS以及切圖軟件等相關工具(不能遇到一點樣式問題就去找設計人員,本身會的話改改更快,小編親鑑);

目前小編以爲大概就這幾個,若是以爲有寫漏的,歡迎下方留言。


總結

到這裏基本結束啦。整理的過程當中,因爲有些概念性的東西怕說不明白誤人子弟,就在網上搜了一些例子講解。

小編年少輕狂,以前口出狂言,立下flag說每隔兩個禮拜出一篇文章,害。不過每次整理知識點,小編都能收穫不少,但願也能幫助有須要的人。仍是內句老話,如有不足,請留言指出。若對您有所幫助,emmmmm

相關文章
相關標籤/搜索