前端知識點總結---面試專用

1.關于基礎css html js部分

1.1基本算法

1）快速排序

時間復雜度 nlogn

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的對數)

二分查找的基本思想是將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個節點逐次插入到第一個節點后，最后將第一個節點挪到新表的結尾

例子為單向鏈表，頭結點為空

時間復雜度：N

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]

尤其注意1，'1'

NaN

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...

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%');
0var str=" 12 er 45 ;; ";str.search(/ /g,'20%');
0var str=" 12 er 45 ;; ";var rexg=/ /;rexg.test(str);
true

1.4 閉包

定義：

  1. 可以訪問外部函數作用于中變量的函數
  2. 被內部函數引用的外部函數的變量保存在外部作用域中而不被回收

優缺點：

優點：

變量私有化

減少全局變量污染

可以讓一個變量常駐內存

缺點：

內存泄漏

閉包會攜帶包含它的函數的作用域，因此會比其他函數占用更多的內存

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/get2）請求的URL3）是否發送異步請求 true/false

注意： 只是啟動，并未發送請求，要調用send

2.xhr.send()

一個參數：必須有參數為http請求的主體post請求一般傳入get請求必須傳入null

發送后得到服務器的響應，響應的數據會自動填充xhr的屬性

responseText,響應主體responseXMLstatus，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-Match400：客戶端的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.jshttp://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-repeatnew 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,POSTGET（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. 前端性能優化

  1. HTTP:減少HTTP請求；解決辦法：合并圖片，合并css,js文件，lazzyload懶加載圖片
  2. CSS：合理用reflow,repaint:style變一次就reflow一次，因此盡可能設一個新的class，改變className，reflow一次
  3. DOM:減少DOM操作，多用innerHTML一次添加
  4. JSON格式交換數據，輕量級數據
  5. css放在頭部，js放在尾部，外部引用

6.CDN內容分發網絡，實時性不太好

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/282782.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/282782.shtml
英文地址，請注明出處：http://en.pswp.cn/news/282782.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

鴻蒙系統大疆,華為操作系統“鴻蒙OS”來了！

鴻蒙系統大疆,華為操作系統“鴻蒙OS”來了！

原標題&#xff1a;華為操作系統“鴻蒙OS”來了&#xff01;8月9日&#xff0c;華為消費者業務CEO余承東在華為開發者大會上如期發布了華為鴻蒙操作系統“HarmonyOS”。據介紹&#xff0c;鴻蒙內核在2017年便完成技術驗證&#xff0c;最初是為了提升操作系統的跨平臺能力而研發…
閱讀更多...
詳述 IntelliJ IDEA 插件的安裝及使用方法

詳述 IntelliJ IDEA 插件的安裝及使用方法

首先&#xff0c;進入插件安裝界面&#xff1a; Mac&#xff1a;IntelliJ IDEA -> Preferences -> Plugins;Windows&#xff1a;File -> Settings -> Plugins.標注 1&#xff1a;顯示 IntelliJ IDEA 的插件分類&#xff0c; All plugins&#xff1a;顯示 IntelliJ …
閱讀更多...
杭漂兩年，深漂兩年，宇宙的盡頭到底在哪兒

杭漂兩年，深漂兩年，宇宙的盡頭到底在哪兒

hi&#xff0c;這里是桑小榆。這次分享的是一位杭漂兩年&#xff0c;深漂兩年的碼農伙伴的經歷。首先他能夠在大學期間就尋找到自己的熱愛并持之以恒值得令人學習。其次他的工作經歷可以說是非常的“程序員”&#xff0c;因為程序員所面對的職業生涯中&#xff0c;所謂的實習&a…
閱讀更多...
侶信即時通訊系統的技術解析

侶信即時通訊系統的技術解析

侶信&#xff1a; 說明&#xff1a; 侶信專業版是面向中小企業和者各類團隊組織內部交流使用工具,可以在互聯網或者局域網中使用。具有豐富的功能&#xff0c;聊天&#xff0c;群組&#xff0c;部門組織&#xff0c;內部朋友圈&#xff0c;以及漂流瓶搖一搖等功能。它可以在局域…
閱讀更多...
Confluence 6 使用 WebDAV 客戶端來對頁面進行操作

Confluence 6 使用 WebDAV 客戶端來對頁面進行操作

下面的部分告訴你如何在不同的系統中來設置原生的 WebDAV 客戶端&#xff0c;這個客戶端通常顯示在你操作系統的文件瀏覽器中&#xff0c;例如&#xff0c;Windows 的 Windows Explorer 或者 Linux 的 Konqueror。在 Mac OSX Finder 中訪問 Confluence你可以成功的連接&#xf…
閱讀更多...
.Net之接口小知識

.Net之接口小知識

目的通過一個簡單的項目&#xff0c;在原來的文章基礎上完善一下常用的幾種WebApi編寫方式以及請求方式&#xff0c;一方面是用于給我一個前端朋友用來學習調用接口&#xff0c;另一方面讓我測試HttpClient的一些效果。本文示例代碼環境&#xff1a;vs2022、net6準備新創建了一…
閱讀更多...
你所不知道的setTimeout

你所不知道的setTimeout

JavaScript提供定時執行代碼的功能&#xff0c;叫做定時器&#xff08;timer&#xff09;&#xff0c;主要由setTimeout()和setInterval()這兩個函數來完成。它們向任務隊列添加定時任務。初始接觸它的人都覺得好簡單&#xff0c;實時上真的如此么&#xff1f;這里記載下&#…
閱讀更多...
android 特效繪圖,Android繪圖機制與處理技巧——Android圖像處理之圖形特效處理...

android 特效繪圖,Android繪圖機制與處理技巧——Android圖像處理之圖形特效處理...

Android變形矩陣——Matrix對于圖像的圖形變換&#xff0c;Android系統是通過矩陣來進行處理的&#xff0c;每個像素點都表達了其坐標的X、Y信息。Android的圖形變換矩陣是一個3x3的矩陣&#xff0c;如下圖所示&#xff1a;72F0CAC1-14FB-40F8-A430-8F542B09DC4E.png當使用變換…
閱讀更多...
WPF 使用 DrawingContext 繪制刻度條

WPF 使用 DrawingContext 繪制刻度條

WPF 使用 DrawingContext 繪制刻度條控件名&#xff1a;Ruler作者&#xff1a;WPFDevelopersOrg原文鏈接&#xff1a; https://github.com/WPFDevelopersOrg/WPFDevelopers框架使用大于等于.NET40&#xff1b;Visual Studio 2022;項目使用 MIT 開源許可協議&#xff1b;定義I…
閱讀更多...
純css實現漂亮又健壯的tooltip

純css實現漂亮又健壯的tooltip

前言 tooltip的實現有多種方式&#xff0c;下面是一個tooltip成長史。 預覽 https://codepen.io/moddx/pen/... 原始版 最簡單的莫過于就用原始title屬性&#xff0c;像這樣&#xff1a; <button title"tips">button</button> 缺點是體驗是差了點&#x…
閱讀更多...
個人中心的html,個人中心.html

個人中心的html,個人中心.html

&#xfeff;個人中心$axure.utils.getTransparentGifPath function() { return resources/images/transparent.gif; };$axure.utils.getOtherPath function() { return resources/Other.html; };$axure.utils.getReloadPath function() { return resources/reload.html; };…
閱讀更多...
使用CMD命令修改Windows本地賬戶密碼

使用CMD命令修改Windows本地賬戶密碼

2019獨角獸企業重金招聘Python工程師標準>>> 一、以管理員身份運行cmd命令 二、在命令提示符窗口中輸入命令符&#xff1a;net user Administrator 123&#xff0c;然后按回車鍵“Enter”。(Administrator是你的win8用戶名&#xff0c;123是重新設置的密碼。) ? 三…
閱讀更多...
Android 編譯時：m、mm、mmm、mma、mmma的區別

Android 編譯時：m、mm、mmm、mma、mmma的區別

m&#xff1a;編譯整個安卓系統 makes from the top of the tree mm&#xff1a;編譯當前目錄下的模塊&#xff0c;當前目錄下需要有Android.mk這個makefile文件&#xff0c;否則就往上找最近的Android.mk文件。 builds all of the moudles in the current directory mma&#…
閱讀更多...
java線程安全問題原因及解決辦法

java線程安全問題原因及解決辦法

1.為什么會出現線程安全問題 計算機系統資源分配的單位為進程&#xff0c;同一個進程中允許多個線程并發執行&#xff0c;并且多個線程會共享進程范圍內的資源&#xff1a;例如內存地址。當多個線程并發訪問同一個內存地址并且內存地址保存的值是可變的時候可能會發生線程安全問…
閱讀更多...
html語言怎么添加圖片,我想問你一下，你是怎么在html中插入本地圖片?非常感謝...

html語言怎么添加圖片,我想問你一下，你是怎么在html中插入本地圖片?非常感謝...

滿意答案小蜜蜂手工2013.10.03采納率&#xff1a;43% 等級&#xff1a;12已幫助&#xff1a;7929人img{float:right}在下面的段落中&#xff0c;我們添加了一個樣式為 float:right 的圖像。結果是這個圖像會浮動到段落的右側。This is some text. This is some text. This i…
閱讀更多...
數組實現矩陣逐層向內層加1

數組實現矩陣逐層向內層加1

package java1701;public class javaMain { public static void main(String[] args) { // 逐層加 // 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 // 1 2 2 2 2 1 1 2 2 2 1 1 2 2 1 1 2 1 // 1 2 3 3 2 1 1 2 3 2 1 1 2 2 1 1 1 1 // 1 2 3 …
閱讀更多...
EntityFrameworkCore上下文如何實現繼承？

EntityFrameworkCore上下文如何實現繼承？

【導讀】如果我們存在基礎設施服務和其他服務&#xff0c;我們會定義屬于基礎設施服務的上下文以及其他服務的上下文&#xff0c; 而且會獨立部署&#xff0c;此時其他服務需要使用基礎服務&#xff0c;我們都會暴露基礎服務接口給到其他服務調用&#xff0c;這也是常規操作若在…
閱讀更多...
Unity 游戲框架搭建 (九) 減少加班利器-QConsole

Unity 游戲框架搭建 (九) 減少加班利器-QConsole

為毛要實現這個工具? 在我小時候,每當游戲在真機運行時,我們看到的日志是這樣的。 沒高亮啊,還有亂七八糟的堆棧信息,好干擾日志查看,好影響心情。 還有就是必須始終連著usb線啊&#xff0c;我想要想躺著測試。。。 以上種種原因,QConsole誕生了。 如何使用? 使用方式和QLog…
閱讀更多...
android藍牙多次后,android – 如何防止BluetoothGattCallback一次多次執行

android藍牙多次后,android – 如何防止BluetoothGattCallback一次多次執行

我的服務有一個BluetoothGattCallback實例public class MyService extends Service {private BluetoothGattCallback callback;Overridepublic void onCreate() {super.onCreate();callback new BluetoothGattCallback() {Overridepublic synchronized void onConnectionState…
閱讀更多...
美觀又實用，10 款強大的開源 Javascript 圖表庫

美觀又實用，10 款強大的開源 Javascript 圖表庫

2019獨角獸企業重金招聘Python工程師標準>>> 隨著發展&#xff0c;現代 Web 設計在改善體驗和功能的同時&#xff0c;對于美觀的追求也越來越高&#xff0c;可視化、交互式、動態等元素和效果似乎已成為標配。 以下是為開發者推薦的 10 款開源 Javascript 圖表庫&am…
閱讀更多...
最新文章

Copyright @ 2022~2023