整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
擊上方藍字關注我們
保持犀利風格，持續科技新聞報道及業界深度剖析
用戶上網找新聞、看直播、打網頁游戲等都要使用瀏覽器，可以說瀏覽器是互聯網時代的入口，是兵家必爭之地，而國產瀏覽器是其中不可忽視的一支重要力量。國產瀏覽器中誰的基本功最扎實、誰的功能設計最貼心呢？不比不知道，下面我們將從多個角度全方面剖析國產瀏覽器！
參測產品
360安全瀏覽器
版本：10.0.1383
360安全瀏覽器是一款“IE內核+Chromium內核”的雙核瀏覽器，擁有全國最大的惡意網址庫，可自動攔截掛馬、欺詐、網銀仿冒等惡意網站。
QQ瀏覽器
版本：10.2.1
QQ瀏覽器前身是騰訊TT瀏覽器，采用“IE內核+Chromium內核”雙核設計，支持QQ快捷登錄，登錄瀏覽器后即可自動登錄騰訊系網頁。
百度瀏覽器
版本: 8.7.5000.4982
百度瀏覽器是一款“IE內核+Chromium內核”雙核瀏覽器，整合了游戲、影視、音樂等熱門應用，另外配置了百度云加速技術，下載百度云資源有提升效果。
搜狗高速瀏覽器
版本: 8.5.0822
搜狗高速瀏覽器是一款“IE內核+Chromium內核”雙核瀏覽器，其首創的“網頁關注”功能可以將內容以訂閱的方式提供給用戶瀏覽。
遨游瀏覽器
版本: 5.02
傲游瀏覽器是最早的雙核瀏覽器，采用“IE內核+Webkit內核”設計，也是全球首家覆蓋微軟、谷歌、蘋果三大平臺體系的瀏覽器廠商。
紅芯企業瀏覽器
版本： 3.0.54
紅芯企業瀏覽器基于Chromium內核，其主攻的是企業用戶，幫助企業更好的進行用戶認證、安全管控、入口統一和保護數據。
測試環境
CPU：Intel 酷睿i3 4160 3.6GHz
內存：4GB
顯卡：NVIDIA GeForce GT 630
硬盤：1TB
寬帶：100MB
操作系統：Windows 10專業版（64位）
備注：為了貼近真實使用環境，在測試電腦中安裝了QQ、Office等必備軟件，關閉了Windows 10自帶的殺毒軟件。
測試方案
瀏覽器橫測分為兩個部分，先進行被動的專業性測試，也就是訪問專業評測網站，網站自動給出瀏覽器的得分或者測試結果，這部分是數據評測；之后再進行主動評測，也就是體驗瀏覽器的易用性。
專業性測試部分分為CSS支持測試、JavaScript性能測試、Acid3測試、圖形加速測試和HTML5兼容性測試這五項，沒有加入測試瀏覽器打開速度的單頁加載速度測試，為何不加入呢？主要是因為干擾因素很多，在工作或生活中不大可能只運行一個程序，如果有QQ、下載軟件、音樂軟件等在運行就會形成較大的干擾，會出現同一臺電腦不同時刻測試的數值不同的情況，再加上現在的網速一般很快，多數網頁是不到1秒就打開了，不同瀏覽器的打開速度快慢主觀是體驗不大的——不光網速很快，現在電腦的硬件也不錯了，10年前需要進行瀏覽器橫測要進行CPU和內存的資源占用情況，如今已經毫不必要了，這兩項我們也不再進行測試。
主動評測部分，體驗頁面設計是否清爽、有無廣告、有無默認首頁、是否推新聞、是否有人性化設計、插件是否豐富、有無特色功能等。我們認為，一款優秀的瀏覽器應該有自己的獨門絕技才可以從同質化競爭中脫穎而出。
測試項目1：CSS支持
測試項目2：JavaScript性能
測試項目3：Acid3兼容性
測試項目4：圖形加速
測試項目5：HTML5兼容性
測試項目6：人性化體驗
測試項目7：實用性體驗
CSS支持：全部合格
測試方案：CSS的英文全稱是Cascading Style Sheets，中文意思是層疊樣式表，用來展示網頁的顯示樣式和效果，例如網頁采用何種布局、文字采用何字體和顏色、背景選用何種圖片和顏色，展示何種網頁特效等，因此瀏覽器對CSS的支持程度決定了能正確顯示的網頁種類。
本輪測試我們使用的是專業測試網站CSS3 Selectors Test。
網址http://www.css3.info/selectors-test，它總共有574項測試，主要涉及盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等項目，通過項目越多瀏覽器支持CSS的性能就越好。
結果分析：6款參測瀏覽器全部通過574項測試都是合格的，CSS標準升級到CSS 3各大瀏覽器也隨之進行了更新，可見有足夠的重視，基本功都很扎實。在測試中我們發現通過的速度不一樣，QQ瀏覽器的響應時間最短，應該跟其使用的是最新版Chrome 63的內核以及自行進行了相關的優化有關。
JavaScript性能：QQ瀏覽器稍勝一籌
測試方案：JavaScript一種計算機腳本語言，是瀏覽器的重要組成部分（JavaScript引擎），也是網頁的重要元素，經常用來為網頁增加動態功能，因此一款優秀的瀏覽器必須較好地支持JavaScript，如此一來用戶才可以得到更流暢的網頁瀏覽效果。
本輪測試我們使用的是專業測試網站SunSpider JavaScript Benchmark（1.1版），網址是https://webkit.org/perf/sunspider/sunspider.html。
它設計了大量JavaScript實際生活中可能碰到的問題，如果瀏覽器可以解決的JavaScript問題越多，得分就會越低，瀏覽器就越優異。
結果分析：這項測試如果使用3年前的瀏覽器版本，所有瀏覽器的分值都要超過200（分值集中在250~300），如今6款參測瀏覽器的分值都在200以下，可謂進步不小。本輪測試，QQ瀏覽器排名第一，傲游瀏覽器和360安全瀏覽器分列第二第三，紅芯企業瀏覽器居然不是末位到是令人有點意外。
JavaScript性能測試
Acid3兼容性：全部合格
測試方案：Acid3是一個測試網頁兼容性的標準，它測試焦點集中在ECMAScript、DOM Level 3、Media Queries等，是目前Web基準測試中最嚴格的。本輪測試我們使用的是專業測試網站Acid3，網址是http://acid3.acidtests.org，測試總分為100分，如果未通過測試左上角有紅色字顯示，得分越高瀏覽器的兼容性就越好。
結果分析：測試中出現了意想不到的情況，僅有百度瀏覽器、紅芯企業瀏覽器獲得100完美通關瀏覽器兼容性測試，而搜狗高速瀏覽器得分99，360安全瀏覽器、傲游瀏覽器和QQ瀏覽器得分都是97，難道后四款瀏覽器的兼容性真的這么差？開啟后四款瀏覽器的兼容模式（也就是啟用IE內核），全部順利通關兼容性測試。按道理雙核瀏覽器會智能切換內核，不過碰到專業測試網站Acid3出現了意外，我們從網上下載了10年前的建站程序Discuz特制了10個過時網頁逐一測試搜狗高速瀏覽器、360安全瀏覽器、傲游瀏覽器和QQ瀏覽器，瀏覽器都順利展示了網頁，兼容模式都順利切換了，也就是說在實際生活中應該不受影響。
圖形加速：360、QQ相對更優異
測試方案：玩網頁游戲或者社交平臺上的小游戲，看網頁中的視頻或直播對圖形加載都有較高的要求，很是考驗瀏覽器處理頁面圖形的能力，如果瀏覽器圖形加速不給力用戶就會有卡的感覺。本輪測試我們使用的是專業測試網站FishIETank，網址是https://testdrive-archive.azurewebsites.net/performance/fishietank，統一設置為1000條魚彩色魚在頁面亂竄，等10秒數據穩定后觀察幀數，幀數越高說明瀏覽器的圖形加速越快性能來越好。
結果分析：6款參測瀏覽器的幀數全部達到60幀，全部通過圖形加速測試。如果使用3年前的瀏覽器版本，沒有一款瀏覽器的幀數可以超過40幀，有的瀏覽器甚至會出現極端卡頓的情況，如今這些狀況都沒有了——雖然幀數值是一樣的，但從0~60的過程速度卻不一樣，明顯360安全瀏覽器和QQ瀏覽器響應速度更快一些。
這是因為360安全瀏覽器和QQ瀏覽器使用的都是Chrome 63版的內核，傲游瀏覽器使用的是Chrome 61版的內核，搜狗高速瀏覽器使用的是Chrome 58版的內核，紅芯企業瀏覽器使用的是Chrome 49版的內核，百度瀏覽器使用的是Chrome 47版的內核，如此一來也解釋了百度瀏覽器和紅芯企業瀏覽器在Acid3兼容性上表現優異的原因是因為使用的是低版本的Chrome 內核。
HTML5兼容性：360安全瀏覽器稍勝一籌
測試方案：HTML5是超文本標記語言（HTML）的第五次重大修改，是下一代網頁技術的標準，越來越多網站拋棄傳統的Flash技術轉而使用HTML5，因此瀏覽器較好地支持HTML5就顯得尤為重要了。本輪測試我們使用的是專業測試網站Html5test，網址是Html5test.com，訪問該網站等待數秒鐘就可以得到一個分數，總分是555，得分越高說明瀏覽器支持的HTML5項目越多表現越優異。
結果分析：6款參測瀏覽器得分最高的是520分的360安全瀏覽器，其次是518分的傲游瀏覽器、517分的QQ瀏覽器和516分的搜狗高速瀏覽器，516~518分值相差太小。
因此我們可以說本輪測試360安全瀏覽器稍勝一籌，傲游瀏覽器、QQ瀏覽器和搜狗高速瀏覽器處于緊隨其后，而百度瀏覽器和紅芯企業瀏覽器的跟上述四款瀏覽器相差較大，還需進一步優化對HTML5的兼容性。
人性化體驗:都有改進空間
測試方案：一款人性化好的瀏覽器應該具備如下特征：頁面清爽沒有亂七八糟的推廣內容或者廣告、有強力的廣告過濾功能、收藏方便且可以云同步、支持斷點續傳等。本輪測試，我們認為人性化特征越多瀏覽器就越優異。
結果分析：6款參測瀏覽器在人性化設計上跟國外瀏覽器比有一定的差距，特別是對喜歡簡潔風的用戶來說很不適應，當然如果就喜歡內容豐富那就另當別論了。
360瀏覽器在安裝時可以選擇自定義安裝，就可以取消默認設置的首頁360導航，打開一個新標簽自動展示的是360搜索頁面，可以直接搜索相關內容，會彈出購物廣告和熱點資訊，熱點資訊會針對用戶所在城市進行有針對性的智能推薦，如果不喜歡這些怎么辦，好在360瀏覽器允許用戶進入瀏覽器設置頁面，取消“今日優選”“今日直播”“360熱點資訊”“快資訊”“狀態欄消息”等，如果再取消側邊欄、狀態欄、插件欄和顯示頭像登錄框整個頁面就清爽了。
QQ瀏覽器的默認首頁是2345導航，打開一個新標簽自動展示的是搜狗搜索，且會在收藏夾中自動添加騰訊系的網頁標簽，便于用戶今后快捷訪問騰訊系網站，雖然這也算是推廣廣告，但嚴格來說絕大多數網民在生活中離不開騰訊系網站，實用性相對較高；點擊“設置”，點擊“廣告過濾”，點擊“立即安裝”，就可以安裝強力廣告過濾插件Adblock Plus，點擊側邊欄的微信圖標安裝微信程序，今后就可以在瀏覽器中愉悅地跟微信好友聊天呢，這兩個步驟是一定要做的；當然，我們也可以通過設置頁面取消亂側邊欄等讓界面更清爽。
百度瀏覽器的極光色皮膚是真的炫；默認首頁是hao123導航，打開一個新標簽自動展示的百度搜索，在收藏夾中自動添加購物、視頻等網頁；廣告過濾不需要安裝插件，是標配功能，不過默認是“輕度攔截”需要手動調整為“強力攔截”。
搜狗高速瀏覽器的默認首頁是搜狗網址導航，打開一個新標簽自動展示的是搜狗搜索，也會在收藏夾中自動添加網頁，不過添加的網頁多了一個種類，那就是網絡小說；標配了廣告過濾功能，也可以安裝第三方廣告過濾效果更好的插件。
傲游瀏覽器有點特殊，安裝后第一時間呈現的是賬號注冊頁面，需要用手機號碼注冊，如果不想注冊就要在頁面底部點擊“跳過登錄”就可以正常使用了，這個設計太僵硬不會討用戶喜歡的；默認首頁是傲游今日，這是一個集合“百度搜索+網址導航+廣告推廣”的綜合頁面。
紅芯企業瀏覽器基本上沿用Chrome的布局，只不過在頂部多了一個名稱欄，顧名思義就是一直顯示“紅芯企業瀏覽器”這個名稱，是6款瀏覽器中唯一一個凸顯名稱的瀏覽器，其實這個設計毫不必要；斷點續傳不是自動支持的，可以手動操作，要定位到“恢復下載功能”，點擊“啟用”，再點擊“立即重新啟動”，這沿用的是Chrome的設定。
總的來說，國產瀏覽器比較看重流量導入，在人性化方面都有改進的空間。
其默認首頁是企業內部登錄入口
實用性體驗:各有側重點
測試方案：一款實用性好的瀏覽器應該具備如下特征：智能攔截釣魚網站阻止用戶掉入入詐騙陷阱，即時掃描下載文件一旦發現病毒即可報警提示，支持屏幕截圖，支持無痕瀏覽、搜索關鍵詞歷史訪問記錄……本輪測試，我們認為實用性特征越多瀏覽器就越優異。
結果分析：6款參測瀏覽器都自帶有完美防假死功能，一個頁面崩潰不好會導致瀏覽器崩潰，另外6款參測瀏覽器也都支持無痕瀏覽，也就是不記錄上網記錄、不記錄個人搜索信息、不保存賬號和密碼、禁止網頁的廣告程序記錄用戶的使用習慣等，不過設置操作不一樣，360安全瀏覽器和QQ瀏覽器相對操作更簡便一些。
在安全防護方面，6款參測瀏覽器的差距就提現出來了，僅360安全瀏覽器和QQ瀏覽器可以提供全方面立體防護，360安全瀏覽器可以配合360安全衛士將防護等級和范圍做到最大，QQ瀏覽器可以配合騰訊電腦管家將防護等級和范圍做到最大，而剩下的4款瀏覽器只能單打獨斗。
如果不考慮安全軟件，單論瀏覽器的安全防護，360安全瀏覽器和QQ瀏覽器也是占優的，因為這兩款瀏覽器具有多層防護能力——在URL層，可以依靠龐大的惡意網址庫快速、準確攔截掛馬網站、釣魚網站、欺詐網站等，且這個操作是有遠程服務器承擔，不會給用戶電腦帶來任何負擔。
由于360和騰訊的用戶數量龐大、搜集惡意網站是輕而易舉的事情，因此擁有強者恒強的優勢；如果惡意網站突破了URL層，那么第二道防線就是惡意腳本攔截層，瀏覽器機會嘗試攔截網頁中的惡意腳本，阻止惡意腳本進入用戶的電腦下載盜號病毒、勒索病毒和挖礦病毒等。
如果黑客使用了最新的漏洞或者免殺技術就有可能突破第二道防線，那么在下載時瀏覽器自動識別下載源是不是來自木馬服務器、惡意服務器，如果地址吻合就阻止下載。例如仿冒騰訊QQ郵箱www.rhsox.cn/menber/ceshi01。在截稿時就QQ瀏覽器和360安全瀏覽器可以攔截。
攔截仿冒網站
在屏幕截圖和插件方面，除了紅芯企業瀏覽器其余瀏覽器的表現都不錯，截圖很智能可以實現按截圖時間自動保存，也可以將網頁保存為圖片——傲游瀏覽器截圖功能不在一級頁面，而是在二級頁面，需要點擊“自定義快捷工具欄”，選擇“截圖”，另外插件入口也不一樣，點擊左下角的“設置”，選擇“獲得更多應用”才可以看到豐富的插件。紅芯企業瀏覽器沒有截圖功能，插件入口也沒有，這也可以理解畢竟就算保留了入口也無法直接訪問Chrome應用商店。
在特色功能方面，就各有所長了。360安全瀏覽器細分的安全防護項目較多考慮很周到，嵌入互聯網理財平臺，方便用戶購買到可靠的互聯網理財產品；QQ瀏覽器可以用QQ賬號登錄，享受騰訊系產品的一切便利和好處，例如騰訊翻譯君功能，劃詞翻譯、手動輸入翻譯、網頁自動識別并全文翻譯、文檔翻譯等都可以做到快速準確。
百度瀏覽器的積分兌換功能很實用，每天登錄瀏覽器獲得積分，攢到一定數量后就去百度瀏覽器積分商城中，兌換愛奇藝黃金會員、百度文庫VIP、百度云盤VIP、電影抵用券、京東全場滿減券等好東西。
另外百度瀏覽器可以對迅雷、快車、旋風的專用鏈進行自動轉換，獲取真實鏈接一鍵搞定下載。
傲游瀏覽器的資源嗅探功能很不錯，可以快速找出頁面中全部圖片、內嵌視頻音頻文件并一鍵下載，另外傲游筆記功能也不錯可以同步各種數據，新標簽頁設計的動感且符合Chrome的使用習慣；搜狗高速瀏覽器的片頭雷達很不錯，美劇和動漫正片開始的位置通常是不固定的，而等待片頭結束又浪費很多時間，片頭雷達功能利用大數據查找片頭，無論是國產劇、美劇、英劇還是動漫，都能為用戶準確找到片頭位置，跳過片頭節省時間，另外打假助手功能也做得不錯，智能提取網友購物真實評價，通過大數據展現商品歷史價格；紅芯企業瀏覽器支持國密算法加密傳輸以及在企業端的內容監控。
總結
明：
該文章為學習使用，嚴禁用于商業用途和非法用途，違者后果自負，由此產生的一切后果均與作者無關
一、瑞數簡介
瑞數動態安全 Botgate（機器人防火墻）以“動態安全”技術為核心，通過動態封裝、動態驗證、動態混淆、動態令牌等技術對服務器網頁底層代碼持續動態變換，增加服務器行為的“不可預測性”，實現了從用戶端到服務器端的全方位“主動防護”，為各類 Web、HTML5 提供強大的安全保護。
二、瑞數特點
三、瑞數5特點
四、找出需要加密的參數
五、瑞數5 cookie 分析
六、補環境
// 代理器封裝
function getEnv(proxy_array) {
for(var i=0; i<proxy_array.length; i++){
handler=`{\n
get: function(target, property, receiver) {\n
console.log('方法：get',' 對象：${proxy_array[i]}',' 屬性：',property,' 屬性類型：',typeof property,' 屬性值類型：',typeof target[property]);
return target[property];
},
set: function(target, property, value, receiver){\n
console.log('方法：set',' 對象：${proxy_array[i]}',' 屬性：',property,' 屬性類型：',typeof property,' 屬性值類型：',typeof target[property]);
return Reflect.set(...arguments);
}
}`;
eval(`
try{\n
${proxy_array[i]};\n
${proxy_array[i]}=new Proxy(${proxy_array[i]},${handler});
}catch(e){\n
${proxy_array[i]}={};\n
${proxy_array[i]}=new Proxy(${proxy_array[i]},${handler});
}
`)
}
}
// proxy_array=['window', 'document', 'location', 'navigator', 'history','screen','target' ]
// getEnv(proxy_array)
module.exports=getEnv七、python代碼驗證結果
八、最終代碼
delete __dirname
delete __filename
var getEnv=require('./jsProxy')
//補window環境
window=global
window.top=window
window.addEventListener=function (event) {
console.log('window中的addEventListener接受的值:', event)
}
//補document
div={
getElementsByTagName: function (res) {
console.log('div中的getElementsByTagName接受的值:', res)
if (res=='i') {
return {length: 0}
}
}
}
meta={
0: {},
1: {
// content: '{qqiWR9xjADLqtZr.GKDUqs39vLCd6fuDojxTsXPqq|[MOVUqGS9kDwYAY2MHmG8qqenYagvFTYnqaVRkcNykUE2QpL1UOm3DmV.UaxMHf24DULSwPQ.o1WoFaQ0osgoFcNzHGWFl1x7iueMEnWPYsGUinpbxrEUmkAWiA36crg6r1VwErNIEG9BVaVFkaqEkf9kra7lrS9tYs3eEPaaxSeIEA9HkkfRiYYWHS7gkPZdkrEPtnQwYs3.eahnr50RXqCjtH09dcbnU7yq4AOBU4TRXVkvoMVtL1OLxi7NNT4YAHqEZm5GKFxqZfCPrWTwLGBbkWL54mK.oiLLSmOEEieM2f_8iwg4amB1DX0kaTVQrgEnzs8CJMW67uDuJ.35XOKaH.0ac80{AVhRPOD1oF7LTncUsEzy56uo8iJ7aOK.T3d7d7kbbH.qS7sbNHjwPZbUgFjASBsb.WM9dBo_PH_LpL1cfl4096k162hsQioxBGHtAihVlwBPeCtEe8.qfQg.wHVg9MepzcbGPT1sAl.orvE_e5EwA2MzQ9Wbt9r1r0r4q!x7z,aac,amr,asm,avi,bak,bat,bmp,bin,c,cab,css,csv,com,cpp,dat,dll,doc,dot,docx,exe,eot,fla,flc,fon,fot,font,gdb,gif,gz,gho,hlp,hpp,htc,ico,ini,inf,ins,iso,js,jar,jpg,jpeg,json,java,lib,log,mid,mp4,mpa,m4a,mp3,mpg,mkv,mod,mov,mim,mpp,msi,mpeg,obj,ocx,ogg,olb,ole,otf,py,pyc,pas,pgm,ppm,pps,ppt,pdf,pptx,png,pic,pli,psd,qif,qtx,ra,rm,ram,rmvb,reg,res,rtf,rar,so,sbl,sfx,swa,swf,svg,sys,tar,taz,tif,tiff,torrent,txt,ttf,vsd,vss,vsw,vxd,woff,woff2,wmv,wma,wav,wps,xbm,xpm,xls,xlsx,xsl,xml,z,zip,apk,plist,ipaqqqqqqqqqqqqqqkRxA1WYW8i2ZaYc0IH9V_UAlwSf3|gYBRPSpKnWLGmzpn1RFgTvfn.WMN2nKrBqVWPwqrME6aBAcYAxK7XifNgJ9qoIDrOhYVmscevR1Qa3rJyk2QrpCg4rYlO8OZfH6qvFCY8H209hArJH6q1VnpSrlaPkAxixrTXpaEYh2ZXAfJ4JoABM1TUmKV0p1w6lTaAFbYgEArBRbVr393oFOmsRvqi8DwDEYpOFkzaRuL9ECQFHfAFhcyeEqLuhcQr3al2qpe5oO7YraggcozOmq06MaQaWcW5HOqD3aEPhnL4hrVNECWVlGqJ3C0IMkzUomlrq 0wR7HvJ6IsUC410DntKRngA;QyqA82EGtIB6ePNEeYo9NG;iEm6gdSTTpYiqU10OlvsnG;yMG8gk5okQ97gP4eb.IadA;T8F36FaS9AtR4sXBkRr0iG;RTlM3IYjAzboXbIiNSIFRA;t7_svh3Kc3.VU9jOjAJgdq;.8D9Zx78FrKF.Zn4xbfmIG;IMhCM7gXESIqShs5TNMo9A;pvBPF7OtrK6trS5vZYizwa;9qxqLXuEeDQeAlNfAL_l.A;VNeyFcNDtQZhV2sfCxyHqA;kT4JL2WRSOhvUIEcOjSrva;LpFhLGWYI8eFx_X999MLEq;NqssQaVItFB0TevtNxJrkG;AI3RN3R7lP0BBnYsoCO5KG;xrYRhwM6FYW7zCsPL.iecq;0kOXzZzt1eXLrlPo.QQ4xG;ApKNqLIRoybF5rIxSnabBG;hfgZrtz_KscdFC6a3f1wKA;Ddfe167m26649h_g.S8UKVgXBt1074790432r0YQLJiVGhVajrMQpjFqUZuNqV80Tt89zds6ycR9fGsCNkl3650r0q}!DBEbb61kMgq_GKiDIZLg9oiwINe0CsjYI7qgLVKAwKS03oewpcl4FvNLIO7y1Tff8kgLIo2mtKfXR6JJw6Y_YTwPJKJxRTp2FUNdsvSGFU2gYvm7YUlP16wcwTJjWYNC36rssnfssmwnM0eVKbYnVvZFwTxcov2N1Dx0MKEKUCfl1YLAi0Y_KDyAxfA7VnfnQ9fZKcfIsvwaIDWDEvy5tmVaiUaqqqqqqqqqqqqqq',
content:'meta_content',
parentNode: {
removeChild: function (tag) {
console.log('meta中的removeChild接受的值:', tag)
}
}
},
length: 2
}
script={
0: {
getAttribute: function (attr) {
if (attr=='r') {
return 'm'
} else {
console.log('script-0中的getAttribute接受的值:', attr)
}
},
parentElement: {
removeChild: function (tag) {
console.log('script-0中的removeChild接受的值:', tag)
}
}
},
1: {
getAttribute: function (attr) {
if (attr=='r') {
return 'm'
} else {
console.log('script-1中的getAttribute接受的值:', attr)
}
},
parentElement: {
removeChild: function (tag) {
console.log('script-1中的removeChild接受的值:', tag)
}
}
},
length: 2
}
document={
createElement: function (tag) {
if (tag=='div') {
return div
} else {
console.log('document中的createElement接受的值:', tag)
return {}
}
},
getElementsByTagName: function (tag) {
if (tag=='meta') {
return meta
} else if (tag=='script') {
return script
} else {
console.log('document中的etElementsByTagName接受的值:', tag)
return {}
}
},
addEventListener: function (event) {
console.log('addEventListener中的addEventListener接受的值:', event)
}
}
//補location
location={
"href": "http://www.fangdi.com.cn/index.html",
"origin": "http://www.fangdi.com.cn",
"protocol": "http:",
"host": "www.fangdi.com.cn",
"hostname": "www.fangdi.com.cn",
"pathname": "/index.html",
}
proxy_array=['window', 'document', 'location', 'navigator', 'history', 'screen', 'target']
getEnv(proxy_array)
setTimeout=function () {}
setInterval=function () {}eb前端技術由html、CSS和JavaScript三大部分構成，是一個龐大而復雜的技術體系，其復雜程度不低于任何一門后端語言。而我們在學習它的時候往往是先從某一個點切入，然后不斷地接觸和學習新的知識點，因此對于初學者很難理清楚整個體系的脈絡結構。本文將對Web前端知識體系進行簡單的梳理，對應的每個知識點點到為止，不作詳細介紹。目的是幫助大家審查自己的知識結構是否完善，如有遺漏或不正確的地方，希望共勉。
JAVASCRIPT 篇
0、基礎語法
Javascript基礎語法包括：變量定義、數據類型、循環、選擇、內置對象等。
數據類型有string,number,boolean,null,undefined,object等。其中，string,number和boolean是基礎類型,null和undefined是JS中的兩個特殊類型,object是引用類型。
Javascript可以通過typeof來判斷基礎數據類型，但不能夠準確判斷引用類型, 因此需要用到另外一個方法，那就是Object的toString,關于數據類型及其判斷可以參考以下博客：數據類型詳解 和 判斷JS數據類型的四種方法
JS常用的內置對象有Date、Array、JSON,RegExp等。 一般來講，Date和Array用的最頻繁，JSON可以對對象和數組進行序列化和反序列化，還有一個作用就是實現對象的深拷貝。
RegExp即正則表達式，是處理字符串的利器。 關于數據類型和正則表達式的介紹可以參考博客：ES5對數組增強的9個API 和 JS正則表達式精簡
1、函數原型鏈
Javascript雖然沒有繼承概念，但Javascript在函數Function對象中建立了原型對象prototype，并以Function對象為主線，從上至下，在內部構建了一條原型鏈。
簡單來說就是建立了變量查找機制，當訪問一個對象的屬性時，先查找對象本身是否存在，如果不存在就去該對象所在的原型連上去找，直到Object對象為止，如果都沒有找到該屬性才會返回undefined。
因此我們經常會利用函數的原型機制來實現JS繼承。關于函數原型鏈可參考博客：JS原型對象和原型鏈
2、函數作用域
函數作用域就是變量在聲明它們的函數體以及這個函數體嵌套的任意函數體內都是有定義的。在JS中沒有會塊級作用域，只有函數作用域，因此JS中還存在著另外一種怪異現象，那就是變量提升。關于作用域的介紹請參考博客：函數的作用域和作用域鏈
3、函數指針 this
this 存在于函數中，它指向的是該函數在運行時被調用的那個對象。在實際項目中，遇到this的坑比較多，因此需要對this作深入的理解。
Function對象還提供了call、apply和bind等方法來改變函數的this指向，其中call和apply主動執行函數，bind一般在事件回調中使用，而call和apply的區別只是參數的傳
遞方式不同。關于call,apply和bind的用戶請參考博客：詳解JS的call,apply和bind
4、構造函數 new
JS中的函數即可以是構造函數又可以當作普通函數來調用，當使用new來創建對象時，對應的函數就是構造函數，通過對象來調用時就是普通函數。
普通函數的創建有：顯式聲明、匿名定義、new Function() 等三種方式。
當通過new來創建一個新對象時，JS底層將新對象的原型鏈指向了構造函數的原型對象，于是就在新對象和函數對象之間建立了一條原型鏈，通過新對象可以訪問到函數對象原型prototype中的方法和屬性。new的詳細介紹請參考博客：理解JS中的new運算符
5、閉包
閉包其實是一個主動執行的代碼塊，這個代碼塊的特殊之處是可以永久保存局部變量，但又不污染全局變量，可以形成一個獨立的執行過程，因此我們經常用閉包來定義組件。關于閉包的介紹請參考：干貨分享：讓你分分鐘學會JS閉包
6、單線程和異步隊列
setTimeout和setInterval是JS內置的兩個定時器，使用很簡單，但這兩個方法背后的原理卻不簡單。
我們知道，JS是單線程語言，在瀏覽器中，當JS代碼被加載時，瀏覽器會為其分配一個主線程來執行任務(函數)，主線程會形成一個全局執行環境，執行環境采用棧的方式將待執行任務按順序依次來執行。
但在瀏覽器中有一些任務是非常耗時的，比如http請求、定時器、事件回調等，為了保證其他任務的執行效率不被影響，JS在執行環境中維護了一個異步隊列(也叫工作線程)，并將這些任務放入隊列中進行等待，這些任務的執行時機并不確定，只有當主線程的任務執行完成以后，才會去檢查異步隊列中的任務是否需要開始執行。這就是為什么setTimeout(fn,0) 始終要等到最后執行的原因。關于單線程和異步隊列問題請參考：setTimeout（0）
7、異步通訊 Ajax技術
Ajax是瀏覽器專門用來和服務器進行交互的異步通訊技術，其核心對象是XMLHttpRequest,通過該對象可以創建一個Ajax請求。為了防止XSS攻擊，瀏覽器對Ajax做了限制，不允許Ajax跨域請求服務器,就是只能訪問當前域名下的url。
當然，如果確信你的站點不存在跨域的風險，可以在服務端主動開啟跨域請求。 也可以直接通過CORS或JSONP來實現。
JSONP是利用腳本(script)跨域能力來模擬Ajax請求。
CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。 關于CORS的介紹請參考：跨域資源共享 CORS 詳解
8、DOM對象 document
document對象里保存著整個web頁面dom結構，在頁面上所有的元素最終都會映射為一個dom對象。 document也提供了很多api來查找特定的dom對象，比如getElementById,querySelector等等。
9、事件系統 Event
事件是用戶與頁面交互的基礎，到目前為止，DOM事件從PC端的 鼠標事件(mouse) 發展到移動端的 觸摸事件(touch) 和 手勢事件(guesture)
由于DOM結構可能會多層嵌套，因此也衍生出了兩種事件流：事件捕獲和事件冒泡，后者最常用。利用事件冒泡機制可以實現很多功能，比如頁面點擊統計。關于兩種事件流的介紹請參考：事件冒泡和捕獲
除此之外，在頁面初始化、滾動、隱藏、返回等操作時分別內置了onload/onDOMContentLoaded、onscroll、onvisibility和onhashchange等事件，如果想要捕獲這些事件，需要通過addEventLisener/attachEvent來進行綁定。
10、全局對象 window
在JS中，當一段JS代碼在瀏覽器中被加載執行，JS引擎會在內存中構建一個全局執行環境，執行環境的作用是保證所有的函數能按照正確的順序被執行，而window對象則是這個執行環境中的一個全局對象，window對象中內置了很多操作api和對象，document對象就是其中一個。關于JS執行環境的介紹請參考博客：深入理解JS執行細節
CSS 篇
css是用來對html進行修飾的一門語言。
1、選擇器
css的選擇器有很多種，常用的有類選擇器、標簽選擇器、ID選擇器、后代選擇器、群組選擇器、偽類選擇器(before/after)、兄弟選擇器(+~)、屬性選擇器等等。
2、定位 position
定位一般有相對定位(relative)、絕對定位(absolute)、固定定位(fixed)，relative和absolute在移動端用的最多，fixed 在移動端有兼容性問題，因此不推薦使用，在移動端替代fixed的方案是 absolute+內部滾動。
3、浮動 float
設置float為left或right，就能使該元素脫離文檔流，向左或向右浮動。一般在做宮格模式布局時會用到，如果子元素全部設置為浮動，則父元素是塌陷的，這時就需要清除浮動，清除浮動的方法也很多，常用的方法是在元素末尾加空元素設置clear:both, 更高級一點的就給父容器設置before/after來模擬一個空元素，還可以直接設置overflow:auto/hidden。除過浮動可以實現宮格模式，行內盒子(inline-block)和table也可以。
4、盒子模型 Box
盒子模型是css最重要的一個概念，也是css布局的基石。 常見的盒子模型有塊級盒子(block)和行內盒子(inline-block)，盒子最關鍵的幾個屬性包括margin、border、padding和content,這幾個元素可以設置盒子和盒子之間的關系以及盒子和內容之間的關系。還有一個問題是計算盒子的大小，需要注意的是，box-sizing屬性的設置會影響盒子的width和height。只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。
5、彈性布局 Flex
Flex布局的容器是一個伸縮容器，首先容器本身會更具容器中的元素動態設置自身大小；然后當Flex容器被應用一個大小時（width和height），將會自動調整容器中的元素適應新大小。Flex容器也可以設置伸縮比例和固定寬度，還可以設置容器中元素的排列方向（橫向和縱向）和是否支持元素的自動換行。有了這個神器，做頁面布局的可以方便很多了。注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
6、過渡 Transition 、旋轉 Transform
應用transform可以對元素進行平移(translate)、旋轉(rotate)、放大縮小(scale)、傾斜(skew)等處理，而transition使css屬性值(包括transform)在一段時間內平滑的過渡。使用transition和transform就可以實現頁面的滑動切換效果。
7、動畫 Animation
Animation首先需要設置一個動畫函數，然后以這個動畫的方式來改變元素的css屬性之的變化，動畫可以被設置為永久循環演示。 和transition相比，animation設置動畫效果更靈活更豐富，二者還有一個區別是：transition只能通過主動改變元素的css值才能觸發動畫效果，而animation一旦被應用，就開始執行動畫。
8、雪碧圖 sprite
對于大型站點，為了減少http請求的次數，一般會將常用的小圖標排到一個大圖中，頁面加載時只需請求一次網絡， 然后在css中通過設置background-position來控制顯示所需要的小圖標。
9、字體圖標 iconfont
所謂字體圖標就是將常用的圖標轉化為字體資源存在文件中，通過在CSS中引用該字體文件，然后可以直接通過控制字體的css屬性來設置圖標的樣式，字體圖標的好處是其不受屏幕分辨率的影響，并且可以任意修改圖標的顏色。
HTML 篇
1、Web語義化 和 SEO
html 常規標簽有html,head,body,div,span,table,ul,ol,dl,p,b,h1~h6,strong,form,input,img,em,i 等等，另外html5 還新增了很多語義化的標簽，比如
header,acticle,aside,section,footer,audio,radio 等等。
Web語義化是指使用語義恰當的標簽，使頁面有良好的結構，頁面元素有含義，能夠讓人和搜索引擎都容易理解。
SEO是指在了解搜索引擎自然排名機制的基礎之上，對網站進行內部及外部的調整優化，改進網站在搜索引擎中關鍵詞的自然排名，獲得更多的展現量，吸引更多目標客戶點擊訪問網站，從而達到互聯網營銷及品牌建設的目標。
搜索引擎通過爬蟲技術獲取的頁面就是由一堆html標簽組成的代碼,，人可以通過可視化的方式來判斷頁面上哪些內容是重點，而機器做不到。 但搜索引擎會根據標簽的含義來判斷內容的權重，因此，在合適的位置使用恰當的標簽，使整個頁面的語義明確，結構清晰，搜索引擎才能正確識別頁面中的重要內容，并予以較高的權值。比如h1~h6這幾個標簽在SEO中的權值非常高，用它們作頁面的標題就是一個簡單的SEO優化。
2、頁面渲染機制
頁面渲染就是瀏覽器的渲染引擎將html代碼根據CSS定義的規則顯示在瀏覽器窗口中的過程。大致工作原理如下：
3、重繪和回流
當渲染樹中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流。比如上面的img文件加載完成后就會引起回流，每個頁面至少需要一次回流，就是在頁面第一次加載的時候。
當渲染樹中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪。
從上面可以看出，回流必將引起重繪，而重繪不一定會引起回流。
會引起重繪和回流的操作
4、本地存儲
本地存儲最原始的方式就是 cookie,cookie 是存放在本地瀏覽器的一段文本，數據以鍵值對的形式保存，可以設置過期時間。 但是 cookie 不適合大量數據的存儲，因為每請求一次頁面，cookie 都會發送給服務器，這使得 cookie 速度很慢而且效率也不高。因此cookie的大小被限制為4k左右(不同瀏覽器可能不同,分HOST)，如下所示：
在所有瀏覽器中，任何cookie大小超過限制都被忽略，且永遠不會被設置。
html5提供了兩種在客戶端存儲數據的新方法：localStorage 和 sessionStorage, 它們都是以key/value 的形式來存儲數據，前者是永久存儲，后者的存儲期限僅限于瀏覽器會話(session),即當瀏覽器窗口關閉后，sessionStorage中的數據被清除。
localStorage的存儲空間大約5M左右(不同瀏覽器可能不同，分 HOST)，這個相當于一個5M大小的前端頁面的數據庫，相比于cookie可以節約帶寬，但localStorage在瀏覽器隱私模式下是不可讀取的，當存儲數據超過了localStorage的存儲空間后會拋出異常。
此外，H5還提供了逆天的websql和indexedDB,允許前端以關系型數據庫的方式來存儲本地數據，相對來說，這個功能目前應用的場景比較少，此處不作介紹。
5、瀏覽器緩存機制
瀏覽器緩存機制是指通過 HTTP 協議頭里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段來控制文件緩存的機制。
Cache-Control 用于控制文件在本地緩存有效時長。最常見的，比如服務器回包：Cache-Control:max-age=600 表示文件在本地應該緩存，且有效時長是600秒（從發出請求算起）。在接下來600秒內，如果有請求這個資源，瀏覽器不會發出 HTTP 請求，而是直接使用本地緩存的文件。
Last-Modified 是標識文件在服務器上的最新更新時間。下次請求時，如果文件緩存過期，瀏覽器通過 If-Modified-Since 字段帶上這個時間，發送給服務器，由服務器比較時間戳來判斷文件是否有修改。如果沒有修改，服務器返回304告訴瀏覽器繼續使用緩存；如果有修改，則返回200，同時返回最新的文件。
Cache-Control 通常與 Last-Modified 一起使用。一個用于控制緩存有效時間，一個在緩存失效后，向服務查詢是否有更新。
Cache-Control 還有一個同功能的字段：Expires。Expires 的值一個絕對的時間點，如：Expires: Thu, 10 Nov 2015 08:45:11 GMT，表示在這個時間點之前，緩存都是有效的。
Expires 是 HTTP1.0 標準中的字段，Cache-Control 是 HTTP1.1 標準中新加的字段，功能一樣，都是控制緩存的有效時間。當這兩個字段同時出現時，Cache-Control 是高優化級的。
Etag 也是和 Last-Modified 一樣，對文件進行標識的字段。不同的是，Etag 的取值是一個對文件進行標識的特征字串。在向服務器查詢文件是否有更新時，瀏覽器通過 If-None-Match 字段把特征字串發送給服務器，由服務器和文件最新特征字串進行匹配，來判斷文件是否有更新。沒有更新回包304，有更新回包200。Etag 和 Last-Modified 可根據需求使用一個或兩個同時使用。兩個同時使用時，只要滿足基中一個條件，就認為文件沒有更新。
另外有兩種特殊的情況：
6、History操作
用戶訪問網頁的歷史記錄通常會被保存在一個類似于棧的對象中，即history對象，點擊返回就出棧，跳下一頁就入棧。 它提供了以下方法來操作頁面的前進和后退：
HTML5 對History Api 進行了增強，新增了兩個Api和一個事件，分別是pushState、replaceState 和 onpopstate
pushState是往history對象里添加一個新的歷史記錄，即壓棧。
replaceState 是替換history對象中的當前歷史記錄。
當點擊瀏覽器后退按鈕或 js調用history.back都會觸發onpopstate事件。
與其類似的還有一個事件: onhashchange，onhashchange是老API, 瀏覽器支持度高, 本來是用來監聽hash變化的, 但可以被利用來做客戶端前進和后退事件的監聽，而onpopstate是專門用來監聽瀏覽器前進后退的, 不僅可以支持hash, 非hash的同源url也支持。
7、HTML5離線緩存
HTML5離線緩存又叫Application Cache，是從瀏覽器的緩存中分出來的一塊緩存區，如果要在這個緩存中保存數據，可以使用一個描述文件（manifest file），列出要下載和緩存的資源。
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。manifest 文件可分為三個部分：
- CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存
- NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
- FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
離線緩存為應用帶來三個優勢：
離線瀏覽 - 用戶可在應用離線時使用它們
速度 - 已緩存資源加載得更快
減少服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。
8、Canvas 和 SVG
Canvas 通過Javascript 來繪制 2D 圖形。Canvas 是逐像素進行渲染的。在 Canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。
SVG 是一種使用 XML 描述 2D 圖形的語言。SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。你可以為某個元素附加 JavaScript 事件處理器。在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。
Canvas和SVG相比，canvas更依賴于分辨率，不支持事件處理器，文本渲染能力弱，比較適合密集型游戲，其中的許多對象會被頻繁繪制，而svg則比較適用于類似谷歌地圖帶有大型渲染區域的應用程序。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
