前端知識點總結---面試專用
1.關於基礎css html js部分
1.1基本算法
1）快速排序
時間複雜度 nlognjavascript
function quickSort(arr){
if (arr.length<=1){
return arr;
}
var pivotIndex = 0,
pivort = arr.splice(pivortIndex, 1)[0];
var left = [],
right = [];
for (var i = 1, length = arr.length; i < length; i++) {
if (arr[i] < pivort) {
left.push(arr[i]);
}else if (arr[i] > = pivort) {
right.push(arr[i]);
}
}
return quickSort(left).concat([pivort], quickSort(right));
}
2) 二分查找算法
時間複雜度：logn(以2爲底n的對數)css
二分查找的基本思想是將n個元素分紅大體相等的兩部分，去a[n/2]與x作比較，若是x=a[n/2],則找到x,算法停止；若是x<a[n/2],則只要在數組a的左半部分繼續搜索x,若是x>a[n/2],則只要在數組a的右半部搜索x. 時間複雜度無非就是while循環的次數！ 總共有n個元素， 漸漸跟下去就是n,n/2,n/4,....n/2^k，其中k就是循環的次數 因爲你n/2^k取整後>=1 即令n/2^k=1 可得k=log2n,（是以2爲底，n的對數） 因此時間複雜度能夠表示O()=O(logn)
function binarySearch (arr, value) {
var low = 0,
high = arr.length - 1,
mid;
while (low <= high) {
mid = Math.floor((low + high)/2);
if (arr[mid] == value) {
return mid;
}else if (arr[mid] < value) {
low = mid +1;
}else if (arr[mid] > value) {
high = mid -1;
}else {
return -1;
}
}
}
3)單向鏈表反轉
依次將第2---N個節點逐次插入到第一個節點後，最後將第一個節點挪到新表的結尾html
例子爲單向鏈表，頭結點爲空前端
時間複雜度：Nvue
function reverse (list) {
//空鏈表
if (list.head.next == null) {
return list;
}
//非空鏈表
var p = list.head.next,
q;
while (p.next !== null) {
q = p.next;
p.next = q.next;
q.next = list.head.next;
list.head.next = q;
}
return list;
}
4)查找單向鏈表的倒數第K個節點
function searchK (list, k) {
var head = list.head;
if (head == null || k == 0) {
return null;
}
//第一個節點先向前走K-1步
var firstNode = head;
for (var i = 0; i < k-1; i++) {
firstNode = firstNode.next;
}
//判斷鏈表長度是否有K長
if (i!== k-1) {
return null;
}
//兩個節點同時走
var secondNode = head;
while (firstNode.next !== null) {
secondNode = secondNode.next;
firstNode = firstNode.next;
}
return secondNode;
}
5)深度克隆
function clone (test) {
if (Array.isArray(test)) {
var arr = [];
for (var i = 0, length = test.length; i < length; i++) {
arr.push(clone(arr[i]));
}
}else if (typeOf test === "object") {
var obj = {};
for (var j in test) {
obj[j] = clone(test[j]);
}
return obj;
}else {
return test;
}
}
6)數組去重
例如去重['1',1,2,2,NaN,NaN,null,undefined]html5
尤爲注意1，'1'java
NaNnode
function _isNaN (value) {
return typeof value === 'number' && isNaN(value);
}
function unique (arr) {
var type = '',
key = '',
res = [],
hash = {};
for(var i= 0,len=arr.length;i<len;i++){
if(_isNaN(arr[i])){
if(!hash[arr[i]]){
hash['NaN'] = true;
res.push(arr[i]);
}
}else{
type = typeof arr[i];
key = type + arr[I];
if(!hash[key]){
hash[key] = true;
res.push(arr[i]);
}
}
}
return res;
}
7）兩個棧實現一個隊列
https://segmentfault.com/a/11...jquery
1.2 replace,match,search正則匹配是string的方法
str.replace(/ /g,'20%'); g表示全局匹配，不會匹配完第一個就不匹配了 i忽略大小寫 m多行匹配
1.3 Rexg正則匹配test,exec
test,返回一個 Boolean 值，它指出在被查找的字符串中是否存在模式。 若是存在則返回 true，不然就返回 false。 exec,用正則表達式模式在字符串中運行查找
var str=" 12 er 45 ;; ";var rexg=/ /;rexg.exec(str); Array[1] 0: " " index: 0 input: " 12 er 45 ;; " length: 1 __proto__: Array[0]
var str=" 12 er 45 ;; ";var rexg=/ /;rexg.exec(str); [" "]0: " "index: 0input: " 12 er 45 ;; "length: 1__proto__: Array[0] var str=" 12 er 45 ;; ";str.match(/ /g,'20%'); [" ", " ", " ", " ", " "] var str=" 12 er 45 ;; ";str.replace(/ /,'20%'); "20%12 er 45 ;; " var str=" 12 er 45 ;; ";str.match(/ /,'20%'); [" "] var str=" 12 er 45 ;; ";str.search(/ /,'20%'); 0 var str=" 12 er 45 ;; ";str.search(/ /g,'20%'); 0 var str=" 12 er 45 ;; ";var rexg=/ /;rexg.test(str); true
1.4 閉包
定義：linux
- 能夠訪問外部函數做用於中變量的函數
- 被內部函數引用的外部函數的變量保存在外部做用域中而不被回收
優缺點：
優勢：
變量私有化
減小全局變量污染
可讓一個變量常駐內存
缺點：
內存泄漏
閉包會攜帶包含它的函數的做用域，所以會比其餘函數佔用更多的內存
1.5 js數組
數組能夠當棧用：
arr.unshift(val)進棧，依次向前插入 arr.pop()出棧 取得數組最後一項,原數組改變減小最後一項 實現了先進後出
數組當隊列或者正常數組用：
arr.push(val),順序添加 arr.shift(),拋出第一個值即arr[0]，原數組改變減小第一項
2.關於JS延遲加載
JS延遲加載的方式：
1.位置，js放在</body>結束標籤前
2.監聽，window.onload後再添加script標籤
3.屬性，爲script標籤添加屬性defer或async
4.ajax下載js腳本後eval()執行
3.defer和async的比較
3.1 defer="defer"，defer默認false: 該屬性用來通知瀏覽器，這段腳本代碼將不會產生任何文檔內容。 例如 JavaScript代碼中的document.write()方法將不會騎做用,瀏覽器遇到這樣的代碼將會忽略，並繼續執行後面的代碼。 屬性只能是 defer，與屬性名相同。 在HTML語法格式下，也容許不定義屬性值，僅僅使用屬性名。 3.2 async="true/false",只寫async省略屬性值的狀況下爲true: 該屬性爲html5中新增的屬性，它的做用是可以異步地下載和執行腳本，不由於加載腳本而阻塞頁面的加載。 一旦下載完畢就會馬上執行。 加上defer 等於在頁面徹底載入後再執行，至關於文檔載入後即執行，不用等包括圖片在內的資源下載完畢。 async和defer同樣，都不會阻塞其餘資源下載，因此不會影響頁面的加載， 但在async的狀況下，js文檔一旦下載完畢就會馬上執行，因此頗有可能不是按照本來的順序來執行，若是js有依賴性，就要注意了。 3.3 相同點： 加載文件時不阻塞頁面渲染； 使用這兩個屬性的腳本中不能調用document.write方法； 容許不定義屬性值，僅僅使用屬性名； 3.4 不一樣點： html的版本html4.0中定義了defer；html5.0中定義了async；這將形成因爲瀏覽器版本的不一樣而對其支持的程度不一樣； 執行時刻：每個async屬性的腳本都在它下載結束以後馬上執行，同時會在window的load事件以前執行。 因此就有可能出現腳本執行順序被打亂的狀況； 每個defer屬性的腳本都是在頁面解析完畢以後，按照本來的順序執行，同時會在document的DOMContentLoaded以前執行。 3.5 混合用 若是async爲true，那麼腳本在下載完成後異步執行。 若是async爲false，defer爲true，那麼腳本會在頁面解析完畢以後執行。 若是async和defer都爲false，那麼腳本會在頁面解析中，中止頁面解析，馬上下載而且執行。
4.關於ajax
var xhr = new XMLHttpRequest(); IE new ActiveXObject("Microsoft.XMLHTTP");
1.xhr.open()
三個參數： 1）請求方式，post/get 2）請求的URL 3）是否發送異步請求 true/false
注意： 只是啓動，並未發送請求，要調用send
2.xhr.send()
一個參數：必須有 參數爲http請求的主體 post請求通常傳入 get請求必須傳入null
發送後獲得服務器的響應，響應的數據會自動填充xhr的屬性
responseText,響應主體 responseXML status，http狀態碼 statusText，狀態說明
3.xhr.readyState
如何判斷服務器響應已到位，如何判斷響應所處階段
xhr.readyState:0,1,2,3,4 4表示完成，收到所有響應
4.xhr.status
((status >= 200 && status <300) || status = = = 304 ) 表示請求成功
5.xhr.onreadystatechange事件
readyState改變一次，onreadystatechange事件觸發一次
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
try {
if((xhr.status >= 200 && xhr.status <300) || xhr.status == 304){
console.log(xhr.responseText);
}else{
console.log("erro:" + xhr.status);
}
}catch(ex){
//ontimeout處理
}
}
};
xhr.open("get","example.js",true);//異步
xhr.send(null);
6.對GET,POST請求參數的處理
GET
1) encodeURIComponent()對參數鍵和值進行編碼，保證格式正確 2) 鍵=值對之間以 & 分隔
function addURLParam(url,name,value){
url + = (url.indexOf("?") = = -1 ? "?" : "&");
url + = encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}
POST
XMLHttpRequest 1級的實現：
1）Content-Type的設置：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2）serialize()序列化數據
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
try {
if((xhr.status >= 200 && xhr.status <300) || xhr.status == 304){
console.log(xhr.responseText);
}else{
console.log("erro:" + xhr.status);
}
}catch(ex){
//ontimeout處理
}
}
};
xhr.open("post",url,true);//異步
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var form = document.getElementById("exampleID");
xhr.send(serialize(form));
XMLHttpRequest 2級
增長了FormData:沒必要明確頭部類型
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
try {
if((xhr.status >= 200 && xhr.status <300) || xhr.status == 304){
console.log(xhr.responseText);
}else{
console.log("erro:" + xhr.status);
}
}catch(ex){
//ontimeout處理
}
}
};
xhr.open("post",url,true);//異步
var form = document.getElementById("exampleID");
xhr.send(new FormData(form));
7.XMLHttpRequest 2 級
xhr.timeout = 屬性值
xhr.ontimemout = function(){
console.log("超時未收到響應");
};
在規定時間內瀏覽器未收到響應就觸發 ontimeout 事件
5.關於web存儲
5.1 cookie,sessionStorage,localStorage區別？
sessionStorage,loalStorage統稱webStorage; Cookie的做用是與服務器進行交互,做爲HTTP規範的一部分而存在,而Web Storage僅僅是爲了在本地「存儲」數據而生
（1）存儲大小：
cookie,4k; sessionStorage,localStorage,5M或更大;
（2）過時時間：
cookie,過時時間前一直有效，默認cookie（沒有設置expires的cookie）失效時間直到關閉瀏覽器，設置方式
保留COOKIES一個小時------Response.Cookies("MyCookie").Expires = DateAdd("h", 1, Now());
sessionStorage關閉即刪除，只要同源的同學口（或tab）中，刷新頁面或進入同源的不一樣頁面，數據始終存在
loalStorage永不丟失
（3）服務器交互帶寬使用狀況：
cookie放在請求頭髮送給服務端，浪費帶寬
sessionStorage,loalStorage無於服務端交互
（4）存儲位置：
cookie以鍵值對形式存儲在http請求的header中發送給服務端，同時從服務端得到的cookie是 鍵=值分號隔開的形式存儲
sessionStorage,localStorage存儲在本地
（5）共享：
cookie受同源策略限制
sessionStorage同一窗口共享
localStorage受同源限制
（6）用法：
cookie須要本身封裝方法
* escape()函數是JS內置函數，編碼將字符串編碼爲16進制，unescape()解碼
1．添加一個cookie
<script language="JavaScript" type="text/JavaScript">
<!--
function addcookie(name,value,expireHours){
var cookieString=name+"="+escape(value);
//判斷是否設置過時時間
if(expireHours>0){
var date=new Date();
date.setTime(date.getTime()+expireHours*3600*1000);
cookieString=cookieString+"; expire="+date.toGMTString();
// 或者cookieString+=";max-age="+60*5; /* 設置cookie的有效期爲5分鐘 */
}
document.cookie=cookieString;
}
//-->
</script>
2．獲取指定名稱的cookie值：getcookie(name)
該函數返回名稱爲name的cookie值，若是不存在則返回空，其實現以下：
<script language="JavaScript" type="text/JavaScript">
<!--
function getcookie(name){
var strcookie=document.cookie;
var arrcookie=strcookie.split(";");
for(var i=0，len=arrcookie.length;i<len;i++){
var arr=arrcookie[i].split("=");
if(arr[0]==name)return unescape(arr[1]);
}
return "";
}
//-->
</script>
3．刪除指定名稱的cookie：deletecookie(name)
該函數能夠刪除指定名稱的cookie，其實現以下：
<script language="JavaScript" type="text/JavaScript">
<!--
function deletecookie(name){
var cookieValue = getCookie(name);
var cookieString = null;
if(cookieValue！== "" || cookieValue!==null){
cookieString = name + "=" + escape(cookieValue) + ";max-age=" + 0;
}
document.cookie = cookieString;
}
//-->
</script>
cookie 的屬性：Domain(設置子域該域下才可訪問cookie) HttpOnly(設置後將不能用JS腳本操做cookie), Secure(設置後將只能經過HTTPS協議訪問), Expiress（過時時間，不設置默認關閉瀏覽器cookie失效）,目前已被max-age屬性所取代 max-age用秒來設置cookie的生命週期 Path（設置路徑的頁面纔可訪問cookie）
sessionStorage,localStorage有接口：
setItem,getItem,removeItem,clear
例如清除全部的key/value
sessionStorage.clear(); localStorage.clear();
sessionStorage.setItem("key", "value");
var value = sessionStorage.getItem("key");
sessionStorage.removeItem("key");
5.關於http
5.1 狀態碼
200 OK - [GET]：服務器成功返回用戶請求的數據，該操做是冪等的（Idempotent）
201 CREATED - [POST/PUT/PATCH]：用戶新建或修改數據成功
202 Accepted - [*]：表示一個請求已經進入後臺排隊（異步任務）
204 NO CONTENT - [DELETE]：用戶刪除數據成功。
301,302,303 redirect:重定向;
301永久性重定向 增長SEO排名，說說
302臨時重定向,
303：對於POST請求，它表示請求已經被處理，客戶端能夠接着使用GET方法去請求Location裏的URI。
307：對於POST請求，表示請求尚未被處理，客戶端應該向Location裏的URI從新發起POST請求。
304not modified：未修改返回緩存的內容再也不請求新的;request If-None-Match
400：客戶端的URL輸入有問題，瀏覽器解析不出來
401：須要身份驗證
403：已經驗證身份經過，可是服務器不予執行
404：對客戶端請求服務端找不到資源
406 Not Acceptable - [GET]：用戶請求的格式不可得（好比用戶請求JSON格式，可是隻有XML格式）
410 Gone -[GET]：用戶請求的資源被永久刪除，且不會再獲得的
422 Unprocesable entity - [POST/PUT/PATCH] 當建立一個對象時，發生一個驗證錯誤
503：服務器暫時沒法提供服務，過一會就行了
5.2 GET和POST的區別？
GET - 從指定的資源請求數據
POST - 向指定的資源提交要被處理的數據
大小限制
get 1024字節 post 無限制，但能夠自行設定
安全性
post較get安全
數據存放
get傳輸的參數附在URL後面 post傳輸的數據放在HTTP請求體中
冪等
get是冪等的，post不是
緩存，收藏，歷史
get均可以，post沒有
6.關於網絡安全
xss(cross site script)跨站腳本攻擊：
Reflected XSS（基於反射的XSS攻擊）：搜索框內鍵入惡意代碼
Stored XSS（基於存儲的XSS攻擊）：發佈的帖子/文章鍵入惡意代碼
DOM-based or local XSS（基於DOM或本地的XSS攻擊）：免費WIFI中間網關對網頁修改嵌入惡意代碼
防範：前端對要顯示的內容和服務端返回的內容進行轉碼htmlencode
服務端對請求的內容進行驗證防範攻擊
xss攻擊主要是拿到cookie，因此能夠禁止操做cookie,設置HttpOnly屬性
詳細見 https://segmentfault.com/a/1190000008423064
CSRF跨站請求僞造 cross site request forgery
詳情：https://segmentfault.com/a/1190000008424201
冒充用戶發起請求（在用戶不知情的狀況下）,完成一些違背用戶意願的請求
（好比散佈的小廣告點進去就完成轉正操做了假如你剛剛登陸過網上銀行session依舊未過時）
防護方法：
驗證HTTP請求頭部的referer便可知道是不是bank.com發起的請求;
請求地址中添加token並驗證;
HTTP頭部添加自定義屬性並驗證;
驗證碼
- XSS：
攻擊者發現XSS漏洞——構造代碼——發送給受害人——受害人打開——攻擊者獲取受害人的cookie——完成攻擊
- CSRF：
攻擊者發現CSRF漏洞——構造代碼——發送給受害人——受害人打開——受害人執行代碼——完成攻擊
SQL注入攻擊 構造巧妙的SQL語句，從而成功獲取想要的數據；黑客的填空遊戲
-
某個網站的登陸驗證的SQL查詢代碼爲：
strSQL = "SELECT * FROM users WHERE (name = '" + userName + "') and (pw = '"+ passWord +"');"
- 惡意填入
userName = "1' OR '1'='1";
- 與
passWord = "1' OR '1'='1";
- 時，將致使本來的SQL字符串被填爲
strSQL = "SELECT * FROM users WHERE (name = '1' OR '1'='1') and (pw = '1' OR '1'='1');"
- 也就是實際上運行的SQL命令會變成下面這樣的
strSQL = "SELECT * FROM users;"
防護方法 ： 對輸入進行驗證 整形參數判斷 unicode轉換等
7.關於跨域
同源策略
1 協議相同
2 域名相同
3 端口相同
跨域的方法
1.window.postMessage(message,targetOrigin) （雙向跨域）
2.document.domain = 共同的主域名 跨子域 （雙向跨域）
http://www.a.com/a.js http://script.a.com/b.js 統一爲主域名a.com
----------------------------------------------------------
3.jsonp（單向跨域）
只支持get請求
<script src=".../callback()"></script>
4.CORS跨域資源共享 （單向跨域）
比JSONP強大，支持各類類型的HTTP請求 容許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制 A跨域訪問B，須要在B的響應頭加入 Access-Control-Allow-Origin：http://A
5.服務器代理 （單向跨域）
跨域的HTTP請求是在服務器端
6.window.name （單向跨域）
8.關於構建工具gulp git grunt fis3
gulpjs是一個前端構建工具，與gruntjs相比：
gulpjs無需寫一大堆繁雜的配置參數，
並且gulpjs使用的是nodejs中stream來讀取和操做數據，其速度更快
npm install -g gulp 全局安裝到本機c盤data中 npm install gulp 安裝到本項目的node moudule模塊中 npm install --save-dev gulp 將gulp依賴添加到本項目的packge.json的依賴內
就能夠運行gulp命令執行gulpfile.js文件內定義的default任務了
gulpfile.js內
經常使用的四個API：gulp.task(), gulp.src(), gulp.dest(),gulp.watch()
gulp.src
gulp.src(globs) 獲取文件流對象，是虛擬文件對象流，進而調用stream.pipe()繼續操做流
經過指定gulp.src()方法配置參數中的base屬性，咱們能夠更靈活的來改變gulp.dest()生成的文件路徑。
當咱們沒有在gulp.src()方法中配置base屬性時，base的默認值爲通配符開始出現以前那部分路徑。
例子：
gulp.src(script/lib/*.js, {base:'script'}) //配置了base參數，此時base路徑爲script
//假設匹配到的文件爲script/lib/jquery.js
.pipe(gulp.dest('build')) //此時生成的文件路徑爲 build/lib/jquery.js
gulp.dest
gulp.dest(path) 用來寫文件，path替換掉基本路徑就是生成的文件的路徑
gulp.task
gulp.task(name,[deps],fn) 任務的名字，依賴的任務，執行的方法
deps只有一個也要用數組括起來
若是任務A依賴B，B有異步編碼，A不會等B的異步代碼執行完而是直接執行，解決辦法：
1，執行一個回調函數通知gulp異步完成
2，返回一個流對象
3，require Q;返回promise對象
gulp.watch
gulp.watch(glob,tasks) 匹配文件路徑 文件改變後執行tasks(以前定義好的task,gulp.task(name,[deps],fn))
詳情見 https://segmentfault.com/a/1190000008427866
對於GIT的提問
git rebase
git merge
等等 詳情見 https://segmentfault.com/a/11...
9.關於框架vue angularjs
v-for ng-repeat
new vue({el:data:methods:})
angular.module(name,[]) 繼而controller
angular controller之間通訊方式：
上下級之間通訊：做用域繼承、事件觸發（$on、$emit 和 $boardcast）
同級之間通訊：注入服務 service、藉助父級controller實現子級controller之間的通訊、藉助$rootScope實現同級之間的通訊
10.關於nodejs
建立簡單的服務器
var http = require("http");
http.createServer(function(request, response) {
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Hello World");
response.end();
}).listen(8888);
11.關於restfulAPI
1.協議
HTTPS協議
2.域名
能夠添加次級域名 https://api.example.com 若是不須要擴展，能夠放在主域名下 https://example.com/api
3.版本
爲API添加版本 https://api.example.com/v1/
4.不容許動詞
路徑名詞通常與數據庫表格一直 https://api.example.com/v1/animals
5.參數設計
參數鍵值形式 & 符號分開 https://api.example.com/v1/animals?name='cat'&sex='1'
6.錯誤處理
請求結果是錯誤的4xx
通常返回的JSON數據中設置erro鍵
{
error: "Invalid API key"
}
7.HTTP動詞
經常使用的：GET,POST GET（SELECT）：從服務器取出資源（一項或多項） POST（CREATE）：在服務器新建一個資源 另有： PUT（UPDATE）：在服務器更新資源（客戶端提供改變後的完整資源） PATCH（UPDATE）：在服務器更新資源（客戶端提供改變的屬性） DELETE（DELETE）：從服務器刪除資源 HEAD：獲取資源的元數據 OPTIONS：獲取信息，關於資源的哪些屬性是客戶端能夠改變的
8.狀態碼
上翻有
12.關於異步編程
ES 6之前：
-
回調函數（ajax實現異步的原理就是採用了回調函數）
function f1(callback){ setTimeout(function () { // f1的任務代碼 callback(); }, 1000); } f1(f2);問題：多層嵌套很混亂，異常難以捕獲
-
事件驅動/事件監聽 發佈/訂閱模式(觀察者模式)
原理同 回調
-
promise對象
promise模式在任什麼時候刻都處於如下三種狀態之一： 未完成（unfulfilled）、已完成（resolved）和拒絕（rejected） promise對象上的then方法負責添加針對已完成和拒絕狀態下的處理函數。 then(resolvedHandler, rejectedHandler); then方法會返回另外一個promise對象，以便於造成promise管道， 這種返回promise對象的方式可以支持開發人員把異步操做串聯起來
ES 6：
* Generator函數(協程coroutine)
ES 7:
* async和await
13.關於模塊化編程 requirejs seajs commonjs
AMD（Require遵循的規範）define, require
CMD（SeaJS遵循的規範）常用的 API 只有 define, require, require.async, exports, module.exports 這五個
-
promise（commonJS提出的規範）
1.對於依賴的模塊，AMD 是提早執行，CMD 是延遲執行。 不過 RequireJS 從 2.0 開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不一樣） 2.CMD 推崇依賴就近，AMD 推崇依賴前置。
14.關於面向對象
14.1封裝性
JS沒有類，怎麼談封裝呢。有對象，對象有屬性
有構造函數，構造函數有基本屬性值和引用屬性值
函數有prototype原型，能夠實現屬性方法共享
14.2多態性
14.3繼承性
某一對象的實例 賦值給 另外一個對象的原型 實現繼承
構造函數、實例、原型的關係：
var a = function(){...};
var b = new a();//b 是由 a 構造出來的
var c = function(){...};
c.prototype = b;//c 繼承了 a
15.關於跨設備響應式
1.百分比
2.移動端禁viewport縮放功能
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
width：viewport 的寬度，能夠指定一個固定值，如650；或者能夠是device-width，表示設備的寬度 height：和 width 相對應，可指定高度 initial-scale：頁面初始縮放比例(0-1) maximum-scale：容許用戶縮放到的最大比例(0-1) minimum-scale：容許用戶縮放到的最小比例(0-1) user-scalable：用戶是否能夠手動縮放（yes/no）
禁用chrome 自調節字體大小
body {
-webkit-text-size-adjust: 100%;
}
3.CSS3 media queries
@media only screen and (max/min-width/height: 960px) {
/* 樣式定義 */
}
@media only screen and (max-width:500px){
.outDiv {
margin: 0 auto;
}
}
16.關於瀏覽器兼容
簡單總結
css 樣式加前綴 -webkit這樣子的 js 冒泡事件和阻止冒泡
不少見：http://blog.csdn.net/xingxing...
http://blog.csdn.net/comeonj/...
17.關於linux
暫且放兩個連接 以前寫過的：
https://segmentfault.com/a/11...
https://segmentfault.com/n/13...
18. 前端性能優化
- HTTP:減小HTTP請求；解決辦法：合併圖片，合併css,js文件，lazzyload懶加載圖片
- CSS：合理用reflow,repaint:style變一次就reflow一次，所以儘量設一個新的class，改變className，reflow一次
- DOM:減小DOM操做，多用innerHTML一次添加
- JSON格式交換數據，輕量級數據
- css放在頭部，js放在尾部，外部引用
6.CDN內容分發網絡，實時性不太好
相關文章
- 1. 前端面試知識點總結
- 2. 前端面試總結(1)--筆試知識點彙總
- 3. 2019前端面試知識點彙總
- 4. 前端面經知識點總結1
- 5. 前端知識點總結
- 6. 前端知識點 總結
- 7. 前端筆試知識點總結（4）
- 8. 前端筆試知識點總結(5)
- 9. 前端面試知識點
- 10. 前端面試知識總結1
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • Lua 調試(Debug) - Lua 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 算法總結-雙指針
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端面試知識點總結
- 2. 前端面試總結(1)--筆試知識點彙總
- 3. 2019前端面試知識點彙總
- 4. 前端面經知識點總結1
- 5. 前端知識點總結
- 6. 前端知識點 總結
- 7. 前端筆試知識點總結（4）
- 8. 前端筆試知識點總結(5)
- 9. 前端面試知識點
- 10. 前端面試知識總結1