前端信息彙總

 

一、Sublime Text的插件

若是想讓Sublime Text錦上添花，這些插件值得嘗試。FTPSync,FTP同步工具；SASS Build,編寫CSS的預處理器；Package Control，插件管理；Emmet,高效編寫HTML和CSS；SublimeLinter，更新時選擇並安裝須要常用的Linter；SublimeEnhancements，邊欄菜單的擴充等；PackageResourceViewer,管理包；Git，在Sublime Text中運行Git命令等；Terminal,使用Sublime Text打開項目文件；CSSComb，給CSS屬性進行排序；CanIUse，檢查瀏覽器是否支持代碼中的CSS和HTML；Alignment,對齊代碼；Trmmer,自動刪除不不要的空格；ColorPicker,查看或設置顏色的值；MarkDown Editing，查看或編輯Markdown文件；FileDiffs，查看兩個不一樣文件的差別；DocBlockr，爲代碼創建文檔；Snippets，快速書寫代碼。

 

二、JSCity

把源碼可視化成建築物的JS庫。

 

三、Flex佈局

W3C提出的佈局方案，能夠實現各類響應式佈局。如今已經獲得全部瀏覽器的支持。

 

四、Chrome的皮膚插件

搜索"DevTools Theme"，下載，輸入chrome://flags,找到"Enable Developer Tools experments"，勾選複選框，重啓瀏覽器，打開開發者選項，點擊小齒輪，Experments項，勾選"Allow custom UI themes"。

 

五、Chrome插件：Performance-Analyser網頁性能分析插件

分析http請求，執行期的時間，佔比。

 

六、Chrome插件：FeHelper

json格式化、html格式化、二維碼的生成，等等。

 

七、Chrome插件：POSTMAN

模擬發送請求，簡化版的fiddler。

 

八、Chrome插件：Visual Event

捕獲網頁元素的各類事件，對於複雜的事件做用不大。

 

九、Chrome插件：WhatFont

查看網頁字體。不鼠標停留在字體上就會顯示該字體的名稱。

 

十、Chrome插件：Speed Tracer

性能分析器，比Profiles還強大。能夠跟蹤事件、查看CSS樣式、找到js中內存泄漏、檢測js語法，等等。

 

十一、前端工程師要作的事

● 根據項目特色選擇前端技術棧
● 把平面做品實現爲HTML/CSS/JavaScript
● 用PS進行圖片處理
● 熟悉JavaScirpt，以及框架、組件
● 熟悉前端開發流程：代碼檢查、精簡、模塊化CSS、LiveReload，調試
● 跨瀏覽器、跨設備的解決方法
● 更高效地操做DOM
● 將CSS寫得更加清晰
● 代碼更易於維護、單元測試
● 大型項目的模塊化和組件化
● HTTP協議
● Web容器/HTTP服務器如何工做
● 無狀態Web應用的工做原理
● 動態、靜態內容如何分離部署(反向代理配置)
● 安全機制如何配置
● 監控機制如何配置

 

十二、Angular JS

可讓你從jQuery各類選擇器和回調函數中解脫出來，雙向數據綁定和模型是惟一數據來源。不足的地方在於：嚴重依賴DOM，按DOM中的指令的優先順序將模版編譯，這樣讓調試和檢測執行順序變得困難；採用一種叫"髒檢查"的機制來跟蹤數據變化並同步用戶界面，任何Angular做用域內的操做都會觸發"髒檢查"，致使隨着綁定的增多應用性能會下降；Angular全部的操做都必須通過它的diget cycle遍歷監聽器，不然組件不能和數據模型同步，這致使了兼容性問題，若是須要使用第三方Js庫，須要使用Angular的$apply函數包裝它們，這至關於重構每個JS庫只爲可以和Angular合做。沒有很好地解決依賴注入；陡峭的學習曲線。

 

1三、React

React是最新的開源UI框架，是構建Javascript的新方式，由Facebook和Instagram領導。React能夠用來構建UI界面，好比做爲MVC中的View。React能夠用來編寫獨立的Web組件。React鼓勵數據單向流動，相信組件是被數據驅動的狀態機，討厭DOM並盡力避免開發者與DOM打交道。提供了儘量少的API實現一個UI組件。

使用React的好處是：速度很快，在JavaScript代碼邏輯和DOM間引進了一個虛擬DOM，其獲取渲染之間的diff，以後在DOM中只改變那些須要改變的；很好的兼容性，提供了一套支持IE8以上的API；模塊化，UI組件，每個模塊能夠被單獨開發、測試，而且能調用其它組件；單向數據流動，FLux是在Javascript應用中創造單向數據層架構；使用純的Javascript;單頁JS Web應用；與其餘庫兼容良好......

 

1四、如何減小HTTP請求次數

● 合併文件:將多個樣式文件和腳本文件合併成一個文件。
● CSS Sprites:將多個圖片拼成一副圖片，而後經過CSS控制。
● Base64編碼：經過編碼的字符串將圖片內嵌到網頁文本中。

 

1五、減小DOM元素數量

經過document.getElementByTagName('*').length

 

1六、Gzip壓縮傳輸文件

Gzip一般能夠減小70%網頁內容的大小，包括腳本、樣式表、圖片等文件，主流服務器都有相應的壓縮支持模塊。

 

1七、避免圖片空的src

圖片空的src仍然會使瀏覽器發送請求到服務器。

 

1八、Cookie優化

Cookie被用來作認證或個性化設置，其信息包含在http報文中。能夠在如下幾個方面優化：

● 去除不必的cookie
● cookie的大小減到最小
● 設置合適的domain級別
● 設置合適的過時時間

 

1九、CSS優化

● 將樣式表置頂，css放在網頁的HEAD中讓網頁顯得加載速度更快。
● 避免css表達式
● 使用外部的css文件
● 壓縮css文件
    ○ CSSTidy
    ○ Minify
    ○ YUICompressor(編譯集成，包含在Nuget中)
    ○ AjaxMin
    ○ CSSCompressor

20、優化Javascript

● 把腳本置底
● 使用defer，指定腳本在文檔加載後執行
● 使用HTML5中的async關鍵字，讓腳本異步執行
● 使用外部的Javascript文件
● 壓縮js文件
    ○ Packer
    ○ JSMin
    ○ Closure compiler
    ○ YUICompressor(編譯集成，包含在Nuget中)
    ○ AjaxMin

 

2一、js閉包

有權訪問另外一個函數做用域變量的函數。

function outerFunction(name){

    return innerFunction(arg1, arg2){

        var item1 = arg1[name];

        var item2 = arg2[name];

        if(item1<item2){

            return -1;

        }

        if(item>item2){

            return 1;

        }

        if(item1==item2){

            return 0;

        }

    };

}    

var out = outerFunction("name");

var result = out({name:"d",age:18},{name:"e",age:19});

以上，outerFunction函數中的匿名函數有權訪問name變量，這個匿名函數就是一個閉包，之因此有權訪問name變量，是由於匿名函數有一個scope屬性，outerFunction函數也有一個scope屬性，另外全局還有一個scope屬性，匿名函數的scope屬性指向outerFunction函數的scope屬性，outerFunction函數的scope屬性指向全局的scope屬性，scope之間造成了鏈表。

 

2二、js原型

function Person(){

    this.Name = "hello";

}

var p = new Person();

→實例有一個_proto_屬性
→var p = new Person()至關於p._proto_=Person.prototype
→每一個對象，好比這裏的Person都有一個prototype屬性，prototype屬性又有一個_proto_屬性
→隱式地還包含這樣的關係：Person.prototype._proto_ = New Object();

 

2三、Grunt工具

自動完成一些反覆重複的任務，好比壓縮、編譯、單元測試等。Grunt.js依賴於node.js的npm來管理和安裝，首先安裝node.js。好比：grunt-contrib-imagemin用來壓縮圖片，grunt-contrib-uglify用來壓縮JavaScript文件，grunt-contrib-cssmin用來壓縮CSS文件，grunt-contrib-htmlmin用來壓縮html代碼。

 

2四、Spartan瀏覽器

微軟放棄IE，從新推出的Spartan瀏覽器。

 

2五、JavaScript的Console

一般用console.log()和console.error()方法，起始有關Console的API還很多，好比console.group(),console.time()，等等。

 

2六、在瀏覽器中輸入地址而且按下回車鍵後發生了什麼？

→輸入地址，按下回車鍵
→和回車鍵有關的電流回路閉合
→電流進入鍵盤的邏輯電路系統
→邏輯電路系統獲取到回車鍵的碼值是13
→鍵盤控制器將碼值編碼傳輸
→瀏覽器獲取輸入的地址信息
→瀏覽器把接收到的協議和自帶的協議比較，選擇使用HTTP或HTTPS協議進行傳輸
→瀏覽器檢查域名是否在緩存中，若是緩存中沒有當前域名就調用gethosbynme庫函數
→檢查域名是否在本地的Hosts裏
→向DNS服務器發送一條DNS查詢請求
→對DNS服務器進行ARP查詢
→查看路由表，看看目標IP地址是否在路由表中
→查詢網絡接口的MAC地址，再次發送一個2層的ARP請求

若是主機和路由器直接相連，路由器返回一個ARP Reply。

若是主機連接到一個集線器，集線器會把ARP請求向全部端口廣播，返回ARP Reply。

若是主機鏈接交換機，交換機檢查本地CAM/MAC表，看看哪一個端口有咱們要找的MAC地址，返回ARP Reply。

→主機收到ARP Reply
→使用53端口向DNS服務器發送UDP請求，若是響應包太大，會使用TCP請求
→瀏覽器獲得目標服務器的IP地址和端口號
→瀏覽器調用系統的socket函數，請求一個TCP流套接字
→流進入傳輸層。請求封裝城TCP segment，目標端口被加入頭部，源端口從系統獲取
→TCP segment被送到網絡層
→在網絡層，目標IP以及本機IP加入頭部，封裝城TCP packet
→TCP packet進入鏈路層
→鏈路層在封包中加入frame頭部，裏面包含內置網卡的MAC地址以及網關(本地路由)的MAC地址，至此TCP封包已經組裝完畢，準備發送。
→傳輸TCP封包

對於大部分家庭和小型企業來講，封包從本地計算機觸發，通過本地網絡，再經過調制解調器把數字信號轉換成模擬信號，進行傳輸。到達目的地，經過調制解調器，把模擬信號轉換成數字信號。

對於使用光纖的，信號一直是數字的，封包直接傳送到目的地。

 

2七、發送TCP封包的具體過程

→客戶端選擇一個初始序列號(ISN)，將設置了SYN位的封包發送給服務端
→服務端接收到SYN包
→服務端選擇初始序列號(ISN)
→服務端設置SYN位，代表本身選擇了一個初始序列號(ISN)
→服務端把客戶端的ISN加1複製到ACK域，而且設置ACK位，代表本身接收到了客戶端的一個封包
→客戶端發送下一個封包
→客戶端把本身的序列號加1
→客戶端讓本身的ACK加1
→客戶端設置本身的ACK位
→客戶端發送N個Bytes，將本身的SEQ序列號也增長N
→服務端接收到N個Bytes
→服務端發送一個ACK包，將ACK的值設置爲接收到的數據包的最後一個序列號
→客戶端關閉，發出一個FIN包
→服務端確認這個FIN包，而且發送本身的FIN包
→客戶端使用ACK包確認接收到了FIN包

 

2八、TLS握手

→客戶端發送hello信息到服務端，消息中包含了TLS版本，可用的加密和壓縮算法
→服務端想客戶端發送一個hello信息，消息中包含了TLS版本，可用的加密和壓縮算法、服務器的公開證書(包含公匙，客戶端使用公匙加密接下來的握手過程)
→客戶端根據本身的信任CA列表，驗證服務端的證書是否有效
→若是服務端的證書有效，客戶端生成一串僞隨機數(會被用於生成新的對稱密匙)，使用服務器的公匙加密它
→服務端使用私匙解密來自客戶端的隨機數
→服務端使用上面的隨機數生成本身的對稱主密匙
→客戶端發送一個Finished信息給服務端
→客戶端使用對稱密匙加密此次通信的一個散列值
→服務端生成本身的hash值，而後解密客戶端發來的信息，檢測這2個值是否對應，若是對應，向客戶端發送一個Finished信息，也使用協商好的對稱密匙加密
→接下來整個TLS繪畫都使用這個對稱密匙進行加密

 

2九、JSON用法

 

｛「name」:"darren","sex":"male"｝
key是帶引號的。
值能夠是數字，字符串(放在引號中)，邏輯值，數組(方括號中)，對象(花括號中),null。沒有js的undefined, nan值。

 

● 使用eval將json字符串轉換成js對象

 

var jsonStr = '{"name":"darren","sex":"male"}';
var obj = eval('('+jsonStr+')');
console.log(obj.name);

 

● 使用JSON.parse將json字符串轉換成js對象

 

var jsonStr = '{"name":"darren","sex":"male"}';
var obj = JSON.parse(jsonStr);
console.log(obj.name);

 

JSON.parse還有一個重載方法，第二個參數是一個函數。

 

var jsonStr = '{"name":"darren","sex":"male"}';
var obj = JSON.parse(jsonStr, function(key,value){
     if(key === 'name'){
          return "myname is " + value;
     }
     return value;
});

 

● 使用JSON.stringfy將js對象轉換成json字符串

 

var obj = {name:'darren',sex:'male'};
var jsonStr = JSON.stringfy(obj);
console.log(jsonStr);

 

JSON.stringfy也有其它重載。

 

 

 

30、js中的this

 

this的引用取決於函數在哪裏被調用。

• 當函數在全局被調用，this指window

function fn() {
  console.log( this.a );
}
var a = 2;
fn(); // 2 -- fn單獨調用，this引用window

• 隱式綁定:某個對象調用函數，函數中的this指向該對象

function fn() {
  console.log( this.a );
}
var obj = {
  a: 2,
  fn: fn
};
obj.fn(); // 2 -- this引用obj。

• 隱式綁定:某個對象調用函數，函數中的this指向該對象，但，若是對象函數賦值給一個全局變量，再調用全局變量函數，此時的函數中this指向window

function fn() {
  console.log( this.a );
}
var obj = {
  a: 2,
  fn: fn
};
var bar = obj.fn; // 函數引用傳遞
var a = "全局"; // 定義全局變量
bar(); // "全局"

• this指向call的第一個實參

unction fn() {
  console.log( this.a );
}
var obj = {
  a: 2
};
fn.call( obj ); // 2

 

若是第一個實參爲null，this指向window

 

function fn() {
   console.log( this.a );
}
var obj = {
   a: 2
};
var a = 10;
fn.call( null); // 10

• this指向經過new關鍵字建立的對象實例

function fn(a) {
  this.a = a;
}
var bar = new fn( 2 );
console.log( bar.a );// 2

 

 

 

3一、靜態網站瀏覽端輸入一個url

 

→瀏覽器輸入一個url

→web服務器接收到一個請求，使用http協議返回給瀏覽器

→瀏覽器解析http協議頁面呈現

→頁面中包含了一些額外資源，好比圖片、css、js......這些資源會單獨使用http協議把信息返回給當前頁面

 

 

 

3二、靜態網頁的緩存

 

對於不變的資源使用緩存技術，讓瀏覽器第一次訪問這些靜態資源後緩存，第二次訪問瀏覽器就再也不須要重複請求了。

 

 

 

3三、CDN

當用戶請求網站時，根據一個路由算法將請求落地在離用戶最近的節點上。

 

 

 

3四、http請求，tcp請求

每一個http請求其實都是一個tcp請求，這些請求在創建鏈接和釋放鏈接時都會消耗不少資源。

 

 

3五、如何讓動態頁不被緩存

使用meta標籤

 

 

3六、動態網頁動靜分離

讓靜態的部分看成不變的靜態資源處理，讓動態的內容做動態處理，在合適的地方將動靜內容合併。

 

 

3七、動靜分離的位置

在服務端，把靜態資源交給靜態的web服務器來處理；在瀏覽器端，javascript模版。

 

 

3八、Web應用上線以前要考慮的方面

● 可以在主流瀏覽器上瀏覽

● 可以在手機端正常瀏覽

● 版本控制

● 不要想用戶直接顯示不友好的錯誤信息

● 用戶連接添加屬性rel="nofollow"來避免垃圾郵件

● post提交成功後重定向，以防止再次提交引發刷新

● 別讓用戶思考如何操做

● 防止sql注入

● 別相信用戶的輸入和請求

● 使用sal散列密碼，避免使用md5和sha加密

● 銘感數據使用SSL/HTTPS

● 放置會話(session)劫持

● 避免跨腳本攻擊XSS

● 避免跨站請求僞造攻擊(CSRF)

● 避免點擊劫持

● 必要的地方使用緩存

● 不要使用20kb大小的圖片做爲重複背景

● 雅座內容gzip/deflate

● 合併樣式表和腳本文件，以減小瀏覽器的發送請求次數

● 優化圖片

● HTTP請求次數最小化

● 確保有一個favicon.ico文件在網站的根目錄下

● 使用對搜索引擎友好的連接

● 擁有一個xml網站地圖，默認路徑是sitemap.xml