1000000级别数组 some()查找速度比incudes()慢, webp格式的图片如何在html中应用

╰+攻爆jí腚メ 2022-09-04 05:48 123阅读 0赞

1000000级别数组 some()查找速度比incudes()慢

let arrs = []
        for (let i = 0; i < 1000000; i++) {
          arrs.push(i)
    
        }
    
    
        var start = new Date().getTime();
        // roles.includes("999999")
        // arrs.some(role => role == "999999")
        // arrs.includes(999999)
        if (arrs.includes(999999)) {
          var end = new Date().getTime();
          console.log("77")
        }
    
      var tim = (end - start) + "ms";
        console.log("时间差2", tim)
    
    some 大概8ms  includes 1ms

webp格式的图片如何在html中应用

# 在html中使用 #

### picture结合source标签 ###

HTML5的picture标签，可以理解为相框，里面可以支持多种格式的图片，并保留一张默认底图：

有了这段代码，浏览器会自动根据是否支持webp格式来选择加载哪张图片，若不支持，则会显示bg.jpg，如果浏览器连picture都不支持，那么会fallback到默认的img图片，这是必不可少的一个选项。

而且这里要注意source的放置顺序，如果把jpg放在第一位，webp放在第二位，即使浏览器支持webp，那也会选择加载jpg图片

在背景中使用

/* 
    *判断当前环境是否支持webp格式图片 
    *优化图片加载
    *如果支持 会在html 添加 data-webp="1" 不支持 data-webp="0"
    *使用：  [data-webp="0"] .bgi {
    			background-image: url(../img/bg1.png);
    			......
    		}
    
    		[data-webp="1"] .bgi {
    			background-image: url(../webp/bg1.webp);
    			......
    		}
    */
    function isSupportWebp() {
    	// save the results supported by the browser
    	var flag = '0'
    	// get canvas element
    	var canvasEL = document.createElement('canvas')
    	// get html element
    	var docEl = document.documentElement || document.getElementsByTagName('html')[0]
    	// determine whether the browser supports canvas elements
    	if (canvasEL.getContext && canvasEL.getContext('2d')) {
    		flag = canvasEL.toDataURL('image/webp').indexOf('image/webp') > -1 ? '1' : '0'
    	}
    	// set data-webp attribute for html
    	docEl.setAttribute('data-webp', flag)
    	// return supported result
    	return flag
    }