击上方蓝字关注我们
保持犀利风格,持续科技新闻报道及业界深度剖析
用户上网找新闻、看直播、打网页游戏等都要使用浏览器,可以说浏览器是互联网时代的入口,是兵家必争之地,而国产浏览器是其中不可忽视的一支重要力量。国产浏览器中谁的基本功最扎实、谁的功能设计最贴心呢?不比不知道,下面我们将从多个角度全方面剖析国产浏览器!
参测产品
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小时内与您取得联系。