最近看到一份很是有意思的前端知識點清單整合,而後就滋生了一個想法emmmm....javascript
小編根據清單從新畫了一個圖,而後決定對下方這個圖羅列的知識點作一個系統的整合(征服欲燃起了熊熊大火)。工做之餘,小編花了大概一週多的時間整理,篇幅較長,建議收藏慢慢細品。php
1.變量css
js
的變量,說白了就至關因而一個存儲數據的‘容器’。咱們在定義變量的時候須要注意一下幾點:html
$
和 _ 符號開頭,可是不建議);2.類型前端
js
規定的數據類型有八種:Boolean
, String
, Number
, Null
, Undefined
, bigInt
, Symbol
, Object
vue
Boolean
, String
, Number
, Null
, Undefined
,Symbol
Object
(在JS中除了基本數據類型之外的都是對象,Data
, function
, Array
,正則表達式都是對象)注意:Symbol
是 ES6
引入的一種新的原始數據類型,表示獨一無二的值。java
拓展: 關於null
和undefined
的區別和類似之處。於null
和undefined
在必定程度上及其類似,可是又有着細微的區別。node
null
表示的是‘沒有對象’,即該處不該該有值。(也能夠這樣理解,null是已經定義可是值爲空,分配內存);python
undefined
表示「未定義」,一個特殊值,一般用於指示變量還沒有賦值,其值就爲undefined
。react
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();
複製代碼
此處的f
是func
實例化以後的一個構造函數,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
複製代碼
小結:
__proto__
是對象的屬性,prototype
是構造函數的屬性,__proto__
總指向prototype
;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()
函數內部聲明瞭num1
,one()
此時就是一個局部做用域,在內部沒有聲明num1
的狀況下,是會直接獲取全局變量num1
。
可是在局部做用域聲明瞭num1
以後,num1
這個變量會提高。如第一個例子,當第一次console.log(num1)
的時候,就至關於var num1
,定義了一個變量但沒有賦值,第二次打印,會打印出賦值以後的num1
,就像上面的第二個例子。
拓展:在這裏,想拓展一下幾種常見的聲明變量的方式。
var
:若是在當前函數內部聲明一個變量,則做用範圍在函數內部;若是在最外層聲明,則做爲全局變量;若是未使用var
定義直接使用變量,則會報錯;const
:具備塊級做用域的特徵,同一個做用域中,變量名只能聲明一次,不存在變量提高。const
聲明的變量必須是個常量。let
: 跟const
幾乎相似,可是最主要的區別是let
聲明的是一個變量,const
聲明的必須是個常量。不一樣之處:
*var
存在變量提高,let
和const
不會;
var
在函數內部同一個變量能夠重複聲明,而在同一個塊級做用域內部,let
和const
只能聲明一次,而且const
聲明的是個常量,不能修改;var
聲明的變量屬於函數做用域,let
和 const
聲明的變量屬於塊級做用域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
是單線程的描述性腳本語言,與java
或C#
等編譯性語言不一樣,它不須要進行編譯成中間語言,而是由瀏覽器進行動態地解析與執行。因此,弄懂它的執行機制是頗有必要的。
因爲javascript
是單線程的,爲了防止在網頁加載過程當中因爲圖片音樂等過大文件而致使加載阻塞,從而衍生出了‘同步任務’和‘異步任務’。咱們能夠先看一下以下流程圖:
經過上圖能夠較爲清晰的看到任務執行的流程。
在同步任務和異步任務以外,執行任務的時候還定義了‘宏觀任務’和‘微觀任務’兩種。通常來講:
macro-task
(宏任務):包括總體代碼script
,setTimeout
,setInterval
;micro-task
(微任務):Promise
,process.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
。
遇到Promise
,new Promise
直接執行,輸出7
。then
被分發到微任務Event Queue
中。咱們記爲then1
。
又遇到了setTimeout
,其回調函數被分發到宏任務Event Queue
中,咱們記爲setTimeout2
。
宏觀任務(Event Queue ) |
微觀任務(Event Queue ) |
---|---|
setTimeout1 |
process1 |
setTimeout2 |
then1 |
上表是第一輪事件循環宏任務結束時各Event Queue
的狀況,此時已經輸出了1和7。
咱們發現了process1
和then1
兩個微任務。
執行process1
,輸出6。
執行then1
,輸出8。
第一輪事件循環正式結束,這一輪的結果是輸出1,7,6,8
。那麼第二輪時間循環從setTimeout1
宏任務開始:
首先輸出2。
接下來遇到了process.nextTick()
,一樣將其分發到微任務Event Queue
中,記爲process2
。new Promise
當即執行輸出4,then
也分發到微任務Event Queue
中,記爲then2
。
宏觀任務(Event Queue ) |
微觀任務(Event Queue ) |
---|---|
setTimeout2 |
process2 |
then2 |
第二輪事件循環宏任務結束,咱們發現有process2
和then2
兩個微任務能夠執行。
輸出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 |
第三輪事件循環宏任務執行結束,執行兩個微任務process3
和then3
。
輸出10。
輸出12。
第三輪事件循環結束,第三輪輸出9,11,10,12
。
最終整段代碼,共進行了三次事件循環,完整的輸出爲1,7,6,8,2,4,3,5,9,11,10,12
。
(須要注意的是,node
環境下的事件監聽依賴libuv與前端環境不徹底相同,輸出順序可能會有偏差)
最後補充一點,謹記javascript
是一門單線程語言,而Event Loop
是javascript
的執行機制。
關於javascript
的語法和API
,這裏就不過多介紹了。附上幾個連接,能夠詳細的看一下:
HTML
,超文本標記語言,是一種標識性的語言。它是撐起頁面框架結構的重要部分。
HTML
部分的內容較爲基礎,前端的童鞋確定是很熟悉的。可是這裏仍是要附上連接: www.w3school.com.cn/html/html_j…
css
,層疊樣式表,用來修飾頁面。除了瞭解css
的基本用法以外,小編在這裏想記錄幾個面試常常被問到的有關樣式的硬核問題。
1.經常使用的幾種佈局方式
float:left;
和float:right;
設置佈局,注意清除浮動。@media
,詳情可參考:www.runoob.com/cssref/css3…BFC
BFC
是什麼
BFC(Block Formatting Context)
塊級格式化上下文,是用於佈局塊級盒子的一塊渲染區域。BFC是web頁面CSS視覺渲染的一部分,用於決定塊盒子的佈局及浮動相互影響範圍的一個區域。
BFC
的做用
BFC
是頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面元素,反之亦然。
咱們能夠用BFC來阻止元素被浮動元素覆蓋、阻止瀏覽器由於四捨五入形成的多列布局換行的狀況、阻止相鄰元素的margin合併等。同時,BFC還能夠包含浮動元素。
BFC
的約束規則
(1)內部的元素會在垂直方向上一個接着一個的放置。計算BFC
的高度時,須要注意浮動元素也參與計算;
(2)Box
垂直方向的距離由margin
決定。注意:屬於同一個BFC
的兩個相鄰的Box
的margin
會發生重疊;
(3)生成BFC
元素的子元素中,每個子元素的margin
與包含塊的左邊界border
相接觸(對於從左到右的格式化,不然相反),就算是在浮動中也同樣;
(4)BFC
的區域不會與float box
重疊。
(5)BFC
至關於頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面的元素。相反也同樣。
BFC
能夠解決哪些問題
margin
重疊問題、文本不環繞浮動元素問題、包裹浮動元素沒有高度問題(父元素塌陷問題)等。
BFC
觸發方式(一種便可)
(1)float
的值不爲none
;
(2)overflow
的值不爲visible
;
(3)display
的值爲table-cell
、tabble-caption
和inline-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
的樣式儘量的採起縮寫形式,例如給盒子margin
,padding
值等;content.left{...}
,content.right{...}
等,直接用.left{...}
,.right{...}
代替會更加快;5.CSS
預處理
css
預處理器是用一種專門的語言,進行網頁的樣式設計,以後在被編譯爲正常的css
文件,以供項目使用。使用css
預處理語言使得css
更加簡潔、方便修改、可讀性強、適應新強而且更易於代碼的維護。
(此處將會持續更新)
其實前端最主要用到的網絡協議主要有TCP
,UDP
,HTTP
,FTP
, IP
,ICMP
,IGMP
, ARP
,RARP
等協議。咱們能夠看看以下圖(摘自網頁,主要是爲了描述):
1.分層對應的協議
TCP/UDP
協議;HTTP
,FTP
協議;IP
,ICMP
,IGMP
協議;ARP
,RARP
協議;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+1
的seq
給服務端(確認序號爲收到序號 +1 ) ,服務端進入close
狀態,完成四次揮手。
3.有關創建連接是三次握手,關閉的時候是四次握手的問題。
由於當服務端收到客戶端的SYN
鏈接請求報文後,能夠直接發送SYN+ACK
報文。其中ACK
報文負責響應,SYN
報文負責同步。可是在關閉鏈接時,當服務端收到FIN
報文時,極可能並不會當即關閉socket
,此時只能先回復一個ACK
報文,來通知客戶端,"你發的FIN
報文我收到了"。只有等到服務端全部的報文都發送完了,才能發送FIN
報文,所以不能一塊兒發送。因此須要四步握手。
小編我對於這塊瞭解其實不是很深,可是我感受是,每種編程語言都有不同的設計模式。設計模式強調的偏向於一個設計問題的解決辦法,能夠理解爲是一套能夠被反覆使用,供多數人知曉的,通過分類編目的,代碼設計經驗的總結。(有不對的地方望大佬們指正)。
設計模式和框架以及架構仍是有所區別的:
以上的這幾部分,emmm好好看書,多動腦多動手,慢慢提升吧,
關於運行環境,單看標題可能下意識會有點丈二的和尚摸不着頭腦的感受。多是以爲範圍太大,亦或者是概念模糊,其實小編也是這樣。不太小編以前閱讀過一篇文章,裏邊簡略的介紹了運行環境,可分爲以下幾點:
加載資源的形式
有分爲輸入url
(或跳轉頁面)加載html
和加載html
中的靜態資源兩種。
加載一個資源的過程
首先瀏覽器根據DNS
服務器獲得域名的IP
地址,而後向這個IP
的機器發送http
請求,接着服務器收到、處理並返回http
請求,最後瀏覽器獲得返回內容。
瀏覽器渲染頁面的過程
首先是瀏覽器根據HTML
結構生成DOMTree
,而後根據CSS
生成CSSOM
(視圖模塊),接着將DOM
和CSSOM
整合造成RenderTree
(渲染樹),最後根據RenderTree
開始渲染和展現。注意,當遇到script
時,會執行並阻塞渲染。
輸入url
到獲得html
的過程
瀏覽器根據DNS
服務器獲得域名的IP
地址->向這個IP
的機器發送http
請求->服務器收到、處理並返http
請求->瀏覽器獲得返回內容。
window.onload
和DOMContentLoaded
區別
window.addEventListener('load',function( ){...})//頁面全部資源所有加載完才執行
document.addEventListener('DOMContentLoaded',function( ){...})//DOM渲染完便可執行,此時圖片視頻可能沒加載完
複製代碼
性能優化
CPU
計算,減小網絡請求;要實現以上兩種優化,能夠從兩方面入手:
cdn
、使用ssr
後端渲染,數據庫直接輸出到html
中;script
放置在最後(渲染機制,js會阻礙渲染,對加載頁面不友好)、使用圖片懶加載、減小DOM
查詢,對DOM
查詢作緩存、減小DOM
操做,多個操做盡可能合併在一塊兒執行、事件節流(不要頻繁觸發)、儘早執行操做。跨站腳本攻擊(Cross-site scripting
,簡稱XSS
)
是一種網站應用程序的安全漏洞攻擊,是代碼注入的一種。它容許惡意用戶將代碼注入到網頁上,其餘用戶在觀看網頁時就會受到影響。這類攻擊一般包含了HTML
以及用戶端腳本語言。
跨站請求僞造(Cross-site request forgery
,簡稱XSRF
)
是一種對網站的惡意利用。與XSS
不一樣,XSS
利用站點內的信任用戶,而CSRF
則經過假裝來自受信任用戶的請求來利用受信任的網站。CSRF
比XSS
更具危險性。
預防措施:有 Token驗證、Referer驗證、隱藏令牌 三種。
推薦有須要的童鞋到MDN上去了解。
附上連接: developer.mozilla.org/zh-CN/docs/…
前不久小編恰好看到知乎某位大佬寫的一片關於瀏覽器原理的文章,感受通俗易懂,分析的透徹,有想了解的童鞋也能夠去了解一下。
附上連接:zhuanlan.zhihu.com/p/47407398
Node
,簡單的說是運行在服務器的javascript
,它是一個基於Chrome
javascript
運行時創建的一個平臺,同時也是一個事件驅動I/O
服務端javascript
環境,基於Google
的V8
引擎,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/…
至於如何使用,官網上有詳細的講解。除此以外,在git
上clone
到本地的時候,須要將其初始化再運行,這點不要忘記啦。對於剛接觸前端的童鞋,再看到這部份內容,想要着手實驗的時候,得先熟悉node.js的使用,切記。
如下是小編好久以前本身着手搭建的一個簡易的框架,多少坑仍是本身親腳踩過,能力才能提升。文章詳細的步驟都已經寫上了,有疑問的地方歡迎留言(不足之處歡迎指出)。附上連接:juejin.im/post/5b6049…
nginx
的概念Nginx
是由俄羅斯的程序設計師lgor Sysoev
所開發一個高性能的HTTP
和反向代理服務器,也是一個IMAP/POP3/SMTP
代理服務器;Web
服務器/反向代理服務器以及電子郵件代理服務器,並在一個BSD-like
協議下發行;nginx
的併發能力確實在同類型的網頁服務器中表現較好;Apache\lighttpd
具備佔有內存少,穩定性高等優點,而且依靠併發能力強,豐富的模塊庫以及友好靈活的配置而聞名;Linux
操做系統下,nginx
使用epoll
事件模型,得益於此,nginx
在Linux
操做系統下效率至關高。同時Nginx
在OpenBSD
或FreeBSD
操做系統上採用相似於Epoll
的高效事件模型kqueue
;Nginx
既能夠在內部直接支持 Rails
和 PHP
程序對外進行服務,也能夠支持做爲 HTTP
代理服務對外進行服務。Nginx
採用C
進行編寫,不管是系統資源開銷仍是CPU
使用效率都比 Perlbal
要好不少;nginx
作反向代理。而且多臺服務器能夠平均分擔負載,不會由於某臺服務器負載高宕機而某臺服務器閒置的狀況。nginx
的應用場景http
服務器,Nginx
是一個http
服務能夠獨立提供http
服務。能夠作網頁靜態服務器。nginx
作反向代理。多臺服務器能夠平均分擔負載,不會由於某臺服務器負載高宕機而某臺服務器閒置的狀況。在編寫項目的過程當中,咱們在按規定的項目週期以內完成之餘,還須要考慮的是項目的加載速率以及性能優化。友好的頁面展現以及運行能給用戶留下不錯的印象,這是前端開發人員成功的一小步。
在前端開發過程當中,要想頁面展現的更安全更快,須要作到如下幾點:
http
請求;Expires
或者Cache-Control
;ajax
請求;CDN
;gzip
壓縮返回數據,最小化js
文件和css
文件,將css
和js
獨立成外部文件);cookie
(減少cookie
的體積,合理設置Cookie
域,設置合理的cookie
過時時間,使用域分離)css
放在頁面頂部加載,js
放在頁面底部加載)什麼是持續集成?持續集成是一種軟件開發實踐,是指團隊開發項目過程當中,集成各自所負責的項目部分到同一個地方。經過每一個成員天天至少集成一次,一天可能會集成屢次。每次集成都經過自動化的構建(包括編譯,發佈,自動化測試)來驗證,從而儘早地發現集成錯誤。
舉個最簡單的例子,項目git
提交以及構建。一個前端項目由兩個前端開發人員負責,每一個人負責一部分,項目在git
上有個master
分支(項目主分支)。開發人員拉取代碼到本地,需創建一個本地分支如(如dev
)。當開發人員開發過程當中,部份內容完成了須要提交,在拉取最新版本代碼,合併代碼無誤的狀況下,將本身本地創建的分支內容提交到git
,確保代碼無誤,併入到master
分支,最後構建項目。小編大概理解的是這樣。
持續集成能夠下降風險,減小重複。同時,不受時間地點的控制,隨時能夠生成部署的軟件,從而提升開發效率。
在前端開發中,版本控制也是重要的一環。
舉個例子,在開發人員拉取最近的代碼,而後合併提交了以後,發現了問題,這時候能夠回滾到上一版本。主分支同理,在發現問題或是需求突然變動到原始版本的時候能夠回退到原始任意版本。這在必定程度上爲開發過程當中的突發情況提供了便利。
再舉個例子:在開發過程當中,常常會變成一些內容,好比頁面樣式以及js
。在最開始的時候,定義了一個one.css
和one.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
,小編我也是趁着此次總結,去學習了一下阮一峯老師寫的文檔,收穫頗多。
附上連接:ts.xcatliu.com/
關於react
部分,小編用的也是這個,有js基礎的能夠去看看react
官網,熟悉一下react
的使用,代碼規範以及生命週期等。
附上連接:reactjs.org/
要是剛接觸前端的童鞋,能夠轉身先看看阮一峯老師寫的這本書,再結合react
官網學習。
vue小編其實不是很擅長,以前跑去它家的官網看了一遍文檔,當下感受還行,可是由於如今的項目通常用的是react
,其實如今已是雲裏霧裏,忘得差很少了,害。
附上連接: cn.vuejs.org/
有興趣的童鞋能夠去瞅瞅。
對於多端開發,小編的理解實際上是這樣的:
當一個項目明確了需求以後,在開發的過程當中極大程度生會多端共同配合開發。就好比一款產品,除了有後臺和web
端開發,還須要開發小程序以及APP
,這就須要多端共同配合。
傳統方式開發會花費更多的時間,寫更多的代碼,對於項目上線和發佈都會有必定時間限制,不能作到同時發佈,也須要對應着每一端,相應的開發寫對應的代碼。消耗更多的時間和資源的同時,開發速度和效果也沒有預期的高。不過在如今的開發框架中,已經出現了許多的多端開發框架,這種基本都是用於移動端的開發。對於如今開發的需求,是大大的提高了開發者的速度,和大大減小了項目多端分佈的開發短板。
如今大部分的項目,涉及到多端開發的機率很大,就好比小編最近剛結束提測的這個項目,就是web
端結合微信小程序的開發(在react
和微信小程序間來回摩擦,被迫切換自如誒)。可是在通常狀況下,一個前端不多會有一我的負責多端開發的狀況出現(也只是小編理解的通常狀況,不排除小公司一我的當多我的使)。一個項目中負責web
端的就只負責web
端,負責小程序的會另外分配人員。
可是做爲一名前端程序員(媛),對於多端開發得有一個概念性的理解。
鑑於小編目前用的是react
,在這裏就着重講解一下react
有關數據流的部分。
簡單來說,react
是自頂向下的單向數據流,經過setState
來改變state
的狀態。在管理數據流部分,react
常常配合redux
一塊兒使用,這樣能夠有效的避免組件臃腫的問題。同時,還能實現跨組件通訊、狀態同步以及狀態共享,處理異步數據流,讓組件變得可預知。
redux
是由flux
衍生出來的,是flux
的進化版。redux
有三大原則:惟一數據源,保持只讀狀態,數據狀態只能經過純函數完成。
redux
提供了store
,action
和reduce
三個API
:
store
(Redux
應用只有一個單一的 store
)state
;getState()
方法獲取 state
;dispatch(action)
方法更新 state
;subscribe(listener)
註冊監聽器;subscribe(listener)
返回的函數註銷監聽器action
store
的有效載荷。它是 store
數據的惟一來源,通常經過 store.dispatch()
將 action
傳到 store
。reduce
actions
併發送到 store
,store
收到action
後,須要給出一個新的狀態來更新頁面,這種state
的計算過程就叫作reducer
。數據流過程簡述: 簡單的說就是,在界面中用戶經過dispatch
,觸發action
;store
調用reducer
,而且傳入當前state
和action
,更新state
並返回新的state
;view
更新。
在這裏,主要列述一下小編目前用到的以及瞭解過的庫吧,畢竟組件庫啊框架之類的有不少,可是實用的確定是本身最常常用到並且用的比較順手的。
1.前端UI組件庫
以上是小編目前較爲常常用到的實用庫。
另外,附上最近看到的一個較爲全面的實用庫整理的連接:www.luoxiao123.cn/1196.html
關於前端開發測試,小編的理解是,在寫完代碼後檢查所實現的功能是否符合項目需求,界面樣式排版是否符合UI設計等。
有關前端測試,能夠分爲如下幾種類型:
E2E
測試關於這部分,瞭解一下就好,畢竟還有測試組不是小哥哥小姐姐的麼嘿嘿
做爲一名前端,瞭解一門相關的後端語言其實頗有必要,例如java/php/python
等。如今不少公司面試的時候都會要求至少掌握或瞭解一門後臺語言,技多不壓身,多學習瞭解提高自身技能是硬道理。
主要是,掌握了基本的後臺技能,在寫前端項目的時候,遇到問題,跟後端溝通起來相對來講也比較方便。
性能優化的目的主要仍是讓頁面加載的更快,對用戶操做響應更及時,爲用戶帶來更好的用戶體驗,對於開發者來講優化可以減小頁面請求數,可以節省資源。
關於性能優化,前面小編已經有所介紹,有忘記的童鞋能夠往上翻翻。
關於前端安全,其實主要常見的仍是XSS
(跨站腳本攻擊)和CSRF
(跨站請求僞造),這兩部分文章中已經作了較爲詳細的解釋。
在這裏有一點須要注意的是「點擊劫持」。
概念: 點擊劫持 指第三方網站經過iframe
內嵌某一個網站,而且將iframe
設置爲透明不可見,將其覆蓋在其餘通過假裝的DOM
上,假裝的可點擊DOM
(按鈕等)與實際內嵌網站的可點擊DOM
位置相同,當用戶點擊假裝的DOM
時,實際上點擊的是iframe
中內嵌的網頁的DOM
從而觸發請求操做。點擊劫持的最大特色是用戶本身觸發了點擊事件,可是絕不知情。
解決方案:
做爲一名前端工做者,小編(以組內大佬小哥爲模板)列舉一下與前端業務相關的事項:
UI
設計師給的設計圖實現佈局;PS
以及切圖軟件等相關工具(不能遇到一點樣式問題就去找設計人員,本身會的話改改更快,小編親鑑);目前小編以爲大概就這幾個,若是以爲有寫漏的,歡迎下方留言。
到這裏基本結束啦。整理的過程當中,因爲有些概念性的東西怕說不明白誤人子弟,就在網上搜了一些例子講解。
小編年少輕狂,以前口出狂言,立下flag說每隔兩個禮拜出一篇文章,害。不過每次整理知識點,小編都能收穫不少,但願也能幫助有須要的人。仍是內句老話,如有不足,請留言指出。若對您有所幫助,emmmmm