Web前端面试题合集

最新推荐文章于 2022-09-02 16:13:32 发布

喜欢打代码的小垃圾

最新推荐文章于 2022-09-02 16:13:32 发布

阅读量344

点赞数 1

文章标签： javascript css html5 html vue.js

本文链接：https://blog.csdn.net/weixin_45642033/article/details/109167807

版权

用一两句话说一下你对“盒模型”这个概念的理解，和它都涉及到哪些css属性。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。通常所有的HTML元素都可以看作是盒子，封装周围的HTML元素。它包括着边距，边框，填充，和实际内容。

前端页面有哪三层构成，分别是什么？作用是什么？

分成：结构层、表示层、行为层。
网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
网页的表示层（presentation layer）由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

img的alt和title有什么区别？

alt 是图片加载失败时，显示在网页上的替代文字； title 是鼠标放上面时显示的文字。

在css布局中，什么场景中会出现元素高度塌陷，如何解决元素高度塌陷问题？

在文档流中，父元素的高度默认是被子元素撑开的，但在子元素设置浮动之后，子元素就会完全脱离文档流，这个时候，将会导致子元素无法撑起父元素的高度，所以导致了父元素高度塌陷。
解决方法：
方法一：给父元素添加属性 overflow: hidden;
方法二：给父元素一个固定的高度
方法三：在子元素的末尾添加一个空的 div ，并设置下方样式
方法四：万能清除浮动法
父元素:after{
content: "";
height: 0;
clear: both;
overflow: hidden；
display: block;
visibility: hidden;
}

display:none; 和 visibility:hidden;的区别？

如果设置了display:none，那么该元素以及她的所有后代元素都会隐藏；如果设置了visibil:hidden，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说，元素虽然不见了，但是仍然会影响页面布局。

css定位有几种。每个定位方式有什么区别？

relative（相对定位）：相对定位的偏移参考元素是元素本身，不会使元素脱离文档流；
absolute（绝对定位）：以父辈元素中最近的定位元素为参考坐标，如果绝对定位元素的父辈元素中没有采用定位，那么此绝对定位元素的参考对象是html；
fixed（固定定位）参考坐标是可视窗口，使用fixed的元素脱离文档流；
static（静态定位）：top，left，bottom，right这几个偏移属性不会影响其他静态定位的正常显示。

js原始数据类型有哪些？引用数据类型有哪些？原始数据类型和引用数据类型的区别？

原始数据类型（Undefined，Null，Boolean，Number、String）；引用数据类型（对象、数组、函数）；
区别：存储位置不同；传值方式不同。

var 和 const 的区别？

var声明的变量属于函数作用域，const属于块级作用域；var存在变量提升，而const并没有，var变量可以重复声明，而在同一个块级作用域，const变量不能修改。

在css布局中，什么场景下会出现外边距合并以及如何解决外边距合并问题?

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距；
解决方法:
给父级元素加上border：1px soild #fff 或者padding：1px
给父级元素加overflow：hidden
给父级或子级加上浮动
给父级或子级加上绝对定位属性
给父级或子级加上display:inline-blockc

break、continue、return、throw的作用？

1.break 跳出循环
2.continue 跳出本次循环，进入下次循环
3.return 中止当前函数继续执行
4.throw 异常信息;中止程序抛出异常，可用于中止程序

XSS攻击原理与防御？

XSS的原理是WEB应用程序混淆了用户提交的数据和JS脚本的代码边界，导致浏览器把用户的输入当成了JS代码来执行。
1.对输入(和URL参数)进行过滤，对输出进行编码;
2.使用内容安全策略（CSP）是对抗XSS的深度防御策略。

简述浏览器渲染页面机制。

1、在浏览器中输入URL。
2、浏览器向相应的服务器发送请求，接受响应。
3、HTML解析器自上而下地将HTML文件解析成一棵DOM树，树上的节点就是相应的元素。
4、CSS解析器将CSS解析成CSSOM树。
5、根据DOM树和CSSOM树构建相应的Render树（渲染树）。
6、Layout（布局）：计算出每个节点在屏幕中的位置。
7、Paint（绘制）：将内容显示在屏幕上。

简述一个完整的HTTP事务处理过程。

1.域名解析
2.发起TCP的3次握手
3.建立TCP连接后发起http请求
4.服务器响应http请求
5.浏览器得到html代码
6.浏览器解析html代码，并请求html代码中的资源（如js、css、图片等）
7.浏览器对页面进行渲染呈现给用户

前端性能优化有哪些？

1. 减少HTTP请求次数
2. 使用CDN
3. 避免空的src和href
4. 为文件头指定Expires
5. 使用gzip压缩内容
6. 把CSS放到顶部
7. 把JS放到底部
8. 避免使用CSS表达式
9. 将CSS和JS放到外部文件中
10. 权衡DNS查找次数
11. 精简CSS和JS
12. 避免跳转
13. 删除重复的JS和CSS
14. 配置ETags
15. 可缓存的AJAX
16. 使用GET来完成AJAX请求
17. 减少DOM元素数量
18. 避免404
19. 减少Cookie的大小
20. 使用无cookie的域
21. 不要使用滤镜
22. 不要在HTML中缩放图片
23. 缩小favicon.ico并缓存

css 的基本语句构成是?

1、（若干条）样式
2、样式的属性名
3、样式的属性值

JavaScript创建函数的三种方式

1.函数（function）
function fn(){};
2.函数表达式
(1):var a = function(){ };
(2):(function(){ })() 或者 (function(){ }())
3.构造函数
(var fn = new a('a','b','c')；

当一个dom节点被点击时，我们需要能够执行一个函数，应该怎么做？

1.静态绑定
2.动态绑定

rgba()和opacity的透明效果有什么不同？

opacity 子元素颜色会被影响，即变相的被继承；rgba(r,g,b,a)不会。

display:none 与 visbility:hidden的区别是什么？

如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏;
给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。

事件委托是什么？

事件委托就是把原本需要绑定的事件委托给父元素，让父元素负责事件监听。事件代理的原理是DOM元素的事件冒泡。使用事件委托的好处是可以提高性能

如何阻止事件冒泡？

function stopPropagation(e) {  
     e = e || window.event;  
     if(e.stopPropagation) { 
         e.stopPropagation();  //还有return false;
     } else {  
         e.cancelBubble = true; //IE9以下冒泡方法  
     }  
 }

添加、删除、替换、插入到某个节点的方法？

添加:appendChind();
删除:removeChind();
替换:replaceChind(新节点，旧节点)；
插入:insertBefore(插入元素，被插元素)；

在JS中哪些会被隐式转换为false？

Undefined、null、关键字 false、NaN、零、空字符串

简单叙述readlyonly和disabled的区别

1.readonly属性只对表单元素的文本框、密码框和多行文本框有效，而disabled属性对所有的表单元素都会有效;
2.设置readonly的表单元素value值依然会被提交，而设置disabled的表单元素值不会被提交。
3.设置两个属性的外观不一样;

已知有字符串"get-element-by-id",写一个函数将其转换为驼峰表示法"getElementById"

var foo= "get-element-by-id";
function translate(res) {
var arr = res.split("-"); // 以-为分隔符截取字符串，返回数组
for(var i = 1; i < arr.length; i++) {
arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
}
res= arr.join(""); // 返回字符串
return res;
}
console.log(translate(foo))

看下列代码，输出什么？为什么？

var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);


//输出为2，因为Object()是复杂类型，属于引用传递。

已知数组 var str = ["This","is","Baidu","Campus"],输出This is Baidu Campus。

 var str = ["This","is","Baidu","Campus"];
 var newStr = str.join(" ");
 console.log(newStr);

请描述出下列代码的结果，为什么？

function d(){
	console.log(this);
	}
	d();
//window,d() == window.d()

如何判断一个js变量是数组类型。

1.isArray; 2.instanceOf; 3.Object.protetype.toString.call()； 4.construct；

JavaScript一下那条语句会产生运行错误？

A. var obj = (); B. var obj = []; C. var obj = {}; D. var obj = //;

console.log( 8 | 1);输出值是多少？

位运算 OR 由符号（|dao）表示，是直接对数字的二进制形式进行运算。
8的二进制形dao式是1000; 1的二进制形式是0001; 所以1001 = 9；

alert(0.4*0.2);结果是多少？和你预期的一样吗？如果不一样该如何处理？

在JavaScript中的二进制的浮点数0.2和0.4并不是十分精确，在他们相乘的结果并非正好等于0.8，而是一个比较接近的数字 0.8000000000000001；

想直接获取这个div的dom对象，如何获取？有几种方式？分别是那些？dom对象如何转换为jQuery对象?

<div class = 'aabbcc' id = 'nodeView'></div>
//四种:document.getElementById("nodeView"),document.querySelector("#nodeView");
//	   document.getElementsByClassName("aabbcc")[0],document.querySelector(".aabbcc");
//$(".aabbcc") 或者 $("#nodeView");

如何显示或者隐藏一个dom元素？请用原生的JavaScript实现。

dom.style.display="none";

JavaScript的循环语句有哪些？

1.while 循环； 2. do……while循环； 3.for循环； 4.增强for…in循环； 6.forEach循环；

css 中link 和import引入css有什么区别

两者都是外部引用CSS的方式，但是存在一定的区别：
　　区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
　　区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

为什么要初始化css样式

首先，因为浏览器的兼容问题，不同浏览器对有些标签的默认值也是不同的，所以，如果没对CSS初始化，那么往往就很容易出现浏览器之间的页面显示差异的问题。其次，初始化CSS样式主要是提高编码质量，如果不初始化整个页面，做完的东西是会很糟糕，重复的CSS样式很多。去掉标签的默认样式如：margin和padding，其他浏览器默认解析字体大小，字体设置。

javascript的typeof返回哪些数据类型

undefined 　　string 　　boolean 　　number 　　symbol(ES6) 　　Object 　　Function

强制转换类型和隐式类型转换

强制转换类型:
Number(参数)把任何类型转换成数值类型
parseInt（参数1，参数2）将字符串转换成整数
parseFloat()将字符串转换成浮点数字
string(参数)：可以将任何类型转换成字符串
Boolean()可以将任何类型的值转换成布尔值

隐式类型转换:
"+","-"运算符
"if","while","for in"
alert();

spilt()和join()的区别

split()用于分割字符串，返回一个数组；
join()用于连接多个字符或字符串，返回值为一个字符串

call和apply的异同

“==”和“===“的不同

设置一个已知id名为myDiv的的div标签的html内容为”divdivdiv“，字体颜色设置为黑色

解释 jsonp 的原理，以及为什么不是真正的 ajax?

1. jsonp的原理:就是利用浏览器可以动态地插入一段js并执行的特点完成的。
2.为什么不是真正的 ajax?
ajax的核心是：通过XmlHttpRequest获取非本页内容，
jsonp的核心：动态添加(script)标签来调用服务器提供的js脚本。
3..ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
4. 实质不同
　ajax的核心是通过xmlHttpRequest获取非本页内容
　jsonp的核心是动态添加script标签调用服务器提供的js脚本
5. ajax通过服务端代理一样跨域
　jsonp也不并不排斥同域的数据的获取
6 .jsonp是一种方式或者说非强制性的协议
　ajax也不一定非要用json格式来传递数据　
7. .jsonp只支持get请求，ajax支持get和post请求

简述ajax过程

var xhp = new XMLhttpRequest();
xhp.open("","");
xhp.send();
xhp.onreadystatechange = function(){
if(xhp.readyState == 4 && xhp.Status == 200){
console.log(xhp.responseText);
}
}