總結前端部分知識點

 

3.Rem

Rem是一個相對單位，與em的差異在於，rem是相對於根節點html的font-size,而em是相對於父元素的font-size。使用rem實際是用媒體查詢來修改根節點html的字體大小，那麼使用rem的元素大小也會發生相應的改變，因此只要寫一份css的媒體查詢就能夠適配全部屏幕了，可是在有一些瀏覽器下不夠精準，能夠經過JS根據屏幕寬度來動態計算根節點的font-size，通常此JS放在head部分。

媒體查詢計算:
總結公式:設計稿任意尺寸PX*（設備屏幕寬度/設計稿尺寸的寬度）/ font-size。

使用JS計算:
獲取當前窗口的寬度，大於750按750計算，
font-size=設備寬度/設計圖寬度的百分之一 ，儘可能控制1rem=100px，這樣便於測量和計算

注意問題：

1.不是全部的瀏覽器默認字體大小都是16px，因此根元素的字體大小設置爲62.5%不許確。

2.每一個瀏覽器對最小font-size的支持，不盡相同。js動態計算的font-size值過小時，會致使超小屏上UI顯示效果比預想中的偏大。

rem的優勢:
1.實現強大的屏幕適配佈局，
咱們如今切頁面佈局的經常使用單位是px，這是一個絕對單位，可是不是全部的手機屏幕寬度都是設計圖的大小，若是使用流式佈局、限死寬度來作，都有一些弊端，好比說流式佈局的寬度是採用百分比，可是高度不變，在大屏瀏覽器下顯得極不協調。
2.沒有屏幕字體縮放的問題，
若是說750px設計圖的字體大小是36px，那麼若是在375px的手機上就會顯得很是突兀，而rem的就是經過不一樣的屏幕寬度改變根元素font-size的大小來實現的。
3.沒有em屢次使用計算麻煩的問題
Em是相對於父元素的大小，當層次較多時，容易遇到沒法預知的風險，並且麻煩，而rem是統一相對元素，沒有這種弊端。

4.Flex佈局的理解

傳統的佈局方案是基於盒狀模型的，依賴於display+ position+ float屬性，可是這些屬性有時候對於特殊佈局，好比說垂直居中的實現不是很方便，而flex佈局能夠簡便、完整、響應式的實現各類頁面佈局，比盒狀模型提供更大的靈活性。
任何一個容器均可以使用flex佈局，webkit內核的瀏覽器必須加上-webkit前綴，設置容器爲flex佈局之後，float、clear、vertical-align屬性將失效。容器默認存在兩根軸，水平的主軸和垂直的交叉軸，裏面的每個元素被稱爲項目。
容器的屬性:
flex-direction:決定項目的排列方向（4）
flex-wrap:項目在一條軸線上排不下，如何換行（3）
flex-flow:是flex-direction和flew-wrap的簡寫形式，默認爲row nowrap
justify-content:項目在水平主軸上的排列方式，左對齊，右對齊，居中，兩端對齊，每一個項目元素兩側的間隔相等
align-items:項目在交叉軸上如何對齊，項目第一行文字的基線對齊，stretch若是項目未設置高度或auto，則佔滿整個容器的高度
align-content:項目有多根軸線的對齊方式
項目的屬性:
order:定義項目的排列順序，數值越小，排列越靠前
flex-grow:放大比例，若是全部項目都爲1，則等分，有一個項目爲2，則佔據的空間是其餘項目的兩倍。
flex-shrink:縮小比例，當空間不足時，全部項目等比例縮小，若是其餘項目都爲1，只有一個項目的屬性值爲0，則空間不足時，不縮小，負值無效。
flex-base:在分配多餘空間以前，項目佔據的主軸空間，
flex: flex-grow, flew-shrink, flex-basis的簡寫，默認值爲0 1 auto。
align-self:容許單個項目與其餘項目不同的對齊方式
主要思想:給予容器控制內部元素高度和寬度的能力。

5.flex應用實例：

1.flex製做導航欄
傳統的方式，用float或者display-inblock實現，可是這兩種方法都會存在問題，浮動會影響父級元素都樣式，須要清除浮動，盒狀模型有時候會遇到間隙問題，須要把font-size的值設置爲0，若是設置好了css屬性以後增長多餘的導航還須要修改css代碼可是flex恨方便，而且是彈性佈局，在外層容器上設置display=flex屬性，在內置元素上設置flex=1；這樣全部的單個導航都始終等分導航欄區域。

2.實現寬度固定高度不定的垂直居中對齊
三種方法，外層display=table，內層設置display=table-cell和vertical-align=middle
margin-top=50%和transform: translateY(-50%)實現
外層設置display=flex，align-items: center;
3.左右彈性佈局，
左右沿主軸圖文對齊外層：display: flex; justify-content: space-around; 內層左邊width=100px;右邊width=200px
固定百分比佈局：外層：display：flex，內層：左邊flex=1；右邊flex=1；中間flex=2;輸入框佈局
左邊定寬，右邊爲剩餘所有寬度：外層：display：flex，內層左邊flex=200px；右邊flex：1

3.底部footer固定在底部，可是不是fixed定位
html和body的height高度爲100%，body設置display=flex，flex-dircetion=column； main的flex=1；footer設置定高

4.實現流式佈局
外層：display: flex;flex-wrap: wrap;align-content: flex-start;
內層：flex：0 0 33.33%；box-sizing:border-box

6.Ie8兼容問題

1.box-shadow，border-radius: 在屬性前面加上-webkit前綴，設置behavior屬性，並在項目中引入pie. htc文件。

2.不支持nth-child，可是支持first-child，

3.對background的各個屬性兼容性不良好
使用ie獨有的filter濾鏡顯示背景圖片，

4.不支持header、nav標籤

7.seo優化：（搜索引擎）

　　定義：SEO（Search Engine Optimization）搜索引擎優化，是爲了增長頁面在搜索引擎天然搜索結果中的收錄數量以及提高排序位置而作的優化行爲。

　　原理：在搜索引擎網站上，好比百度，在其後臺有一個很是龐大的數據庫，裏面存儲了海量的關鍵詞，而每一個關鍵詞又對應着不少網址，這些網址是百度程序從互聯網上一點一點下載收集而來的，這些程序稱之爲「搜索引擎蜘蛛」或「網絡爬蟲」。這些的「蜘蛛」天天在互聯網上爬行，從一個連接到另外一個連接，下載其中的內容，進行分析提煉，找到其中的關鍵詞，若是「蜘蛛」認爲關鍵詞在數據庫中沒有而對用戶是有用的便存入數據庫。反之，若是「蜘蛛」認爲是垃圾信息或重複信息，就捨棄不要，繼續爬行，尋找最新的、有用的信息保存起來提供用戶搜索。當用戶搜索時，就能檢索出與關鍵字相關的網址顯示給訪客。一個關鍵詞對用多個網址，所以就出現了排序的問題，相應的當與關鍵詞最吻合的網址就會排在前面了。在「蜘蛛」抓取網頁內容，提煉關鍵詞的這個過程當中，就存在一個問題：「蜘蛛」可否看懂。若是網站內容是flash和js，那麼它是看不懂的，會犯迷糊，即便關鍵字再貼切也沒用。相應的，若是網站內容是它的語言，那麼它便能看懂，它的語言即SEO。

　　方法：

1.重視網頁三要素TDK的寫做
title：網頁標題直接影響關鍵字的排名狀況，describe：網頁描述，keywords網頁關鍵字，
2.簡化代碼結構，有利於搜索引擎抓取有用的內容。
頁面儘可能採用DIV+CSS形式；全部js、css採用外聯方式，css放在網頁的上面，js最好放在頁面下面，加快頁面加載速度，圖片採用css精靈拼成一張圖進行定位只用，減小請求次數。
三、每一個頁面只能出現一次H1標籤，H2標籤能夠屢次
H1權重很高，普通認爲僅次於title，通常資訊詳情、商品詳情頁的標題，都放在H1裏
四、圖片必定要添加Alt屬性，title屬性可選
seo不認識圖片上的內容，只能經過alt屬性來判斷
五、重要的內容優先加載
六、圖片大小聲明，圖片必定要定義寬高大小，若是圖片大小不作定義的話，頁面須要從新渲染，就會影響到速度。
七、連接可根據實際需求添加title屬性，不要在div標籤上加href屬性。
當連接文字過長被省略號截斷的話，用title屬性，用戶能夠在鼠標滑到連接上面的時候顯示全連接文字。非特殊性連接，連接地址必定要寫入href屬性，不能爲了省事，直接用div加個click事件當連接，在視覺上和使用上確實實現了連接效果，可是對於SEO優化很是很差，蜘蛛目前對於js支持不好，基本沒法讀取裏面的連接地址。
八、 頁面內容儘可能不要作成flash、圖片、視頻
這些東西蜘蛛是抓不到的，就算是必須的，也要生成響應的靜態頁面。不少網站看着很炫，全站flash，看着是很爽，作SEO優化的就要抓狂了，全站沒有一個鏈接。
九、 除首頁外別的頁面最好要加上面包屑導航，導航結構必定要清晰
每一個麪包屑導航要能一次連接返回上個導航，這樣蜘蛛會把整個網站串起來。
十、作好404頁面
通常會加首頁連接及錯誤提示，並測試其返回狀態碼404:（1）、用戶體驗友好，能夠留住用戶，不至於直接關頁面；（2）、蜘蛛友好，能夠返回抓取其餘頁面。
十一、網站結構呈扁平狀樹型，目錄結構不宜過深
每一個頁面離首頁最多點擊不超過3次，過深不利於搜索引擎的抓取。

8.前端優化

　　定義：

　　從用戶訪問資源到資源完整的展示在用戶面前的過程當中，經過技術手段和優化策略，縮短每一個步驟的處理時間從而提高整個資源的訪問和呈現速度。

　　目的：

　　1. 從用戶角度而言，優化可以讓頁面加載得更快、對用戶的操做響應得更及時，可以給用戶提供更爲友好的體驗。
　　2. 從服務商角度而言，優化可以減小頁面請求數、或者減少請求所佔帶寬，可以節省可觀的資源。
　　總之，恰當的優化不只可以改善站點的用戶體驗而且可以節省至關的資源利用。

　　優化的途徑：

　　前端優化的途徑主要有如下5個方面：

　　1. HTTP請求數量，具體的優化手段有合併腳本文件和樣式表，使用CSS精靈合併圖標，拆分初始化負載（將頁面加載時須要的一堆JavaScript文件分紅兩部分，頁面初始化時，只加載必須的，其他的等會加載。），劃分主域（將資源分配到多個域上，經過並行下載數來提升頁面數量），使用字體圖標等

　　2.請求帶寬：精簡javascript腳本，移除重複腳本或者css樣式，圖片優化，壓縮javascript和css等一些資源

　　3.緩存利用：將改動比較小的靜態資源放到CDN上進行加速，使用外聯的javascript和css，添加Expires頭，減小DNS的查找

　　4.頁面結構：將樣式表放在頂部，將腳本放在底部，儘早的刷新文檔的輸出

　　5.代碼校驗：避免CSS表達式（使用動態設置 CSS 屬性的方式），避免重定向。

8.jQuery

jQuery 是一個高效、精簡而且功能豐富的 JavaScript 工具庫，它提供的 API 易於使用且兼容衆多瀏覽器，這讓諸如 HTML 文檔遍歷和操做、事件處理、動畫和 Ajax 操做更加簡單。

一、你以爲 jquery 有哪些好處？
jQuery 是輕量級的 javascript 框架。
強大的選擇器，$()
出色的 DOM 操做的封裝,好比說：html（）方法讀取或者設置元素的innerHtml，attr（）方法讀取或者設置元素的屬性
可靠的事件處理機制:好比說ready事件，jQuery中的ready事件,它的做用有些相似於window中的onload事件,只不過兩者的區別在於,onload事件是要等到網頁中的dom節點加載完成,而且css進行樣式渲染後,JavaScript中進行了預加載後再執行,而ready事件呢,是在網頁中的標籤被解析爲DOM節點是就執行其中的函數,直白點說,ready執行的比onload早。
完善的 ajax 封裝:
load( url, [data], [callback] ) ：載入遠程 HTML 文件代碼並插入至 DOM 中
jQuery.get( url, [data], [callback] )：使用GET方式來進行異步請求
jQuery.post( url, [data], [callback], [type] ) ：使用POST方式來進行異步請求
jQuery.getScript( url, [callback] ) : 經過 GET 方式請求載入並執行一個 JavaScript 文件。
jQuery.ajax( options ) : 經過 HTTP 請求加載遠程數據
出色的瀏覽器的兼容性
支持鏈式操做，隱式迭代,$(‘div.popup’).removeClass(‘hidden’).addClass(‘up’)
支持豐富的插件，時間插件、日期插件、表單驗證插件、富文本編輯器和其餘的自定義滾動插件等。
jquery 的文檔也很是的豐富

2. jquery 對象和 dom 對象如何轉換？
1. jquery 轉 DOM 對象:
jQuery 對象是一個數組對象，能夠經過[index]的豐富獲得 DOM 對象還能夠
經過 get[index]去獲得相應的 DOM 對象。
2. DOM 對象轉 jQuery 對象:
$(DOM 對象)
3 $(document).ready()方法和 window.onload 區別？
答: 兩個方法有類似的功能，可是在實行時機方面是有區別的。
1 window.onload 方法是在網頁中全部的元素(包括元素的全部關聯文件)徹底加載到瀏覽器後才執行的。
2 $(document).ready() 方法能夠在 DOM 載入就緒時就對其進行操縱，並調用執行綁定的函數。

 9.Bootstrap 

Bootstrap 是一個基於 HTML、CSS、JAVASCRIPT的用於快速開發 Web 應用程序和網站的前端框架。

優勢：
移動設備優先
瀏覽器兼容性較好
容易上手
響應式設計，可以自適應於臺式機。平板電腦和手機。
爲開發人員提供簡介統一的方案
開源，
提升開發效率

缺點：css框架對於一個小項目來講有點臃腫，
若是有本身特殊的需求，就須要從新定製樣式
會有兼容問題，雖然網上存在不少兼容IE的辦法，但須要引入其餘文件，有些還不小，勢必致使加載速度變慢，影響用戶體驗。

10.跨域請求

　　跨域是指一個域下的文檔或腳本試圖去請求另外一個域下的資源。

當協議、域名、端口號中任意一個不相同時，都算做不一樣域。不一樣域之間相互請求資源，就算做「跨域」。

解決方法：
1.代理：經過後臺獲取其餘域名下的內容，而後再把得到的內容返回到前端，這樣由於在同一個域名下，就不會出現跨域問題。

2.跨域資源共享（CORS）

普通跨域請求：只服務端設置Access-Control-Allow-Origin便可，前端無須設置。

3.用jsonp解決主流瀏覽器get請求的跨域數據訪問的問題。
一般爲了減輕web服務器的負載，咱們把js、css，img等靜態資源分離到另外一臺獨立域名的服務器上，在html頁面中再經過相應的標籤從不一樣域名下加載靜態資源，而被瀏覽器容許，基於此原理，咱們能夠經過動態建立script，再請求一個帶參網址實現跨域通訊，指定返回一個callback函數。

4.document.domain + iframe跨域

　　此方案僅限主域相同，子域不一樣的跨域應用場景。

　　實現原理：兩個頁面都經過js強制設置document.domain爲基礎主域，就實現了同域。

　　五、 location.hash + iframe跨域

　　實現原理： a欲與b跨域相互通訊，經過中間頁c來實現。 三個頁面，不一樣域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通訊。

　　具體實現：A域：a.html -> B域：b.html -> A域：c.html，a與b不一樣域只能經過hash值單向通訊，b與c也不一樣域也只能單向通訊，但c與a同域，因此c可經過parent.parent訪問a頁面全部對象。

　　6.window.name + iframe跨域

　　window.name屬性的獨特之處：name值在不一樣的頁面（甚至不一樣域名）加載後依舊存在，而且能夠支持很是長的 name 值（2MB）。

http://www.javashuo.com/article/p-gjnaksry-em.html

11.zepto

　　zepto是jQuery的輕量級替代品，由於它的API和jQuery類似，而文件更小。

　　zepto和jquery的區別：

　　1.jQuery 操做 ul 元素時，添加 id 不會生效。Zepto 操做 ul 元素時，添加 id 會生效。

　　2.事件觸發的區別：使用 jQuery 時 load 事件的處理函數不會執行。使用 Zepto 時 load 事件的處理函數會執行。

　　3.事件委託的區別：點擊class=a是彈出a事件，並將a事件的class改成b，點擊b事件就是彈出b事件，

　　在 Zepto 中，當 a 被點擊後，依次彈出了內容爲」a事件「和」b事件「的彈出框。說明雖然事件委託在.a上但是卻也觸發了.b上的委託。可是在 jQuery 中只會觸發 .a 上面的委託。

　　緣由：在 Zepto 中代碼解析的時候，document上全部的click委託事件都依次放入到一個隊列中，點擊的時候先看當前元素是否是.a，符合則執行，而後查看是否是.b，符合則執行。在 jQuery 中代碼解析的時候，document上委託了2個click事件，點擊後經過選擇符進行匹配，執行相應元素的委託事件。　　

　　4.width() 和 height() 的區別 Zepto 由盒模型(box-sizing)決定； jQuery 會忽略盒模型，始終返回內容區域的寬/高(不包含padding、border)。Zepto 沒法獲取隱藏元素寬高，jQuery 能夠。

12.VUE

　　Vue.js 是一個JavaScriptMVVM庫，是一套構建用戶界面的漸進式框架。它是以數據驅動和組件化的思想構建的，採用自底向上增量開發的設計。

　　特色：

1 輕量級框架，沒有任何依賴。

2 API設計很清晰，簡單易學。

3 Vue的兩個核心點就是響應數據綁定和組合的視圖組件。指令只封裝 DOM 操做，而組件表明一個自給自足的獨立單元 優雅的組件化設計，組件間溝通簡單方便。

4 生命週期明確。

5 PC端和移動端均十分適用。

6 Vue社區也迅速壯大，太多的第三方組件，方便完善你的項目。

vue引入第三方插件的步驟：

1.安裝插件依賴

　　2.修改webpack的配置文件 文件目錄及名稱：build/webpack.base.conf.js

　　3.在組件中import插件資源並使用

　　vue雙向綁定數據的原理

首先要對數據進行劫持監聽，因此咱們須要設置一個監聽器Observer，用來監聽全部屬性。若是屬性發上變化了，就須要告訴訂閱者Watcher看是否須要更新。由於訂閱者是有不少個，因此咱們須要有一個消息訂閱器Dep來專門收集這些訂閱者，而後在監聽器Observer和訂閱者Watcher之間進行統一管理的。接着，咱們還須要有一個指令解析器Compile，對每一個節點元素進行掃描和解析，將相關指令對應初始化成一個訂閱者Watcher，並替換模板數據或者綁定相應的函數，此時當訂閱者Watcher接收到相應屬性的變化，就會執行對應的更新函數，從而更新視圖。所以接下去咱們執行如下3個步驟，實現數據的雙向綁定：

1.實現一個監聽器Observer，用來劫持並監聽全部屬性，若是有變更的，就通知訂閱者。

2.實現一個訂閱者Watcher，能夠收到屬性的變化通知並執行相應的函數，從而更新視圖。

3.實現一個解析器Compile，能夠掃描和解析每一個節點的相關指令，並根據初始化模板數據以及初始化相應的訂閱器

使用vue的過程

　　定義View

　　定義Model

　　建立一個Vue實例或"ViewModel"，它用於鏈接View和Model

　　Vue.js的經常使用指令

• v-if指令

• v-show指令

• v-else指令

• v-for指令

• v-bind指令

• v-on指令

　　webpack+vue+vueRouter模塊化構建完整項目實例超詳細步驟

1. 確認已經安裝node環境和npm包管理工具而後新建項目文件名爲vuedemo

2.npm init -y 初始化項目

3.安裝vue項目依賴，（*拓展：npm install 在安裝 npm 包時，有兩種命令參數能夠把它們的信息寫入 package.json 文件，一個是npm install --save另外一個是 npm install --save-dev，他們表面上的區別是--save 會把依賴包名稱添加到 package.json 文件 dependencies 鍵下，--save-dev 則添加到 package.json 文件 devDependencies 鍵下，
--save-dev 是你開發時候依賴的東西，--save 是你發佈以後還依賴的東西。*）

4.安裝webpack，webpack-dev-server

5.npm install --save-dev babel-core babel-loader babel-preset-es2015 安裝babel，babel的做用是將es6的語法編譯成瀏覽器認識的語法es5

6.npm install --save-dev vue-loader vue-template-compiler 安裝vue-loader，用來解析vue的組件，.vue後綴的文件

7.npm install --save-dev css-loader style-loader 用來解析css

　　8.npm install --save-dev url-loader file-loader 用於打包文件和圖片

　　9.npm install --save-dev sass-loader node-sass 用於編譯sass

　　10.npm install --save-dev vue-router 安裝路由

 　　 https://segmentfault.com/a/1190000008602934

13.Ajax

使用ajax的緣由

1.傳統的Web網站，提交表單，須要從新加載整個頁面。

2.若是服務器長時間未能返回Response，則客戶端將會無響應，用戶體驗不好。

3.服務端返回Response後，瀏覽器須要加載整個頁面，對瀏覽器的負擔也是很大的。

4.瀏覽器提交表單後，發送的數據量大，形成網絡的性能問題。

ajax定義：

1.AJAX = 異步 JavaScript 和 XML。

2.AJAX 是一種用於建立快速動態網頁的技術。

3.經過在後臺與服務器進行少許數據交換，可使網頁實現異步更新。

4.能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

原理：

　　Ajax的原理簡單來講經過XmlHttpRequest對象來向服務器發異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面。這其中最關鍵的一步就是從服務器得到請求數據。

　　ajax技術的核心或者說負責ajax進行同步或者異步服務器請求是XMLHttpRequest對象。在用使用ajax技術時，其實就是操做XMLHttpRequest進行相應的業務。

　　方法： 

　　1.建立XMLHttpRequest對象　 xhr=new XMLHttpRequest();　//要是支持XMLHttpRequest的則採用XMLHttpRequest生成對象，要是支持win的ActiveXobiect則採用ActiveXobiect生成對象。

　　2. 使用open方法建立一個請求，設置請求方式如GET POST OPTION DELETE等，請求路徑，同步請求或者是異步請求(true表示異步請求，false表示同步請求)，xhr.open('請求方式','請求url',是異步|同步)

　　3.使用send發送一個請求       不傳值時能夠寫null，get或者post請求傳值時能夠鍵值對寫 username=zhangsan&pwd=12345

　　4.使用onreadystatechange事件捕獲請求的狀態變化

　　5.使用readyState屬性判斷請求狀態

 　　

　　6．使用status屬性判斷請求的結果

　　

7．使用responseText得到返回的文本

當服務器端處理了請求並返回後，能夠利用XMLHttpRequest對象的responseText屬性來獲取返回的結果，它表示網頁的Html代碼。

8．使用responseXML屬性獲取XML文檔。

9．使用abort方法取消一個請求。

14.Git

Git是目前世界上最早進的分佈式版本控制系統。

SVN是集中式版本控制系統

git工做流程：

1. 克隆 Git 資源做爲工做目錄。 
2. 在克隆的資源上添加或修改文件。 
3. 若是其餘人修改了，你能夠更新資源。 
4. 在提交前查看修改。 
5. 提交修改。 
6. 在修改完成後，若是發現錯誤，能夠撤回提交併再次修改並提交。 

基本概念：

工做區：就是你項目的目錄（可見目錄）。

緩存區：英文叫stage, 或index。通常存放在」git目錄」下的index文件（.git/index）中，因此咱們把暫存區有時也叫做索引（index）。

版本庫：工做區有一個隱藏目錄.git，這個不算工做區，而是Git的版本庫。

經常使用命令：

1.配置我的的用戶名稱和電子郵件地址：

$ git config --global user.name "wyndam"
$ git config --global user.email "only.night@qq.com"

2.差別分析工具

$ git config --global merge.tool vimdiff ，習慣了用beyond compare工具

4.查看配置信息 git config –list

5.新建本地倉庫 git init

6.複製遠程倉庫 git clone

7.git add 命令可將該文件添加到緩存

8.git status 命令用於查看項目的當前狀態。 

9.git diff 命令顯示已寫入緩存與已修改但還沒有寫入緩存的改動的區別

10.提交代碼到本地倉庫 git commit

11.git reset HEAD 命令用於取消已緩存的內容。

12.從緩存以及工做目錄刪除文件 git rm

13.git merge

14.Git 查看提交歷史 git log

15.添加遠程庫 git remote add

16.查看當前的遠程庫 git remote

17.從遠端倉庫提取數據並嘗試合併到當前分支： git pull

18.推送到遠程倉庫 git push

19.刪除遠程分支 git push 

20.刪除本地倉庫的遠程倉庫連接 git remote rm

15.IIS

　　iis由微軟公司提供的基於運行Microsoft Windows的互聯網基本服務。

　　通常咱們只能在本機上才能夠開到咱們的項目，這個是不須要連網的，若是想讓咱們的項目在網站中打開，別人也能夠看到，就須要把咱們的項目部署到服務器上了，輸入IP就能夠看到咱們的項目
　　安裝步驟：

 　　1.開始 -> 控制面板 ->程序（或程序與功能）->打開或關閉windows功能 ，選中Internet 信息服務下面的全部選項

　　 2.安裝成功後打開Internet信息服務(IIS)管理器，填寫添加網站的名稱，選擇網站的物理路徑，綁定好網站的IP地址，並分配好端口號，點擊肯定。

　　 3.添加默認文檔：選中新建的網站，在右側‘功能試圖’中選擇‘默認文檔’，雙擊進入添加名稱爲login.aspx

　　 4.編輯應用程序池，選擇剛剛添加到項目，雙擊已創建的應用程序池。.NET Framework版本選擇「.NET Framework v4.0.30319」,託管管道模式選擇「集成」。

　 　5.點擊新建的網站 → 點擊內容視圖 → 選擇起始頁 → 右擊瀏覽

　　遇到問題：

　　1.權限問題 報錯500.19-Internal Server Error

　　　　選擇——編輯權限——安全——編輯

　　2.能夠運行出來 可是出現相似於FTP形式的列表樣式

　　　　在默認文檔中 添加 網站的起始頁 後綴

 16.HTTP協議：

　　定義：HTTP協議就是超文本傳輸協議,是用於從萬維網（WWW:World Wide Web ）服務器基於TCP/IP通訊協議傳輸超文本（傳遞數據;HTML 文件, 圖片文件, 查詢結果等）到本地瀏覽器的傳送協議。

　　瀏覽器做爲HTTP客戶端經過URL向HTTP服務端即WEB服務器發送全部請求。Web服務器根據接收到的請求後，向客戶端發送響應信息。

　　工做流程：

　　一次HTTP操做稱爲一個事務，其工做過程可分爲四步：

　　 1）首先客戶機與服務器須要創建鏈接。只要單擊某個超級連接，HTTP的工做開始。

　　 2）創建鏈接後，客戶機發送一個請求給服務器，請求方式的格式爲：統一資源標識符（URL）、協議版本號，後邊是MIME信息包括請求修飾符、客戶機信息和可能的內容。 　

　　3）服務器接到請求後，給予相應的響應信息，其格式爲一個狀態行，包括信息的協議版本號、一個成功或錯誤的代碼，後邊是MIME信息包括服務器信息、實體信息和可能的內容。

　　4）客戶端接收服務器所返回的信息經過瀏覽器顯示在用戶的顯示屏上，而後客戶機與服務器斷開鏈接。

17.當咱們打開瀏覽器，在地址欄中輸入URL，而後咱們就看到了網頁。 原理是怎樣的呢？　

　　1.域名的解析：如上圖所示瀏覽器接收到你輸入的域名以後會如今瀏覽器本地的緩存裏面查詢看是否有該域名，而後依次訪問系統緩存，路由緩存，由這裏便開始咱們的遞歸搜索；向DNS服務器發起查詢請求

　　2.和服務器創建好TCP鏈接

　　3.客戶端向服務器發送響應的請求

　　4.服務器處理請求，並返回一個HTML頁面

　　5.瀏覽器開始顯示HTML頁面

　　6.斷開鏈接

18.GET和POST的區別

　　1. GET提交的數據會放在URL以後，以?分割URL和傳輸數據，參數之間以&相連，如EditPosts.aspx?name=test1&id=123456.  POST方法是把提交的數據放在HTTP包體中.

　　2. GET提交的數據大小有限制（由於瀏覽器對URL的長度有限制），而POST方法提交的數據沒有限制.

　　3. GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值。

　　4. GET方式提交數據，會帶來安全問題，好比一個登陸頁面，經過GET方式提交數據時，用戶名和密碼將出如今URL上，若是頁面能夠被緩存或者其餘人能夠訪問這臺機器，就能夠從歷史記錄得到該用戶的帳號和密碼.

1九、http協議和https協議的區別

　　https協議是用SSL加密的進行信息交換，簡而言之就是http協議的安全版

　　https協議須要到ca申請證書，通常免費證書不多，須要交費。 
  　 http是超文本傳輸協議，信息是明文傳輸，https 則是具備安全性的ssl加密傳輸協議。 
  　 http和https使用的是徹底不一樣的鏈接方式用的端口也不同,前者是80,後者是443。 
  　 http的鏈接很簡單,是無狀態的。 
  　 HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議 要比http協議安全。 

20、會話跟蹤方式

1.什麼是會話 

　　客戶端打開與服務器的鏈接發出請求到服務器響應客戶端請求的全過程稱之爲會話 。  

2.什麼是會話跟蹤 
　　對同一個用戶對服務器的連續的請求和接受響應的監視 。

3.爲何要進行會話跟蹤

　　瀏覽器與服務器之間的通訊是經過HTTP協議進行通訊的，而HTTP協議是」無狀態」的協議，它不能保存客戶的信息，即一次響應完成以後鏈接就斷開了，下一次的請求須要從新鏈接，這樣就須要判斷是不是同一個用戶，因此才應會話跟蹤技術來實現這種要求。

4.會話跟蹤經常使用的方法：

• URL重寫:在URL結尾添加一個附加數據以標識該會話,把會話ID經過URL的信息傳遞過去，以便在服務器端進行識別不一樣的用戶。
• 隱藏表單域:將會話ID添加到HTML表單元素中提交到服務器,此表單元素並不在客戶端顯示。
• Cookie： Cookie是Web服務器發送給客戶端的一小段信息，客戶端請求時能夠讀取該信息發送到服務器端，進而進行用戶的識別。客戶端能夠採用兩種方式來保存這個Cookie對象，一種方式是保存在客戶端內存中，稱爲臨時Cookie，瀏覽器關閉後 這個Cookie對象將消失。另一種方式是保存在 客戶機的磁盤上，稱爲永久Cookie。之後客戶端只要訪問該網站，就會將這個Cookie再次發送到服務器上，前提是 這個Cookie在有效期內。這樣就實現了對客戶的跟蹤。 
• Session :每個用戶都有一個不一樣的session，各個用戶之間是不能共享的，是每一個用戶所獨享的，在session中能夠存放信息。在服務器端會建立一個session對象，產生一個sessionID來標識這個session對象，而後將這個sessionID放入到Cookie中發送到客戶端，下一次訪問時，sessionID會發送到服務器，在服務器端進行識別不一樣的用戶。Session是依賴Cookie的，若是Cookie被禁用，那麼session也將失效。由於Session是用Session ID來肯定當前對話所對應的服務器Session，而Session ID是經過Cookie來傳遞的，禁用Cookie至關於失去了Session ID，也就得不到Session了。此時能夠考慮URL重寫和表單隱藏域。

2一、同源

　　同源：兩個文檔同源需知足

1. 協議相同
2. 域名相同
3. 端口相同

2二、前端自動化構建工具——gulp

　　簡介：gulp是基於Nodejs的前端自動任務運行器，它能自動化地完成javascript/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。

　　原理：Gulp 這類工具的原理很簡單，主要是實現各類轉換流來實現對文件的處理，而後再進行輸出。

　　　　

　　優勢：Gulp 爲你的工做流而服務，自動運行那些費事費力任務。

　　　　　可以幫我合併壓縮代碼

　　　　   爲了不瀏覽器緩存問題，對於新發布的代碼，須要能加上md5值，而且能自動修改個人html中對js/css的引用

　　使用：1.先安裝node.js,裏面會帶有npm工具。

　　　　　2.再用npm來全局安裝gulp npm install --global gulp。

　　　　   3.進入項目目錄，再安裝一下項目的依賴npm install --save-dev gulp, --save-dev會自動加入到package.json中。

　　　　   4.每個項目都須要一個gulpfile.js文件，咱們後續的代碼和配置就都在這個文件裏面了。

　　　　　5.gulp實現文件的壓縮

var gulp = require('gulp'),//導入工具包 require('node_modules裏對應模塊')

var minifyHtml= require("gulp-minify-html");

gulp.task('minify-html',function() {//定義一個minify-html任務（自定義任務名稱）

      gulp.src('src/**/*.html')//要壓縮的html文件

      .pipe(minifyHtml())//壓縮

     .pipe(gulp.dest('build'));

});
gulp.task('default',['minify-html']);　

　　6.gulp執行添加時間戳

主要插件：

var md5 = require("gulp-md5-plus");
gulp.src("./src/*.css")
    .pipe(md5(10,'./output/index.html'))
    .pipe(gulp.dest("./dist"));

 　　將md5哈希值（長度：10）附加到靜態/ js文件夾中的每一個文件，而後使用md5ed文件名替換輸出/ html /中的連接文件名; 最後將全部這些存儲到輸出文件夾中。

Gulp 核心 API：

　　　　gulp.src：獲取文件

　　　　gulp.dest：寫入文件 

　　　　gulp.tasks：註冊任務

　　　　gulp.watch：監控文件的改動

 2三、前端自動化構建工具——webpack 

　　webpack 是一個打包工具

　　核心思想：把文件分紅一個個的模，按需加載這些文件。

　　原理：將你的應用打包爲多個文件. 若是你的單頁面應用有多個頁面, 那麼用戶只從下載對應頁面的代碼. 當他麼訪問到另外一個頁面, 他們不須要從新下載通用的代碼。可以編譯打包 CSS, 作 CSS 預處理, 編譯 JS 方言, 打包圖片等。

　　webpack是一個前端模塊化方案，更側重模塊打包，咱們能夠把開發中的全部資源（圖片、js文件、css文件等）都當作模塊，經過loader（加載器）和plugins（插件）對資源進行處理，打包成符合生產環境部署的前端資源。

 　　使用步驟：

　　1.在node環境下安裝webpack以及下載一下所須要的模塊。

　　2.搭建項目結構，src下面是代碼開發目錄，dist下面地編譯打包輸出目錄，node_modules是所使用的nodejs模塊。

　　3.webpack相關配置。

 2四、require.js
　　這段代碼依次加載多個js文件。這樣的寫法有很大的缺點。首先，加載的時候，瀏覽器會中止網頁渲染，加載文件越多，網頁失去響應的時間就會越長；其次，因爲js文件之間存在依賴關係，所以必須嚴格保證加載順序（好比上例的1.js要在2.js的前面），依賴性最大的模塊必定要放到最後加載，當依賴關係很複雜的時候，代碼的編寫和維護都會變得困難。
優勢：
　　（1）實現js文件的異步加載，避免網頁失去響應；
　　（2）管理模塊之間的依賴性，便於代碼的編寫和維護。

使用require.js的步驟

　　1.是先去官方網站下載最新版本，下載後，假定把它放在js子目錄下面，就能夠加載了。　

<script src="js/require.js"></script>

　　有人可能會想到，加載這個文件，也可能形成網頁失去響應。解決辦法有兩個，一個是把它放在網頁底部加載，另外一個是寫成下面這樣：

<script src="js/require.js" defer async="true" ></script>

　　async屬性代表這個文件須要異步加載，避免網頁失去響應。IE不支持這個屬性，只支持defer，因此把defer也寫上。

　　2.加載require.js之後，下一步就要加載咱們本身的代碼了。假定咱們本身的代碼文件是main.js，也放在js目錄下面。那麼，只須要寫成下面這樣就好了：

<script src="js/require.js" data-main="js/main"></script>

data-main屬性的做用是，指定網頁程序的主模塊。在上例中，就是js目錄下面的main.js，這個文件會第一個被require.js加載。因爲require.js默認的文件後綴名是js，因此能夠把main.js簡寫成main。

25.less和sass的區別

　　http://www.javashuo.com/article/p-xphnjrqn-g.html