整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
果圖
各位朋友大家好！
今天給大家?guī)?lái)的是 酷炫的svg與canvas結(jié)合動(dòng)畫(huà)特效源碼！
有想要文件版源碼的 可以私聊小編
廢話不多說(shuō)上源碼！
select=function(s) {
return document.querySelector(s);
},
selectAll=function(s) {
return document.querySelectorAll(s);
},
mainSVG=select('.mainSVG'),
orbit=select('#orbit'),
dot=select('#dot'),
startShape=select('#startShape'),
endShape=select('#endShape'),
shapeGroup=select('#shapeGroup'),
pContainer=select('#pContainer'),
particlePool=[],
numParticles=400,
particleCount=0
TweenMax.set('svg', {
visibility: 'visible'
})
TweenMax.set(['#startShape','#endShape'], {
transformOrigin:'50% 50%'
})
var orbitPath=MorphSVGPlugin.pathDataToBezier(orbit.getAttribute('d'), {
offsetX: 0,
offsetY: 0
})
var mainTl=new TimelineMax();
var tl=new TimelineMax({ repeat:-1, yoyo:false});
var tl2=new TimelineMax({ repeat:-1, yoyo:false, onUpdate:playParticle});
tl2.to(dot, 6, {
bezier: {
type: "cubic",
values: orbitPath,
autoRotate: false
},
ease:Linear.easeNone
})
//shapes
tl.to('#startShape', 20, {
rotation:360,
ease:Linear.easeNone
})
.to('#endShape', 20, {
rotation:-360,
ease:Linear.easeNone
},'-=20')
function createParticles() {
var i=numParticles, p;
while (--i > -1) {
p=document.createElementNS(xmlns, 'use');
p.setAttributeNS(xlinkns, "xlink:href", '#particle');
pContainer.appendChild(p);
//p.setAttributeNS(null, 'fill', particleColorArray[i % particleColorArray.length]);
p.setAttributeNS(null, 'opacity', 0);
p.setAttribute('class', "particle");
particlePool.push(p);
}
}
function playParticle(){
var p=particlePool[particleCount];
var curr={x:dot._gsTransform.x, y:dot._gsTransform.y};
var rad=Math.atan2(curr.y - 300, curr.x - 400);
var deg=Math.round(rad * (180/Math.PI));
//console.log(deg)
//console.log(dot._gsTransform.x)
TweenMax.set(p, {
x:randomBetween(curr.x, curr.x - 5),
y: randomBetween(curr.y, curr.y+5),
alpha:1,
transformOrigin:'50% 50%'
});
var tl=new TimelineMax();
tl.to(p, randomBetween(3, 6), {
//paused:true,
physics2D: {
velocity: randomBetween(5, 10),
angle:(deg % 2) ? deg : deg - 180,//randomBetween(-95, -85),
gravity:randomBetween(-1, 1)
},
scale:randomBetween(0, 3.3),
//rotation:randomBetween(180, 780),
onComplete:completeParticle,
onCompleteParams:[p],
alpha:0
//skewY:(Math.random() * 180),
//ease: Power4.easeIn,
//onStart:flicker,
//onStartParams:[p]
});
particleCount++;
particleCount=(particleCount >=numParticles) ? 0 : particleCount
}
function flicker(p){
//console.log("flivker")
TweenMax.killTweensOf(p, {alpha:true});
TweenMax.fromTo(p, 0.4,{
alpha:1
}, {
alpha:Math.random(),
ease: RoughEase.ease.config({ template: Power0.easeNone, strength: 3, points: 6, taper: "both", randomize: true, clamp: false}),
repeat:-1
})
}
function completeParticle(p){
TweenMax.set(p, {
x:-10,
y:-10,
alpha:1,
scale:1
})
}
function randomBetween(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
createParticles();
mainTl.add(tl,0);
mainTl.add(tl2,0);
//ScrubGSAPTimeline(mainTl)
mainTl.timeScale(1)
TweenMax.globalTimeScale(1)
/*!
* VERSION: 0.1.3
* DATE: 2015-03-24
* UPDATES AND DOCS AT: http://greensock.com
*
* This is a special version of the plugin that is only to be used on certain sites like codepen.io. It will redirect to a page on GreenSock.com if you try using it on a different domain. Please sign up for Club GreenSock to get the fully-functional version at http://greensock.com/club/
*
* @license Copyright (c) 2008-2015, GreenSock. All rights reserved.
* Physics2DPlugin is a Club GreenSock membership benefit; You must have a valid membership to use
* this code without violating the terms of use. Visit http://greensock.com/club/ to sign up or get more details.
* For licensing details, see http://greensock.com/licensing/
*
* @author: Jack Doyle, jack@greensock.com
*/
var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";var a=Math.PI/180,b=function(a,b,c,d,e){this.p=b,this.f="function"==typeof a[b],this.start=this.value=this.f?a[b.indexOf("set")||"function"!=typeof a["get"+b.substr(3)]?b:"get"+b.substr(3)]():parseFloat(a[b]),this.velocity=c||0,this.v=this.velocity/e,d||0===d?(this.acceleration=d,this.a=this.acceleration/(e*e)):this.acceleration=this.a=0},c=Math.random(),d=_gsScope._gsDefine.globals,e=d.com.greensock.core.Animation._rootFramesTimeline,f="",g="Physics2DPlugin",h=String.fromCharCode(103,114,101,101,110,115,111,99,107,46,99,111,109),i=String.fromCharCode(47,114,101,113,117,105,114,101,115,45,109,101,109,98,101,114,115,104,105,112,47),j=function(a){for(var b=-1!==(window?window.location.href:"").indexOf(String.fromCharCode(103,114,101,101,110,115,111,99,107))&&-1!==a.indexOf(String.fromCharCode(108,111,99,97,108,104,111,115,116)),c=[h,String.fromCharCode(99,111,100,101,112,101,110,46,105,111),String.fromCharCode(99,100,112,110,46,105,111),String.fromCharCode(103,97,110,110,111,110,46,116,118),String.fromCharCode(99,111,100,101,99,97,110,121,111,110,46,110,101,116),String.fromCharCode(116,104,101,109,101,102,111,114,101,115,116,46,110,101,116),String.fromCharCode(99,101,114,101,98,114,97,120,46,99,111,46,117,107),String.fromCharCode(116,121,109,112,97,110,117,115,46,110,101,116),String.fromCharCode(116,119,101,101,110,109,97,120,46,99,111,109),String.fromCharCode(116,119,101,101,110,108,105,116,101,46,99,111,109),String.fromCharCode(112,108,110,107,114,46,99,111),String.fromCharCode(104,111,116,106,97,114,46,99,111,109),String.fromCharCode(106,115,102,105,100,100,108,101,46,110,101,116)],d=c.length;--d>-1;)if(-1!==a.indexOf(c[d]))return!0;return b&&window&&window.console&&console.log(String.fromCharCode(87,65,82,78,73,78,71,58,32,97,32,115,112,101,99,105,97,108,32,118,101,114,115,105,111,110,32,111,102,32)+g+String.fromCharCode(32,105,115,32,114,117,110,110,105,110,103,32,108,111,99,97,108,108,121,44,32,98,117,116,32,105,116,32,119,105,108,108,32,110,111,116,32,119,111,114,107,32,111,110,32,97,32,108,105,118,101,32,100,111,109,97,105,110,32,98,101,99,97,117,115,101,32,105,116,32,105,115,32,97,32,109,101,109,98,101,114,115,104,105,112,32,98,101,110,101,102,105,116,32,111,102,32,67,108,117,98,32,71,114,101,101,110,83,111,99,107,46,32,80,108,101,97,115,101,32,115,105,103,110,32,117,112,32,97,116,32,104,116,116,112,58,47,47,103,114,101,101,110,115,111,99,107,46,99,111,109,47,99,108,117,98,47,32,97,110,100,32,116,104,101,110,32,100,111,119,110,108,111,97,100,32,116,104,101,32,39,114,101,97,108,39,32,118,101,114,115,105,111,110,32,102,114,111,109,32,121,111,117,114,32,71,114,101,101,110,83,111,99,107,32,97,99,99,111,117,110,116,32,119,104,105,99,104,32,104,97,115,32,110,111,32,115,117,99,104,32,108,105,109,105,116,97,116,105,111,110,115,46,32,84,104,101,32,102,105,108,101,32,121,111,117,39,114,101,32,117,115,105,110,103,32,119,97,115,32,108,105,107,101,108,121,32,100,111,119,110,108,111,97,100,101,100,32,102,114,111,109,32,101,108,115,101,119,104,101,114,101,32,111,110,32,116,104,101,32,119,101,98,32,97,110,100,32,105,115,32,114,101,115,116,114,105,99,116,101,100,32,116,111,32,108,111,99,97,108,32,117,115,101,32,111,114,32,111,110,32,115,105,116,101,115,32,108,105,107,101,32,99,111,100,101,112,101,110,46,105,111,46)),b}(window?window.location.host:""),k=_gsScope._gsDefine.plugin({propName:"physics2D",version:"0.1.3",API:2,init:function(c,d,k){if(!j)return window.location.href="http://"+h+i+"?plugin="+g+"&source="+f,!1;this._target=c,this._tween=k,this._runBackwards=k.vars.runBackwards===!0,this._step=0;for(var s,l=k._timeline,m=Number(d.angle)||0,n=Number(d.velocity)||0,o=Number(d.acceleration)||0,p=d.xProp||"x",q=d.yProp||"y",r=d.accelerationAngle||0===d.accelerationAngle?Number(d.accelerationAngle):m;l._timeline;)l=l._timeline;return this._stepsPerTimeUnit=s=l===e?1:30,d.gravity&&(o=Number(d.gravity),r=90),m*=a,r*=a,this._friction=1-Number(d.friction||0),this._overwriteProps.push(p),this._overwriteProps.push(q),this._x=new b(c,p,Math.cos(m)*n,Math.cos(r)*o,s),this._y=new b(c,q,Math.sin(m)*n,Math.sin(r)*o,s),this._skipX=this._skipY=!1,j},set:function(){var e,f,g,h,i,j,b=this._tween._time,c=this._x,d=this._y;if(this._runBackwards===!0&&(b=this._tween._duration-b),1===this._friction)g=.5*b*b,e=c.start+(c.velocity*b+c.acceleration*g),f=d.start+(d.velocity*b+d.acceleration*g);else{if(b*=this._stepsPerTimeUnit,h=j=(0|b)-this._step,i=b%1,j>=0)for(;--j>-1;)c.v+=c.a,d.v+=d.a,c.v*=this._friction,d.v*=this._friction,c.value+=c.v,d.value+=d.v;else for(j=-j;--j>-1;)c.value-=c.v,d.value-=d.v,c.v/=this._friction,d.v/=this._friction,c.v-=c.a,d.v-=d.a;e=c.value+c.v*i,f=d.value+d.v*i,this._step+=h}this._skipX||(c.r&&(e=0|e+(0>e?-.5:.5)),c.f?this._target[c.p](e):this._target[c.p]=e),this._skipY||(d.r&&(f=0|f+(0>f?-.5:.5)),d.f?this._target[d.p](f):this._target[d.p]=f)}}),l=k.prototype;l._kill=function(a){return null!=a[this._x.p]&&(this._skipX=!0),null!=a[this._y.p]&&(this._skipY=!0),this._super._kill(a)},l._roundProps=function(a,b){(a.physics2D||a[this._x.p])&&(this._x.r=b),(a.physics2D||a[this._y.p])&&(this._y.r=b)},k._autoCSS=!0,k._cssRegister=function(){var a=d.CSSPlugin;if(a){var b=a._internals,e=b._parseToProxy,f=b._setPluginRatio,g=b.CSSPropTween;b._registerComplexSpecialProp("physics2D",{parser:function(a,b,d,h,i,j){j=new k;var o,l=b.xProp||"x",m=b.yProp||"y",n={};return n[l]=n[m]=c++,o=e(a,n,h,i,j),i=new g(a,"physics2D",0,0,o.pt,2),i.data=o,i.plugin=j,i.setRatio=f,j._onInitTween(o.proxy,b,h._tween),i}})}}}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()();
HTML5 是下一代 HTML 標(biāo)準(zhǔn)。
HTML5 受包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等國(guó)外主流瀏覽器的支持；國(guó)內(nèi)的傲游瀏覽器（Maxthon）， 360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等同樣具備支持HTML5的能力。
優(yōu)勢(shì)：開(kāi)發(fā)技術(shù)簡(jiǎn)單，研發(fā)周期短，用戶(hù)接觸成本低
一、H5的優(yōu)勢(shì)是兼容性好，用H5的技術(shù)開(kāi)發(fā)出來(lái)的應(yīng)用在各個(gè)平臺(tái)都適用，且可以在網(wǎng)頁(yè)上直接進(jìn)行調(diào)試和修改，開(kāi)發(fā)和維護(hù)的成本較低，開(kāi)發(fā)周期較短。
二、強(qiáng)化了Web網(wǎng)頁(yè)的表現(xiàn)性能。除了可描繪二維圖形外，還準(zhǔn)備了用于播放視頻和音頻的標(biāo)簽。
三、追加了本地?cái)?shù)據(jù)庫(kù)等Web應(yīng)用的功能。
適合場(chǎng)景：把手機(jī)網(wǎng)站當(dāng)成網(wǎng)絡(luò)上的“電子產(chǎn)品介紹手冊(cè)”。
手機(jī)網(wǎng)站更適合用戶(hù)“主動(dòng)百度搜索”或者“主動(dòng)訪問(wèn)”，適合于陌生用戶(hù)的低頻或初次訪問(wèn)，讓用戶(hù)更完整和詳細(xì)的獲得快速介紹。通常用戶(hù)使用搜索引擎、手動(dòng)輸入網(wǎng)址等形式進(jìn)行訪問(wèn)。
H5不足的地方表現(xiàn)在軟件運(yùn)行速度容易受網(wǎng)絡(luò)影響，對(duì)于攝像頭、陀螺儀等硬件支持較差，開(kāi)發(fā)出來(lái)的應(yīng)用性能較差，不適合處理較復(fù)雜的邏輯等等。
H5的應(yīng)用。
1、HTML5的游戲開(kāi)發(fā)，例如簡(jiǎn)單的微信小游戲，打飛機(jī)等，也有白鷺egret引擎，還有cocos2d-js等等。
2、輕應(yīng)用、Webapp、微站
網(wǎng)站包括PC端和移動(dòng)端，響應(yīng)式網(wǎng)站適配不同的終端。
HTML5培訓(xùn)開(kāi)發(fā)移動(dòng)應(yīng)用更靈活。采用HTML5技術(shù)的輕應(yīng)用、WebApp相信會(huì)更容易被大眾所認(rèn)可，接受。
3、Hybrid App是指介于web-app、native-app這兩者之間的app,它雖然看上去是一個(gè)Native App，但只有一個(gè)UI WebView，里面訪問(wèn)的是一個(gè)Web App，比如街旁網(wǎng)最開(kāi)始的應(yīng)用就是包了個(gè)客戶(hù)端的殼，其實(shí)里面是HTML5的網(wǎng)頁(yè)，后來(lái)才推出真正的原生應(yīng)用。
4、基于微信平臺(tái)的開(kāi)發(fā)，微信開(kāi)放JSSDK讓H5的開(kāi)發(fā)人員可以調(diào)用底層功能，實(shí)現(xiàn)掃一掃，卡卷，微信支付，等操作
5、HTML5教程移動(dòng)營(yíng)銷(xiāo)
游戲化、場(chǎng)景化、跨屏互動(dòng)，HTML5技術(shù)完美的滿足了各大廣告商心里的夢(mèng)想，從形式到功用、到傳播，只要是你能想到的，沒(méi)有它做不到的。
6、WebVR讓虛擬現(xiàn)實(shí)大眾化
WebVR就是通過(guò)HTML5教程來(lái)把虛擬現(xiàn)實(shí)內(nèi)容嵌入到web頁(yè)面中，谷歌、Facebook等巨頭都十分欣賞這一功能。
7、動(dòng)漫、二次元
HTML5技術(shù)的成熟，還將會(huì)帶來(lái)動(dòng)漫產(chǎn)業(yè)的升級(jí)，從而為讀者們帶來(lái)更場(chǎng)景化，更真實(shí)化的方便體驗(yàn)。
覽器，在這個(gè)時(shí)代繼續(xù)統(tǒng)治著桌面平臺(tái)互聯(lián)網(wǎng)入口的軟件類(lèi)型，即使是在傳統(tǒng)桌面市場(chǎng)的蕭條期，依然是我們無(wú)法缺少的產(chǎn)品。而作為瀏覽器廠商們也仍然無(wú)法完全放棄傳統(tǒng)桌面平臺(tái)帶來(lái)的流量，繼續(xù)在這個(gè)產(chǎn)品線上保持穩(wěn)步的投入。
不過(guò)我們也發(fā)現(xiàn)，隨著移動(dòng)互聯(lián)網(wǎng)的介入，用戶(hù)對(duì)于桌面瀏覽器的需求也越來(lái)越回歸本質(zhì)，即回到瀏覽器本身的瀏覽上來(lái)，而將更個(gè)性化的需求轉(zhuǎn)移到了移動(dòng)平臺(tái)上。那么瀏覽器的本質(zhì)最看重的是什么呢？我認(rèn)為就是最純粹的“看得快”和“看得全”。
所以本次評(píng)測(cè)我們也將重點(diǎn)測(cè)試瀏覽器的核心素質(zhì)，分別是JavaScript性能測(cè)試、CSS3支持測(cè)試、Acid3測(cè)試、GPU加速測(cè)試以及HTML5兼容性測(cè)試。涉及產(chǎn)品包括：Chrome、360、QQ、百度、搜狗、獵豹、傲游、Firefox、IE以及Edge。
參測(cè)產(chǎn)品及版本號(hào)
測(cè)試環(huán)境
JavaScript性能測(cè)試
JavaScript性能反映了一款瀏覽器的基本素質(zhì)，在這里我們使用了SunSpider JavaScript Benchmark基準(zhǔn)測(cè)試。這是一種JavaScript測(cè)試基準(zhǔn)，是一款權(quán)威的專(zhuān)注于實(shí)際問(wèn)題解決的測(cè)試軟件。測(cè)試中，得分越低越好。
我們?cè)诿靠顓y(cè)瀏覽器在相同環(huán)境下，進(jìn)行Javascript基準(zhǔn)測(cè)試，以求得公平的測(cè)試數(shù)據(jù)。針對(duì)雙核瀏覽器，我們會(huì)對(duì)其兩個(gè)核心分別進(jìn)行測(cè)試。
SunSpider JavaScript Benchmark基準(zhǔn)測(cè)試
以下為測(cè)試結(jié)果：
從上表中可以看出，在這項(xiàng)測(cè)試中基于Chromium內(nèi)核的所謂極速內(nèi)核都敗下陣來(lái)，數(shù)值大多在280ms以上，而Firefox更是高達(dá)340ms以上。相反，基于IE內(nèi)核的兼容模式反而表現(xiàn)良好，結(jié)果大多在都在150ms左右。
這里表現(xiàn)最出眾的是微軟用來(lái)取代IE的Edge瀏覽器，不過(guò)這款瀏覽器的份額卻越來(lái)越小，且只向Windows 10系統(tǒng)提供。但不管怎樣，在這一項(xiàng)測(cè)試中，Edge無(wú)疑是勝出者。
CSS3支持測(cè)試
CSS簡(jiǎn)單來(lái)說(shuō)就是網(wǎng)頁(yè)的布局、字體、顏色、背景和其它效果的樣式設(shè)定。也就是有它來(lái)展現(xiàn)出網(wǎng)頁(yè)的顯示樣式和效果，所以對(duì)于CSS的支持程度決定了一款瀏覽器能否完整且正確地顯示網(wǎng)頁(yè)。
CSS3是CSS技術(shù)的升級(jí)版本，現(xiàn)在的CSS3分解為一些小的模塊，更多新的模塊也被加入進(jìn)來(lái)。這些模塊包括： 盒子模型、列表模塊、超鏈接方式、語(yǔ)言模塊、背景和邊框、文字特效、多欄布局等。
針對(duì)CSS3的測(cè)試，我們通過(guò)專(zhuān)業(yè)的測(cè)試站點(diǎn)CSS3 Selectors Test來(lái)進(jìn)行。最終考察的是通過(guò)率，總共有574項(xiàng)測(cè)試，通過(guò)率越高表現(xiàn)越好。
CSS3 Selectors Test
以下是我們的測(cè)試結(jié)果：
從上表中可以看出，所有參測(cè)的瀏覽器在這一項(xiàng)的表現(xiàn)中都是合格的，全都順利地通過(guò)的CSS3測(cè)試。可見(jiàn)這項(xiàng)標(biāo)準(zhǔn)在幾乎所有的瀏覽器中都得到了足夠的重視，這也是瀏覽器的基本素質(zhì)之一。
Acid3測(cè)試
Acid3測(cè)試是一份網(wǎng)頁(yè)瀏覽器及設(shè)計(jì)軟件之標(biāo)準(zhǔn)兼容性的測(cè)試網(wǎng)頁(yè)，其測(cè)試焦點(diǎn)集中在ECMAScript、DOM Level 3、Media Queries和data: URL。Acid3是目前Web標(biāo)準(zhǔn)基準(zhǔn)測(cè)試中最嚴(yán)格的，對(duì)DOM和JavaScript都有一定約束。
我們用到的Acid3測(cè)試，是通過(guò)專(zhuān)門(mén)的Acid3網(wǎng)站進(jìn)行的，分?jǐn)?shù)達(dá)到100才算完整通過(guò)測(cè)試。且若為完美通過(guò)測(cè)試，不應(yīng)看到左上角的紅字。
Acid3測(cè)試(圖為不完美通過(guò))
下面為本次測(cè)試的結(jié)果：
可以看出，在這項(xiàng)測(cè)試中所有參測(cè)瀏覽器都能夠通過(guò)測(cè)試，即達(dá)到100分滿分，但是唯有傲游瀏覽器不是完美通過(guò)的。傲游這個(gè)問(wèn)題在我們?nèi)ツ隃y(cè)試時(shí)就遇到了，但看來(lái)并沒(méi)有做相關(guān)的調(diào)整。
值得一提的是，在去年的測(cè)試中，獵豹瀏覽器連100分滿分都達(dá)不到，但在今年已經(jīng)能夠完美通過(guò)測(cè)試了，這里的進(jìn)步可以肯定一下。
圖形加速測(cè)試
接下來(lái)是圖形加速測(cè)試，這項(xiàng)標(biāo)準(zhǔn)在網(wǎng)頁(yè)游戲越來(lái)越多的當(dāng)今環(huán)境下也體現(xiàn)得尤為重要。這項(xiàng)測(cè)試將反映出瀏覽器對(duì)于頁(yè)面圖形處理的能力，尤其是GPU加速性能。是否能夠更好地看視頻和玩游戲，它起到了很大的作用。
本輪測(cè)試我們使用的是Mozilla的專(zhuān)門(mén)測(cè)試網(wǎng)站進(jìn)行的FishIETank方法，統(tǒng)一設(shè)定2000條魚(yú)，分辨率為1440x900，幀數(shù)越高者表現(xiàn)越好。這里的數(shù)據(jù)為穩(wěn)定下來(lái)的幀數(shù)數(shù)值。
FishIETank測(cè)試
以下是測(cè)試結(jié)果：
從上圖可以看出，這一部分測(cè)試的結(jié)果大部分差距不大，其中幀數(shù)最高的為Chrome瀏覽器，而幀數(shù)最穩(wěn)的則是Edge瀏覽器。這里個(gè)人更傾向于Edge的穩(wěn)定幀數(shù)，盡管上限不高，但是幀數(shù)非常平滑，不會(huì)出現(xiàn)突然掉幀的情況，因此視覺(jué)體驗(yàn)最好。
不過(guò)360瀏覽器在我們的測(cè)試過(guò)程中幀數(shù)非常低，已經(jīng)卡成幻燈片模式了，其中還數(shù)次造成顯卡驅(qū)動(dòng)出問(wèn)題而導(dǎo)致黑屏。至于IE，在我們的測(cè)試中始終無(wú)法初始化WebGL，所以完全無(wú)法正常打開(kāi)FishIETank網(wǎng)站。
HTML5兼容性測(cè)試
最后一項(xiàng)測(cè)試為HTML5兼容性測(cè)試，HTML5的意義在于對(duì)更先進(jìn)采用HTML5標(biāo)準(zhǔn)的網(wǎng)站的支持能力，同時(shí)對(duì)HTML5的支持效果也反映出了瀏覽器的前瞻性和對(duì)新技術(shù)的態(tài)度。越來(lái)越多的網(wǎng)站在表現(xiàn)圖形動(dòng)畫(huà)，甚至是網(wǎng)頁(yè)游戲時(shí)已經(jīng)拋棄傳統(tǒng)的Flash技術(shù)，轉(zhuǎn)而使用HTML5。所以HTML5的重要性也逐漸凸顯出來(lái)
HTML5測(cè)試我們使用的是專(zhuān)門(mén)的測(cè)試網(wǎng)站，它會(huì)直接為當(dāng)前瀏覽器打出相應(yīng)的分?jǐn)?shù)，數(shù)值越高支持越好，滿分500分。
HTML5測(cè)試
以下為測(cè)試結(jié)果:
從上表可以看出，在HTML5方面表現(xiàn)最好的是眾多以Chromium為內(nèi)核的瀏覽器，而表現(xiàn)最差的是IE。需要說(shuō)明的是，在雙核瀏覽器中，我們分別對(duì)兩個(gè)內(nèi)核都進(jìn)行了測(cè)試，最終選取高的拿一個(gè)數(shù)值，且這些高數(shù)值均得自極速內(nèi)核。而以IE內(nèi)核為基礎(chǔ)的兼容模式的分?jǐn)?shù)普遍不高，這一點(diǎn)與IE本身的低分值是相符的。
最終結(jié)果及總結(jié)
好了，現(xiàn)在我們來(lái)將前面的各項(xiàng)測(cè)試結(jié)果進(jìn)行一下總結(jié)，詳見(jiàn)下表：
從上面的表格中，我們可以發(fā)現(xiàn)Edge的表現(xiàn)較為突出，相比去年可以說(shuō)提升很大，不論是在JavaScript性能測(cè)試還是圖形加速測(cè)試中都表現(xiàn)良好，而其他方面也保持了較平均的水準(zhǔn)，只是HTML5一項(xiàng)偏弱。
國(guó)產(chǎn)瀏覽器方面，由于基本都是Chrome和IE的套殼產(chǎn)品，所以也同時(shí)兼顧了Chrome和IE內(nèi)核的強(qiáng)項(xiàng)，比如在HTML5兼容方面使用Chrome內(nèi)核，而在JavaScript方面是用IE內(nèi)核，比較自由。但由于同時(shí)使用的都是別人家的統(tǒng)一內(nèi)核，所以各自之間差異并不大，主要的區(qū)別還是各自產(chǎn)品附加的功能，比如搶票啊、云存儲(chǔ)啊、安全啊之類(lèi)的。
至于我們這次評(píng)測(cè)為什么沒(méi)有涉及國(guó)產(chǎn)瀏覽器擅長(zhǎng)的附加功能，主要是因?yàn)橛脩?hù)對(duì)于這些功能的需求不同，看法也不同。有的人就喜歡干凈簡(jiǎn)潔的瀏覽器，有的人就習(xí)慣功能繁多的瀏覽器，我們很難做到客觀。
所以從以上的本質(zhì)測(cè)試來(lái)看，Edge無(wú)疑是最突出的。當(dāng)然這也不是說(shuō)Edge就是最好的瀏覽器，一來(lái)你要用它必須安裝Windows 10系統(tǒng)，二來(lái)Edge獨(dú)特的內(nèi)核在對(duì)老IE支持的站點(diǎn)上兼容性不足，比如網(wǎng)銀什么的會(huì)比較麻煩。
最后我要說(shuō)的是，這個(gè)評(píng)測(cè)只是從技術(shù)層面對(duì)現(xiàn)在的瀏覽器產(chǎn)品做一個(gè)相對(duì)客觀的硬標(biāo)準(zhǔn)的測(cè)試，不是告訴你應(yīng)該選哪款瀏覽器，畢竟每個(gè)人的需求都不同。你要搶火車(chē)票，就算Edge分?jǐn)?shù)再高也幫不了你；Chrome擴(kuò)展多，你不會(huì)翻墻也是白搭。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
