web前端工程师面试题，提高成功率

很多小伙伴在面试的时候会遇到各种各样的面试题。同样从一个学校出来的大学生，经常在面试的时候面临不同的结局，并不一定是部分同学掌握的知识不够丰富，更多的时候是因为在面试的时候无法系统的解答面试官的问题。所以多参考一下经典的web前端面试题，对未来的就业会有很大的帮助。

1.display:none; 和visibility:hidden;

display:none; 彻底消失，释放空间。可能引发页面的reflow回流(重排)。

visibility:hidden; 就是隐藏，但是位置没释放，好比opacity:0; 不会引发页面回流。

2.你做的页面在哪些浏览器内核中测试过

1、IE浏览器内核：Trident内核，也是俗称的IE内核;

2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核;

3、Firefox浏览器内核：Gecko内核，俗称Firefox内核;

4、Safari浏览器内核：Webkit内核;

5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核 ;

6、360浏览器、猎豹浏览器内核：IE+Chrome双内核;

7、搜狗、遨游、QQ浏览器内核：Trident(兼容模式)+Webkit(高速模式);

8、百度浏览器、世界之窗内核：IE内核;

9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核

3.CSS 选择器权重如何计算

就近原则：直接选中的，一定比继承的权重大。

一样近，比权重：id是100，class是10，标签是1， 总数权重一样谁写在下面听谁的。

行内 > 内嵌 = 外联 > 导入 !important能够提升权限，但是不能提升继承的 class="a b c" 和挂载顺序无关，看写的顺序

4.web 前端开发，如何提高页面性能优化(常问)

1.减少http请求次数

2.从用户的角度讲，静态资源(图片，css，js)都使用cdn，cdn就是一组分布在不同地方的web服务器，用户离服务器更近，请求的时间就更短

3.讲css放在文件头部，js文件放在底部(资源加载是，自上而下的，先加载css会让用户感觉页面加载更快)

4.尽可能使用iconfont代替图片图标

5.善用缓存，不重复加载相同的资源(数据如果要重复使用，就可以使用缓存，不要重复请求)

6.图片懒加载(当滚动条，滚动到一定值的时候，再加载)，

不要缩放图片(例如你要50*50的图片，就不要拿500乘以500的大图片，影响加载)

降低图片质量

尽可能用css来代替图片(例如渐变，阴影)

使用webp格式图片

5.什么叫优雅降级和渐进渐强

优雅降级和渐进渐强 是浏览器兼容的两种方案。

1、优雅降级： 能力检测，如果能力有用新的;如果能力没有，用旧的。(先从高级功能实现，后面在逐级降低)

2、渐进渐强： 低端浏览器仅实现基本功能，高级浏览器实现额外功能。 (先实现基本功能。然后在实现高级功能)

比如上传文件，低端浏览器就给它提供上传按钮，高端浏览器增加外部拖拽文件上传。

6.如何形成 BFC

BFC是块级格式化上下文。

理论上讲，页面上所有的盒子必须都装到BFC盒子中，页面渲染才快。

BFC的形成：

① 有明确宽度、高度的盒子。

② overflow:hidden;

③ 定位的、浮动的

④ display ：inline-block，

BFC的性质： 内部有浮动，能清除这些浮动，能为浮动元素撑高。

7.CSS 的盒模型

1、标准盒模型：

范围：margin、border、padding、content

在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。

增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

标准盒模型下盒子的大小 = content + border + padding + margin

2、IE盒子模型(怪异盒模型)中

范围：margin、border、padding、content都有，但是不同是content包含border、padding

width 和 height 指的是content+border+padding的宽度和高度。

怪异盒模型下盒子的大小=width(content + border + padding) + margin

3、盒模型的选择

可以为box-sizing赋三个值：

content-box： 默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default)

border-box：border和padding划归到width范围内，可以理解为是IE的怪异盒模型

padding-box：将padding算入width范围

当设置为box-sizing:content-box时，将采用标准模式解析计算(默认模式);

当设置为box-sizing:border-box时，将采用怪异模式解析计算;

9.如何垂直水平居中一个元素(常问)

1、弹性布局：display:flex; justify‐content: center; align‐items: center;

2、定位

3、display:inline-block配合text-align:center

10.对单位px、em、rem、vh、vw的理解

px物理像素，绝对值;

em相对于父级的大小，相对值;

rem相对于html的大小，相对 值;

vh相对于屏幕的高度，相对值;vw相对于屏幕的宽度，相对值

以上就是“web前端工程师面试题，提高成功率”，你能回答上来吗?如果想要了解更多的相关内容，可以关注极悦Java官网。