C#、Java同樣JavaScript有自動垃圾回收機制,JavaScript垃圾回收的機制很簡單:找出再也不使用的變量,而後釋放掉其佔用的內存,可是這個過程不是時時的,由於其開銷比較大,因此垃圾回收器會按照固定的時間間隔週期性的執行。javascript
標記清除css
這是JavaScript最多見的垃圾回收方式,當變量進入執行環境的時候,好比函數中聲明一個變量,垃圾回收器將其標記爲「進入環境」,當變量離開環境的時候(函數執行結束)將其標記爲「離開環境」。至於怎麼標記有不少種方式,好比特殊位的反轉、維護一個列表等,這些並不重要,重要的是使用什麼策略,原則上講不可以釋放進入環境的變量所佔的內存,它們隨時可能會被調用的到。html
垃圾回收器會在運行的時候給存儲在內存中的全部變量加上標記,而後去掉環境中的變量以及被環境中變量所引用的變量(閉包),在這些完成以後仍存在標記的就是要刪除的變量了,由於環境中的變量已經沒法訪問到這些變量了,而後垃圾回收器相會這些帶有標記的變量機器所佔空間。前端
引用計數法vue
引用計數的含義是跟蹤記錄每一個值被引用的次數。當聲明瞭一個變量並將一個引用類型值賦給該變量時,則這個值的引用次數就是1。若是同一個值又被賦給另外一個變量,則該值的引用次數加1。相反,若是包含對這個值引用的變量又取得了另一個值,則這個值的引用次數減1。當這個值的引用次數變成0時,則說明沒有辦法再訪問這個值了,於是就能夠將其佔用的內存空間回收回來。這樣,當垃圾回收器下次再運行時,它就會釋放那些引用次數爲0的值所佔用的內存。java
瀏覽器的同源策略是瀏覽器上爲安全性考慮實施的很是重要的安全策略。
從一個域上加載的腳本不容許訪問另一個域的文檔屬性。
舉個例子:好比一個惡意網站的頁面經過iframe嵌入了銀行的登陸頁面(兩者不一樣源),
若是沒有同源限制,惡意網頁上的javascript腳本就能夠在用戶登陸銀行的時候獲取用戶名和密碼。
何謂同源:URL由協議、域名、端口和路徑組成,若是兩個URL的協議、域名和端口相同,則表示它們同源。
在瀏覽器中,<script>、<img>、<iframe>、<link>等標籤均可以加載跨域資源,而不受同源限制,
但瀏覽器會限制腳本中發起的跨域請求。好比,使用 XMLHttpRequest 對象和Fetch發起 HTTP 請求就必須遵照同源策略。
Web 應用程序經過 XMLHttpRequest 對象或Fetch能且只能向同域名的資源發起 HTTP 請求,而不能向任何其它域名發起請求。
不容許跨域訪問並不是是瀏覽器限制了發起跨站請求,而是跨站請求能夠正常發起,可是返回結果被瀏覽器攔截了。
最好的例子是CSRF跨站攻擊原理,請求是發送到了後端服務器,不管是否設置容許跨域,
有些瀏覽器不容許從HTTPS跨域訪問HTTP,好比Chrome和Firefox,這些瀏覽器在請求還未發出的時候就會攔截請求,這是特例。
克服跨域限制的方法有(實踐中後兩種最經常使用,因此重點介紹):
(1)經過jsonp跨域
(2)經過修改document.domain來跨子域
(3)使用window.name來進行跨域
(4)使用HTML5中新引進的window.postMessage方法來跨域傳送數據
(5)使用代理服務器,使用代理方式跨域更加直接,由於同源限制是瀏覽器實現的。若是請求不是從瀏覽器發起的,就不存在跨域問題了。
使用本方法跨域步驟以下:
1. 把訪問其它域的請求替換爲本域的請求
2. 服務器端的動態腳本負責將本域的請求轉發成實際的請求
爲了經過Ajax從http://localhost:8080訪問http://localhost:8081/api,能夠將請求發往http://localhost:8080/api。
而後利用Apache Web服務器的Reverse Proxy功能作以下配置:ProxyPass /api http://localhost:8081/api
(6)CORS全稱是"跨域資源共享"(Cross-origin resource sharing),CORS須要瀏覽器和服務器同時支持。目前,全部瀏覽器都支持該功能
(IE瀏覽器不能低於IE10),所以,實現CORS通訊的關鍵是服務器。只要服務器實現了CORS接口,就能夠跨源通訊。
瀏覽器將CORS請求分紅兩類:簡單請求(simple request)和非簡單請求(not-so-simple request)
(1) 請求方法是如下三種方法之一:HEAD GET POST
(2)HTTP的頭信息不超出如下幾種字段:Accept Accept-Language Content-Language Last-Event-ID
Content-Type:只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain
凡是不一樣時知足上面兩個條件,就屬於非簡單請求。
對於簡單請求,瀏覽器在發出CORS請求時會在頭信息之中增長一個Origin字段。服務器的返回會多出3個字段:
Access-Control-Allow-Origin(必須) 容許跨域的源
Access-Control-Allow-Credentials(可選) 表示是否容許發送Cookie。默認狀況下,Cookie能夠包含在請求中,一塊兒發給服務器
若是服務器不須要瀏覽器發送Cookie,刪除該字段便可。
Access-Control-Expose-Headers(可選) CORS請求時,XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段:
Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。若是想拿到其餘字段,
就必須在Access-Control-Expose-Headers裏面指定。如指定Access-Control-Expose-Headers: FooBar,則可經過
getResponseHeader('FooBar')獲取FooBar字段的值。
非簡單請求是那種對服務器有特殊要求的請求,好比請求方法是PUT或DELETE,或者Content-Type字段的類型是application/json。
非簡單請求的CORS請求,會在正式通訊以前,增長一次HTTP查詢請求,稱爲"預檢"請求(preflight)。
"預檢"請求用的請求方法是OPTIONS,表示這個請求是用來詢問的。頭信息裏面,關鍵字段是Origin,表示請求來自哪一個源。
瀏覽器先詢問服務器,當前網頁所在的域名是否在服務器的許可名單之中,以及可使用哪些HTTP動詞和頭信息字段。只有獲得確定答覆,
瀏覽器纔會發出正式的XMLHttpRequest請求,不然就報錯。node
三列布局jquery
1,:Floatgit
全局(overflow:hidden)es6
左邊 float:left 右邊float:right 中間margin-left:左邊的寬度 margin-right:右邊的寬度
2:Position
左邊 Position:absolute 右邊Position:absolute 中間margin-left:左邊的寬度 margin-right:右邊的寬度 或者margin:0 右寬度 0 左寬度:
3:bfc和float配合使用
<div class="wrap">
<div class="middle">
<div class="main">中間</div> </div>
<div class="left">左側</div>
<div class="right">右側</div>
</div>
<style type="text/css">
.wrap {overflow: hidden;}
.left {float: left; width: 200px; height: 100px; background: coral; margin-left: -100%;}
.middle {float: left; width: 100%; height: 100px; background: lightblue;}
.right {float: left; width: 120px; height: 100px; background: gray; margin-left: -120px;}
.main {margin: 0 140px 0 220px; background: lightpink;}
</style>
4:flex佈局
僅僅須要將display:flex佈局
原型鏈是什麼詳解:
http://www.javashuo.com/article/p-fokaolhp-w.html
js實現繼承的方法
1原型鏈繼承
2構造繼承
3實例繼承
4拷貝繼承
5組合繼承
6寄生組合繼承
http://www.cnblogs.com/humin/p/4556820.html
內存泄漏和垃圾回收機制
http tcp udp websocket
主要關於websocket
Websocket是一個持久化的協議,相對於HTTP這種非持久的協議來講
http://www.cnblogs.com/fuqiang88/p/5956363.html
typeof 運算符返回一個用來表示表達式的數據類型的字符串。
可能的字符串有:"number"、"string"、"boolean"、"object"、"function" 和 "undefined"。
堆棧數據結構區別
堆(數據結構):堆能夠被當作是一棵樹,如:堆排序。
棧(數據結構):一種先進後出的數據結構。
主要的區別由如下幾點:
一、管理方式不一樣;
二、空間大小不一樣;
三、可否產生碎片不一樣;
四、生長方向不一樣;
五、分配方式不一樣;
六、分配效率不一樣;
淺拷貝 用object.assign方法
深拷貝
1種:jso.stringify實現
2種:for in實現遍歷和複製
3種:利用數組array.prototype.forEach進行copy
https://blog.csdn.net/qq_39083004/article/details/80206336
css單位 尺寸和顏色
http://www.w3school.com.cn/cssref/css_units.asp
網頁渲染流程
http://www.javashuo.com/article/p-dwfigiwh-g.html
html以構建dom樹 -> 構建render樹 -> 佈局render樹 -> 繪製render樹
(1) HTML/SVG/XHTML,解析這三種文件會產生一個 DOM Tree。
(2) CSS,解析 CSS 會產生 CSS 規則樹。
(3) JavaScript腳本,主要是經過 DOM API 和 CSSOM API 來操做 DOM Tree 和 CSS Rule Tree.
Css不會阻塞dom解析 但會阻塞dom渲染
https://blog.csdn.net/bg70pvnybv1/article/details/78819711
js判斷數據類型的方法
瀏覽器緩存問題
http://www.cnblogs.com/skynet/archive/2012/11/28/2792503.html
前端模塊化cmd amd es6
主線程和異步操做
主線程先執行 執行完再異步操做 。
產生異步操做 set promise.then gnentrate think和white(不肯定)
加載速度提高
圖片懶加載和預加載 精靈技術 cnd scritp放在css後面執行
節流
函數節流,簡單地講,就是讓一個函數沒法在很短的時間間隔內連續調用,只有當上一次函數執行後過了你規定的時間間隔,才能進行下一次該函數的調用。以impress上面的例子講,就是讓縮放內容的操做在你不斷改變窗口大小的時候不會執行,只有你停下來一下子,纔會開始執行。
去抖 屢次請求 必須等時間間隔運行 屢次觸發從最後一次深遠時間場景:鼠標用戶不停點提交
Float與position同時使用
https://blog.csdn.net/qq_27346075/article/details/82288242
rem怎麼用?作不一樣手機的適配怎麼作?
rem是css單位;
1rem的大小是經過html下的font-size這個css屬性告訴瀏覽器的;
使用替換px所在的位置便可
箭頭函數的特色
https://www.jb51.net/article/50770.htm
vue雙向綁定
數據更新視圖 視圖更新數據
1.實現一個監聽器Observer,用來劫持並監聽全部屬性,若是有變更的,就通知訂閱者。
2.實現一個訂閱者Watcher,能夠收到屬性的變化通知並執行相應的函數,從而更新視圖。
3.實現一個解析器Compile,能夠掃描和解析每一個節點的相關指令,並根據初始化模板數據以及初始化相應的訂閱器。
Vue源碼
https://github.com/answershuto/learnVue
vue依賴收集
http://www.javashuo.com/article/p-sgshffnh-ea.html
https://segmentfault.com/q/1010000008455668
說說Cookie和Session的區別?
一、Cookie和Session都是會話技術,Cookie是運行在客戶端,Session是運行在服務器端。
二、Cookie有大小限制以及瀏覽器在存cookie的個數也有限制,Session是沒有大小限制和服務器的內存大小有關。
三、Cookie有安全隱患,經過攔截或本地文件找獲得你的cookie後能夠進行攻擊。
四、Session是保存在服務器端上會存在一段時間纔會消失,若是session過多會增長服務器的壓力。
Session後端如何存儲服務器
https://blog.csdn.net/yzi_angel/article/details/52947733
線程與進程
程序一旦運行就是進程,或者更專業化來講:進程是指程序執行時的一個實例。
線程是進程的一個實體。
進程——資源分配的最小單位,線程——程序執行的最小單位。
線程進程的區別體如今幾個方面:
第一:由於進程擁有獨立的堆棧空間和數據段,因此每當啓動一個新的進程必須分配給它獨立的地址空間,創建衆多的數據表來維護它的代碼段、堆棧段和數據段,這對於多進程來講十分「奢侈」,系統開銷比較大,而線程不同,線程擁有獨立的堆棧空間,可是共享數據段,它們彼此之間使用相同的地址空間,共享大部分數據,比進程更節儉,開銷比較小,切換速度也比進程快,效率高,可是正因爲進程之間獨立的特色,使得進程安全性比較高,也由於進程有獨立的地址空間,一個進程崩潰後,在保護模式下不會對其它進程產生影響,而線程只是一個進程中的不一樣執行路徑。一個線程死掉就等於整個進程死掉。
第二:體如今通訊機制上面,正由於進程之間互不干擾,相互獨立,進程的通訊機制相對很複雜,譬如管道,信號,消息隊列,共享內存,套接字等通訊機制,而線程因爲共享數據段因此通訊機制很方便。。
3.屬於同一個進程的全部線程共享該進程的全部資源,包括文件描述符。而不一樣過的進程相互獨立。
4.線程又稱爲輕量級進程,進程有進程控制塊,線程有線程控制塊;
5.線程一定也只能屬於一個進程,而進程能夠擁有多個線程並且至少擁有一個線程;
第四:體如今程序結構上,舉一個簡明易懂的列子:當咱們使用進程的時候,咱們不自主的使用if else嵌套來判斷pid,使得程序結構繁瑣,可是當咱們使用線程的時候,基本上能夠甩掉它,固然程序內部執行功能單元須要使用的時候仍是要使用,因此線程對程序結構的改善有很大幫助。
進程與線程的選擇取決如下幾點:
一、須要頻繁建立銷燬的優先使用線程;由於對進程來講建立和銷燬一個進程代價是很大的。
二、線程的切換速度快,因此在須要大量計算,切換頻繁時用線程,還有耗時的操做使用線程可提升應用程序的響應
三、由於對CPU系統的效率使用上線程更佔優,因此可能要發展到多機分佈的用進程,多核分佈用線程;
四、並行操做時使用線程,如C/S架構的服務器端併發線程響應用戶的請求;
五、須要更穩定安全時,適合選擇進程;須要速度時,選擇線程更好。
棧存的基本類型 Undefined、Null、Boolean、Number 和 String,這5中基本數據類型能夠直接訪問,他們是按照值進行分配的,存放在棧(stack)內存中的簡單數據段,數據大小肯定,內存空間大小能夠分配。
堆是引用類型
http://www.javashuo.com/article/p-grkectxk-mm.html
promise.then相似於Promise.all() ,區別在於 它有任意一個返回成功後,就算完成,可是 進程不會當即中止
1、Pomise.all的使用
常見使用場景 : 多個異步結果合併到一塊兒
Promise.all能夠將多個Promise實例包裝成一個新的Promise實例。用於將多個Promise實例,包裝成一個新的Promise實例。
1.它接受一個數組做爲參數。
2.數組能夠是Promise對象,也能夠是其它值,只有Promise會等待狀態改變。
3.當全部的子Promise都完成,該Promise完成,返回值是所有值的數組。
4.若是有任何一個失敗,該Promise失敗,返回值是第一個失敗的子Promise的結果。
http://www.javashuo.com/article/p-aspwabur-cu.html
bind call apply 區別
call(對象,對象)apply(對象,數組[])
bind 返回對象 手動調用才執行call apply
call this改變 apply 數組 bind返回一個對象
call和apply都是改變上下文中的this並當即執行這個函數,bind方法可讓對應的函數想何時調就何時調用,而且能夠將參數在執行的時候添加,這是它們的區別,根據本身的實際狀況來選擇使用。
閉包:
Setimeout(函數,時間)
輸出i最後的數 若是想輸出1234 用閉包 把函數擴起來再跟一個函數 當即執行函數
for循環 用閉包解決 for循環括起來 當即執行 把
(function()),(i))這個函數就會當即執行 而不是等for循環執行完成以後再執行
apply 、 call 、bind 三者都是用來改變函數的this對象的指向的;
apply 、 call 、bind 三者第一個參數都是this要指向的對象,也就是想指定的上下文;
apply 、 call 、bind 三者均可以利用後續參數傳參;
bind 是返回對應函數,便於稍後調用;apply 、call 則是當即調用 。
https三次握手
1. 客戶端發起HTTPS請求
2. 服務端的配置
採用HTTPS協議的服務器必需要有一套數字證書,能夠是本身製做或者CA證書。區別就是本身頒發的證書須要客戶端驗證經過,才能夠繼續訪問,而使用CA證書則不會彈出提示頁面。這套證書其實就是一對公鑰和私鑰。公鑰給別人加密使用,私鑰給本身解密使用。
3. 傳送證書
這個證書其實就是公鑰,只是包含了不少信息,如證書的頒發機構,過時時間等。
4. 客戶端解析證書
這部分工做是有客戶端的TLS來完成的,首先會驗證公鑰是否有效,好比頒發機構,過時時間等,若是發現異常,則會彈出一個警告框,提示證書存在問題。若是證書沒有問題,那麼就生成一個隨即值,而後用證書對該隨機值進行加密。
5. 傳送加密信息
這部分傳送的是用證書加密後的隨機值,目的就是讓服務端獲得這個隨機值,之後客戶端和服務端的通訊就能夠經過這個隨機值來進行加密解密了。
6. 服務段解密信息
服務端用私鑰解密後,獲得了客戶端傳過來的隨機值(私鑰),而後把內容經過該值進行對稱加密。所謂對稱加密就是,將信息和私鑰經過某種算法混合在一 起,這樣除非知道私鑰,否則沒法獲取內容,而正好客戶端和服務端都知道這個私鑰,因此只要加密算法夠彪悍,私鑰夠複雜,數據就夠安全。
7. 傳輸加密後的信息
這部分信息是服務段用私鑰加密後的信息,能夠在客戶端被還原。
8 客戶端解密信息
客戶端用以前生成的私鑰解密服務段傳過來的信息,因而獲取瞭解密後的內容。
PS: 整個握手過程第三方即便監聽到了數據,也一籌莫展。
http://www.cnblogs.com/shangxiaofei/p/5207471.html
HTTPS和HTTP的區別
1. https協議須要到ca申請證書或自制證書。
2. http的信息是明文傳輸,https則是具備安全性的ssl加密。
3. http是直接與TCP進行數據傳輸,而https是通過一層SSL(OSI表示層),用的端口也不同,前者是80(須要國內備案),後者是443。
4. http的鏈接很簡單,是無狀態的;HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議,比http協議安全。
附錄
HTTPS通常使用的加密與HASH算法以下:
非對稱加密算法:RSA,DSA/DSS
對稱加密算法:AES,RC4,3DES
HASH算法:MD5,SHA1,SHA256
Es5和es6繼承的區別
https://blog.csdn.net/heyue_99/article/details/54932553
promise封裝實現ajax過程
https://blog.csdn.net/qq_35844177/article/details/75217681
ajax經常使用的三種方式
http://www.javashuo.com/article/p-xevtrhjg-du.html
事件代理和事件委託
https://blog.csdn.net/majian_1987/article/details/8591385
前端加密
Js加密後傳輸
瀏覽器插件內進行加密傳輸
https傳輸
提高變量
函數提高在變量提高之上
Sessionid
http://www.javashuo.com/article/p-nesyzutf-ne.html
css隱藏元素
一、opacity:0
二、visibility:hidden
三、diaplay:none
四、position:absolute
https://blog.csdn.net/heye13/article/details/51720600
瀏覽器輸入網站全過程
https://blog.csdn.net/qq_25622107/article/details/55046413
1)在瀏覽器中輸入網址
2)DNS解析:先在瀏覽器的緩存中,搜索是否有DNS相應緩存,是否過時
if not
在操做系統的緩存中,搜索是否有DNS相應緩存,是否過時
if not
讀取C盤中的host文件,看是否有DNS相應緩存,是否過時
if not
發送域名解析請求
3)TCP三次握手,鏈接服務器
4)瀏覽器給服務器發送一個HTTP請求
5)HTTP服務器迴應一個永久重定向響應
6)瀏覽器去訪問重定向的服務器
7)服務器處理請求(進行數據庫查詢,用戶判斷等)
8)服務器發回響應
9)瀏覽器開始相應html頁面
10)瀏覽器發送獲取嵌入到html中的元素
什麼是DOM?
DOM是文檔對象模型,是一種用於HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法,能夠改變文檔的內容和呈現方式。咱們最爲關心的是,DOM把網頁和腳本以及其餘的編程語言聯繫了起來。文檔對象模型把整張網頁組織成這樣的一個樹狀的結構,樹結構中的每個元素都被視爲一個節點(node)。包括JavaScript在內的各類編程語言均可以經過文檔對象模型來訪問和改變網頁的各類細節。
怎麼操做Dom?
一些經常使用的 HTML DOM 方法:
getElementById(id) - 獲取帶有指定 id 的節點(元素)
appendChild(node) - 插入新的子節點(元素)
removeChild(node) - 刪除子節點(元素)
一些經常使用的 HTML DOM 屬性:
innerHTML - 節點(元素)的文本值
parentNode - 節點(元素)的父節點
childNodes - 節點(元素)的子節點
attributes - 節點(元素)的屬性節點
html標籤分類?(塊級元素和內聯元素)
http://www.javashuo.com/article/p-qwnrvwyk-ck.html
js指針問題
異步請求的幾種方式
http://www.javashuo.com/article/p-vdulvzkn-ek.html
1種 用原生js方法
2種基於jquery
(1)$.getJSON(url,[data],[callback])
(2)$.ajx()
(3)$.post(url,[data],[callback])或$.get(url,[callback])
Ajax異步請求的整個過程
https://blog.csdn.net/rogerzhanglijie/article/details/8655315
https://blog.csdn.net/huangzhi455633364/article/details/51287432
第一步獲得XMLHttpRequest
第二步打開服務器的鏈接(請求方式get post 請求url 請求是否爲異步)
第三步發送請求 *xmlHttp.send(null)若是不給可能會形成部分瀏覽器沒法發送
第四步 Xmlhttprequest對象的一個事件註冊監聽器onreadystatechange
(0剛建立 1請求開始 2調用完send()方法3服務器已經開始響應4響應結束)
JS引擎的事件循環機制event loop
https://blog.csdn.net/bangbDIV/article/details/82698768
狀態碼:
http://blog.liujason.com/1406.html
401 未受權 403禁止 404未找到
304 客戶端已經執行了GET請求 可是文件未發生變化
http://www.javashuo.com/article/p-djeookxi-ee.html
webstorage和cookie有什麼區別
https://www.cnblogs.com/boyuguoblog/p/6203331.html
js繼承的方式
原型 構造 實例 拷貝 組合 寄生組合
http://www.javashuo.com/article/p-rwkatbxg-gb.html
組件封裝
js前端組件的封裝方法
定義一個類
類中增長一個方法
body中定義一個dom節點
腳本中把dom節點和類定義結合起來 , 實現特定的組件功能
vue組件封裝
創建組件的模板,先把架子搭起來,寫寫樣式,考慮你的組件的基本邏輯
而後在引用得組件中 用import引入組件
經過component定義組件名稱
在把組件以標籤的形式寫出來。