前端鄙视题1

快来打我* 2022-05-30 07:37 78阅读 0赞

1、

console.log(''==0);  //true
    		console.log([]==0);  //true
    		console.log({}==0);  //false

2、

var arr=[6,2,10,5,9,5];
    		console.log(arr.sort(function(a,b){
    			return a-b
    		}));

3、

console.log(1&&2); //2
    		console.log(1||2); //1

4、

URL:统一资源定位符
    URI:统一资源标识符
    URN:统一资源名称
    URL,URN是URI的子集
    
    URL：目前URI的最普遍形式就是无处不在的URL或统一资源定位器
    URI是以某种统一的（标准化的）方式标识资源的简单字符串
    
    URI是个纯粹的句法结构，用于指定标识Web资源的字符串的各个不同部分。URL是URI的一个特例，它包含了定位Web资源的足够信息。

5、

如何在移动端利用css开启渲染的硬件加速优化
    CSS animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行。那我们怎样才可以切换到GPU模式呢，很多浏览器提供了某些触发的CSS规则。
    现在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。
    小心使用这些方法，如果通过你的测试，结果确是提高了性能，你才可以使用这些方法。使用GPU可能会导致严重的性能问题，因为它增加了内存的使用，而且它会减少移动端设备的电池寿命。
    硬件加速最好只用在animation或者transform上。不要滥用硬件加速，因为这样会增加性能的消耗，如果滥用反而会使动画变得更加卡，这样就得不偿失了。
    /**使用3d效果来开启硬件加速**/
    .speed-up {
       -webkit-transform: translate3d(250px,250px,250px)
       rotate3d(250px,250px,250px,-120deg)
       scale3d(0.5, 0.5, 0.5);
    }
    /**原理上还是使用3d效果来开启硬件加速**/
    .speed-up{
       -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
       -ms-transform: translateZ(0);
       -o-transform: translateZ(0);
       transform: translateZ(0);
    }

6、

页面渲染原理：
    1.构建DOM树(DOM tree)：从上到下解析HTML文档生成DOM节点树（DOM tree），也叫内容树（content tree）；
    2.构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树；
    3.执行JavaScript：加载并执行JavaScript代码（包括内联代码或外联JavaScript文件）；
    4.构建渲染树(render tree)：根据DOM树和CSSOM树,生成渲染树(render tree)；渲染树：按顺序展示在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性。
    5.布局（layout）：根据渲染树将节点树的每一个节点布局在屏幕上的正确位置；
    6.绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过UI后端模块完成；

7、

实现一个函数，可以对js中的5种主要数据类型进行复制

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    </head>
    <body>
    	<script type="text/javascript">
    		function clone(obj) {
    		    var o;
    		    switch (typeof obj) {
    		        case "undefined":
    		            break;
    		        case "string":
    		            o = obj + "";
    		            break;
    		        case "number":
    		            o = obj - 0;
    		            break;
    		        case "boolean":
    		            o = obj;
    		            break;
    		        case "object": // object 分为两种情况 对象（Object）或数组（Array）
    		            if (obj === null) {
    		                o = null;
    		            } else {
    		                if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {
    		                    o = [];
    		                    for (var i = 0; i < obj.length; i++) {
    		                        o.push(clone(obj[i]));
    		                    }
    		                } else {
    		                    o = {};
    		                    for (var k in obj) {
    		                        o[k] = clone(obj[k]);
    		                    }
    		                }
    		            }
    		            break;
    		        default:
    		            o = obj;
    		            break;
    		    }
    		    return o;
    		}
    
    		var obj={
    			name:'spf',
    			age:'22'
    		};
    
    		var obj1=clone(obj);
    		console.log(obj1);
    
    	</script>
    </body>
    </html>

上面实现的只是值复制，是浅复制，也可以写成深拷贝形式。