应届生校招前端面试题

最新推荐文章于 2024-05-02 15:21:25 发布

白执落

最新推荐文章于 2024-05-02 15:21:25 发布

阅读量537

点赞数

分类专栏：前端面试文章标签：校招面试题1

本文链接：https://blog.csdn.net/qq_39331257/article/details/100055310

版权

前端面试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

行内元素、行内块元素、块级元素分别有哪些标签？分别列举3个以上（越多越好）。
（1）块级元素：显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，不受空格影响，width和height可以改变容器的大小。如 div、p、h1-h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer
（2）行内元素也叫内联元素、内嵌元素等；行内元素一般都是基于语义级的基本元素，只能容纳文本或其他内联元素，各个字母之间横向排列，受空格影响，到最右端自动折行。如：span、label、a、b、lable、input、abbr、em、big、small、cite、strong、i、q、textarea、select、sub、sup，u
（3）行内块元素：支持宽高，自左向右排列，受空格影响，不独占一行。如： button、img、video、input、textarea
定位方式有几种？分别是相对什么元素定位？
static: 默认值，位于文档流之中，正常布局
relative：相对定位，位于文档流之中，可以使用top和left等属性，使其相对于原位置进行偏移
absolute：绝对定位，元素脱离文档流，相对于其包含块定位（第一个非static值的父元素）
fixed：与absolute类似，不过其包含块为页面。
position还有哪些属性值？
inherit：从父元素那继承position属性
initial：默认样式
unset：未设置，若该样式可继承，则相当于inherit，若不可继承，则相当于initial
具体介绍下标准盒模型是什么样的；一个标准盒模型的宽度等于？ width, padding, border, margin
标准盒子模型
标准盒模型下，width和height是内容区域即content的width和height。标准盒模型的宽度=左margin+左边框+左padding+width+右padding+右边框+右margin
（怪异盒模型是width和height除了content区域外，还包含padding和border。盒子的总宽度= width + margin(左右)（即width已经包含了padding和border值））
要给下面所有li元素绑定click事件，在鼠标点击每个li的时候alert该li里面的内容；且在鼠标离开外部ul元素范围的时候弹出一个alert提示。（实现时请注意代码执行效率及浏览器兼容性、不要使用现成的框架库，用原生js编写完成）

	  <ul id=”ulItem”>
	    <li>内容1</li>
	    ……此处省略1000+个li对象（注：不要使用循环绑定，如果使用循环绑定1000+的绑定事件会很慢）……
	    <li>内容n</li>
	    </ul>

JS事件代理实现

var ul = document.querySelector("ul");
    ulItem.onclick = function (e) {
        e = e || window.event; 
        var target = e.target || e.srcElement;
        if (target.tagName.toLowerCase() === "li") {
            var li = this.querySelectorAll("li");
            index = Array.prototype.indexOf.call(li, target);
            alert(target.innerHTML );
        }
    }
     ul.addEventListener('mouseleave', ()=>{ 
       alert('离开组件');
    })

下面代码的输出结果
function a() { return 1 ; } var a; console.log( typeof a);
输出function
下面哪些不符合同源策略：（ABCDEF）
A、http://www.domain.com/a.js 和 http://www.domain.com/lab/c.js
//同一域名，不同文件或路径允许通信
B、http://www.domain.com:8000/a.js 和 http://www.domain.com/b.js
//同一域名，不同端口不允许通信
C、http://www.domain.com/a.js 和 https://www.domain.com/b.js
//同一域名，不同协议不允许通信
D、http://www.domain.com/a.js 和 http://domain.com/c.js
//主域相同，子域不同不允许通信
E、http://www.domain1.com/a.js 和 http://www.domain2.com/b.js
//不同域名不允许通信
F、http://www.domain.com/a.js 和 http://192.168.4.12/b.js
//域名和域名对应相同ip 不允许通信
同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
同源策略SOP（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，其初衷是为了浏览器的安全性，通过以下三种限制，保证浏览器不易受到XSS、CSFR等攻击。
（1）Cookie、LocalStorage 和 IndexDB 无法读取
（2）DOM 和 Js对象无法获得
（3）AJAX 请求不能发送
为什么JavaScript会被设计成单线程？
作为浏览器脚本语言，JavaScript的主要用途是与用户互动以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。例如两个线程同时操作一个节点，会出现同步问题。但是js也需要异步，如果JS中不存在异步,只能自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。对于用户而言,会导致很差的用户体验。js是通过的事件循环实现的异步,理解了异步机制,就理解了JS的执行机制。
在 NodeJS 中，如何去高效的处理并发任务？
事件式编程
通过bind方法预定义了cook_cucumber和cook_tomato两个任务。这里的bind方法可以认为是await的消息式实现，需要第一个参数来标识该任务的名字，流程在执行的过程中产生的消息会触发这些任务执行

		var proxy = new EventProxy();  
		var mother = new People();  
		proxy.bind("cook_cucumber", function (soy) {  
		    mother.cook("cucumber", soy);  
		});  
		proxy.bind("cook_tomato", function () {  
		    mother.cook("tomato");  
		});  
		var child = new People();  
		child.buySoy(function (soy) {  
		    proxy.trigger("cucumber", soy);  
		});  
		proxy.trigger("tomato");

promise 、setTimeout 、setInterval 的执行顺序
promise 马上执行,setTimeout会放到任务队列,最后执行setInterval

	 	flag=true;
	    setInterval(() => {
	        if (!flag) {
	            console.log(6)
	            flag = true
	        }
	    }, 1000)
	    setTimeout(function () {
	        console.log(1)
	    }, 0);
	    new Promise(function executor(resolve) {
	        console.log(2);
	        for (var i = 0; i < 10000; i++) {
	            i == 9999 && resolve();
	        }
	        console.log(3);
	    }).then(function () {
	         console.log(4);
	    });
	    console.log(5);
	    // 输出 2 3 5 4 1 6

react/vue
https://blog.csdn.net/tiangongkaiwu152368/article/details/81132884
webpack
打包器https://www.webpackjs.com/concepts/
移动端touch事件
https://www.cnblogs.com/cangqinglang/p/8794621.html
斐波那契数列：（ 1、1、2、3、5、8、13、21、34 ）

		function fibo(n){
		    var a=new Array();
		    if(n==1||n==0){
		        a[i]=1;
		      }else if(n<0){
		          console.log("输入错误");        
		      }else{
		        a[0]=1;
		        a[1]=1;
		        for(var i=2;i<n;i++){
		            a[i]=a[i-1]+a[i-2];
		        }
		       return a;
		    }
		}
		    var arr= fibo(5);
		    console.log(arr);

快速排序
快速排序分三步：1.选择一个元素作为基准2.所有小于基准的数据放入一个区间，所有大于基准的数据放入另一区间，分区操作结束后，基准所处的位置就是最终排序后它应该所处的位置3.递归调用：对初次划分出来的两个无序区间，递归调用第 1步和第 2步的算法，直到所有无序区间都只剩下一个元素为止。

			function quickSort(arr) {
		    if (arr.length <= 1) return arr;
		    var pivotIndex = Math.floor(arr.length / 2);//基准
		    var pivot = arr.splice(pivotIndex, 1)[0];
		    var left = [];
		    var right = [];
		    for (var i = 0; i < arr.length; i++) {
		        //小于基准放左，大于基准放右
		        if (arr[i] < pivot) {
		            left.push(arr[i]);
		        } else {
		            right.push(arr[i]);
		        }
		    }
		    return quickSort(left).concat([pivot], quickSort(right));//拼接，递归
		}
		var arr = [345, 312, 154, 257, 82, 76, 151];
		console.log(quickSort(arr));
/*

跨域
常见跨域场景见6.
跨域解决方案
1、通过jsonp跨域动态插入script标签，执行回调函数
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域通过HTML5API PostMessage实现多页面，多窗口以及iframe之间的的通信
6、跨域资源共享（CORS）发送AJAX请求，普通跨域请求只需在服务端设置Access-Control-Allow-Origin即可。而带有cookie的跨域请求，还需在服务端设置Access-Control-Allow-Credentials，且前端设置xhr对象的withCredentials属性为true。
通过配置代理服务器，如nginx反向代理proxy_pass字段，nodejs中间件，webpackserver的proxy属性等。
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
闭包
闭包是指有权访问另一个函数作用于中的变量的函数。通俗的说就是在内部函数可以访问外部函数的变量，这个内部函数就是一个闭包。

		function outer() {
		    var count=0;
		    function inside() {
		        count++;
		        console.log(count);
		    }
		    return inside;
		}
		var c=outer;
		c();

outer是 inside的父函数，而 inside被赋给了一个全局变量，这导致 inside始终在内存中，而 inside的存在依赖于outer，因此outer也始终在内存中，不会在调用结束后，被垃圾回收机制回收。
1.创建一个外部函数outer()
2.创建一个内部函数inside()
3.在外部使用变量c获取outer的返回值即inside
4.通过调用c去调用inside
13. 面向对象
面向对象的写法：工厂模式，构造函数模式，原型模式，构造函数与原型模式的混合使用，原型链继承，借用构造函数继承，组合继承。

    // 1.工厂模式
		    function Student(stuName,stuAge) {
		    var stu=new Object();
		    stu.name=stuName;
		    stu.age=stuAge;
		    stu.study=function () {
		        console.log('在下'+this.name+'年方'+this.age);
		    }
		    return stu;
		}
		var stu1=Student('张三',18);
    // 2.构造函数模式
	 function Student(stuName,stuAge) {
		    // this指向由该构造函数创建的对象
		    this.name=stuName;
		    this.age=stuAge;
		    this.smile=function() {
		        console.log(this.name+"在哈哈哈哈")
		    }
		    // 省略了返回对象
		}
    // 3.原型模式
			function Student(name,age) {
			    this.name=name;
			    this.age=age;
			}
			// 对以该构造函数为模板创建的对象的原型添加属性
			Student.prototype.grade=100;
			// 对以该构造函数为模板创建的对象的原型添加方法
			Student.prototype.study=function(){
			    console.log(this.name+"在好好学习");
			}
			var stu1=new Student("张三","18");
			console.log(stu1);
    // 4.构造函数与原型模式的混合使用
    	function Person(name,age,job){
		    this.name=name;
		    this.age=age;
		    this.job=job;
		    this.sayName=function(){
         		alert(this.name)
        	}
       }
		Person.prototype ={
		    sayJob:function(){
		        console.log(this.job);
		    }
		}
	  var person1=new Person('小红',22,'卖菜');
    // 5.原型链继承
    // 原型链继承缺点：1.不可以向父类传参 2.对原型中引用类型的误修改，修改后会被所有子类共享
		// 父类
		function Person(name) {
		    this.head="脑袋瓜子";
		    this.name=name;
		    this.emotion=['喜','怒','哀','乐'];
		    this.eat=function () {
		        console.log("准备吃饭")
		    }
		}
		// 子类
		function Student(id,name) {
		    this.id=id;
		    this.study=function () {
		        console.log("好好学习，天天向上");
		    }
		}
		Student.prototype = new Person(name);//将以Student构造函数为模板创建的对象原型改成新创建的Person
		var stu1=new Student(1001,'小强');
		var stu2=new Student(1002,'小红');
		console.log(stu1);
		console.log(stu2);
		stu1.eat();
		// 给stu1添加grade属性
		stu1.grade=60;
		// 给原型添加属性
		Student.prototype.grade=100;
		// 修改属性
		stu1.emotion.push("愁");
		console.log(stu1.emotion);
		console.log(stu2.emotion);
    // 6.借用构造函数继承
			// 优点：1.可以传参 2.可以单独修改属性
			// 缺点：1.每个子类都会复制一份父类构造函数中的属性和方法，实质上没有用到原型链
			// 2.无法实现函数复用，每个子类都有父类实例的函数副本，影响性能
			// 父类
			function Person(name) {
			    this.head="脑袋瓜子";
			    this.name=name;
			    this.emotion=['喜','怒','哀','乐'];
			    this.eat=function () {
			        console.log("准备吃饭")
			    }
			}
			// 子类
			function Student(id,name) {
			    // 绑定子类中的this
			    Person.call(this,name);
			    this.id=id;
			    this.study=function () {
			        console.log("好好学习，天天向上");
			    }
			}
			var stu1 = new Student(1001,"小强");
			var stu2 = new Student(1002,"小红");
			stu1.emotion.push("愁");
			console.log(stu1);
			console.log(stu2);
			console.log(stu1.emotion,stu2.emotion,);
    // 7.组合构造函数和原型继承    
		//父类
		function Person(name){
		    this.head='脑袋瓜子';
		    this.name=name;
		    this.emotion=['喜','怒','哀','乐'];
		    // this.eat=function(){
		    //     console.log('准备吃饭');
		    // }
		｝
		//子类
		function Student(id,name){
		    Person.call(this,name);//构造函数继承属性
		    this.id=id;
		    // this.study=function(){
		    //     console.log('好好学习，天天向上');
		    // }
		}
		Person.prototype.eat=function(){
		        console.log('准备吃饭');
		}
		Person.prototype.study=function(){
		        console.log('好好学习，天天向上');
		}
		Student.prototype=new Person(name);
		Student.prototype.constructor=Student;
		console.log(Student.prototype.constructor);
		var stu1=new Student(1001,'小强');
		var stu2=new Student(1002,'小红');
		console.log(stu1);
		console.log(stu2);
		//通过原型链查找方法
		stu1.eat();
		stu1.study();
		stu2.eat();
		//通过构造函数继承属性，然后修改
		stu1.emotion.push('愁');
		console.log(stu1.emotion,stu2.emotion);

nodejs
nodejs优点：
1.具有事件驱动架构；通过对事件的绑定，触发事件的方式来实现操作，这样每一次触发就调用一次事件函数。没有并发量的限制。同时也有很高的吞吐量。
2.能够异步I/O；作为一个单进程，要实现异步，最直接的体现就是回调。
3.轻量高效，可认为是数据密集型分布式部署环境下实时应用系统的完美解决方案。
搭建服务器

		//加载http模块
		var http = require("http");
		//创建服务
		http.createServer(function(req, res) {
		    //设置响应状态码，响应头（编码格式）
		    res.writeHead(200, {"Content-Type" : "text/plain; charset=utf-8"});
		    //设置响应内容
		    res.write("hello node.js!");
		    //结束响应
		    res.end();
		}).listen(10080);//设置响应端口

白执落

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
应届生校招前端面试题

菜鸟的拼命挣扎——面试题1行内元素、行内块元素、块级元素分别有哪些标签？分别列举3个以上（越多越好）。（1）块级元素：显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，不受空格影响，width和height可以改变容器的大小。如 div、p、h1-h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新...
复制链接

扫一扫