前端面试题收集整合

面试题

一、在css布局中，什么场景下出现元素高度塌陷，如何解决元素高度塌陷问题?
父元素的所有子元素设置浮动后会出现元素高度塌陷问题。
1、父元素设置高度；
2、父元素设置浮动；
3、修改父元素的类型：display:inline-block/table;
4、父元素设置overflow:hidden属性
5、额外标签法；
6、伪元素方法；
7、双伪元素。

二、display: none; 和 visibility: hidden;的区别?
display: none;是将该元素移除，不占任何空间位置；
visibility: hidden;是将该元素设置为不可见，但它在网页上的位置还是保留。

三、css定位有几种，各个定位方式有什么区别?
1、相对定位：relative——>相对定位偏移的参考元素是元素本身，它不会使元素脱离文档流。
2、绝对定位：absolute——>绝对定位偏移的参考元素是非静态定位的父级元素，如果父级元素都是静态定位，则相对body进行定位，它会使元素脱离文档流。
3、固定定位：fixed——>固定定位偏移的参考元素是整个文档，它会使元素脱离文档流。
4、静态定位：static——>静态定位就是按照文档流正常显示。

四、js原始数据类型有哪些? 引用类型数据有哪些? 原始数据类型和引用类型的区别?
原始数据类型有数值型Number、字符型String、布尔值Boolean、Null、Undefined、Symbol；引用数据类型有数组、对象、函数。
原始数据类型和引用数据类型的区别：原始数据类型的值保存在栈中；而引用数据类型的值保存在堆中，地址指针保存在栈中。

五、var和const的区别：

1、var声明的变量会挂载在window上，而const声明的变量不会；

2、var声明的变量存在变量提升，而const声明的变量不存在变量提升；

3、var声明的变量不会形成块级作用域，而const声明的变量会形成块级作用域；

4、同一作用域下，var可以声明同名变量，而const不可以；

5、var声明的变量可以不赋值，而const声明变量时必须赋值；

6、var声明的变量的值可以修改，而const声明的变量的值不可以修改。

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

1、当两个元素是兄弟关系，并且垂直方向上第一个元素设置了margin-bootom和第二个元素设置了margin-top，那么就会出现外边距合并（两个都设置正数，则取两者的最大值；两个都设置负数，则取两者绝对者都最大值；两个是一正一负，则不会合并）。

2、当两个元素是父子关系，并且垂直方向上父元素设置了margin-top属性，子级元素的第一个子元素设置了margin-bottom 属性，则子级元素的第一个子元素的margin-top的属性值会传递给父级。其解决方案如下：

（1）给父级元素设置border；

（2）给父级元素设置overflow:hidden；

（3）不要使用margin，而是使用paading；

（4）给父级元素设置浮动；

（5）给父级元素设置绝对定位或固定定位，不能是相对定位。

七、break、continue、return、throw的作用？

break：跳出循环；

continue：跳出本次循环，进入下次循环；

return：返回值，并中止当前函数；

throw：中止程序并抛出异常。

八、XSS攻击原理与防御？

攻击原理：

XSS(Cross-Site Scripting,跨站脚本)是注入攻击的一种，攻击者通过将代码注入被攻击者的网站中，用户一旦访问访问网页便会执行被注入的恶意脚本。其原理是WEB应用程序混淆了用户提交的数据和JS脚本的代码边界，导致浏览器把用户的输入当成了JS代码来执行。XSS攻击主要分为反射性XSS攻击（Reflected XSS attack）和存储型XSS攻击（Stored XSS Attack）两类。

反射性XSS有称为非持久型XSS（Non-Persistent XSS）。当某个站点存在XSS漏洞时，这种攻击会通过URL注入攻击脚本，只有当用户访问这个URL是才会执行攻击脚本。

存储型XSS也被称为持久型XSS（persistent XSS），这种类型的XSS攻击更常见，危害也更大。它和反射型XSS类似，不过会把攻击代码存储到数据库中，任何用户访问包含攻击代码的页面都会被殃及。

如何防御：

防范XSS攻击最主要的方法是对用户输入的内容进行HTML转义，转义后可以确保用户输入的内容在浏览器中作为文本显示，而不是作为代码解析。

九、简述浏览器渲染页面机制？

1、根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕后，再继续构建DOM树及CSSOM树；

2、构建渲染树；

3、页面的重绘与重排（也称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或重排。

十、简述一个完整的HTTP事务处理过程？

一个完整的HTTP事务的处理过程是：域名解析——>发起TCP3次握手——>建立TCP连接后发起http请求——>服务器端响应http请求，浏览器得到html代码——>浏览器解析html代码，并请求html代码中的资源——>浏览器对页面进行渲染并呈现给用户。

十一、前端性能优化有哪些？

前端性能优化有：减少HTTP请求次数、使用CDN、避免空的src和href、为文件头指定Expires、使用gzip压缩内容、把CSS放到顶部、 把JS放到底部、避免使用CSS表达式、将CSS和JS放到外部文件中、权衡DNS查找次数、精简CSS和JS、避免跳转、 删除重复的JS和CSS、配置ETags、可缓存的AJAX、使用GET来完成AJAX请求、减少DOM元素数量、避免404、减少Cookie的大小、使用无cookie的域、不要使用滤镜、不要在HTML中缩放图片、缩小favicon.ico并缓存。