常见的web前端开发面试题有哪些？

web前端行业仍然是一个比较年轻且充满着前景的行业，新的行业标准、框架、库都在不断地更新。因此，许多人看好web前端，想要成为一名web前端工程师，而成为web前端工程师不仅需要过硬的前端技术技能，还需要通过企业面试，因此如果能提前知道常见的web前端面试内容，可以让就业机会大大提高。接下来就和大家分享一下常见的web前端开发面试题有哪些？

1.什么是浏览器回流和重绘、重排

页面任何的变化都可以称为页面重构：完全重构、细节调整。

重绘是一个 元素外观 的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排。

重排是更明显的一种改变，可以理解为渲染树需要重新计算。

2.如何优化图片加载速度

1.优化图片资源的格式和大小

一个网页中，图片资源的大小占比是最多的，而且单个的文件的大小也很可观。因此，在保证图片质量不变的情况下，尽可能的使用高压缩率的图片格式，图片格式可以按照这个优先级选择webp > jpeg > png > bmp。同时也要根据图片展示尺寸来拉取大小最为匹配的图片资源，不要没事就把原图拉下来使用。以前我就遇到过这种情况，一个196196大小区域展示的图片，它的文件竟然达到了几兆，最后才发现把19601960分辨率的原图拉下来了。

2.开启网络压缩

大部分浏览器在发出请求时，会带上这个标记「Accept-Encoding: gzip, deflate」，表示这个浏览器可以接受以gzip压缩方式传输数据，如果你的网页服务器也支持gzip压缩数据，那么数据以gzip方式传输时，会减少70～80%的流量。

3.css中有哪些单位

1.px：绝对单位，页面按精确像素展示

2.em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

3.rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

4.vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

5.vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

6.vmin：vw和vh中较小的那个。

7.vmax：vw和vh中较大的那个。

8.%:百分比

9.in:寸 

10.cm:厘米

11.mm:毫米

12.pt:point，大约1/72寸

13.pc:pica，大约6pt，1/6寸

14.ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)

15.ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)

4.什么是BFC

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

5.css计算选择器优先级的方式

@important>ID选择器的优先级确实>class选择器的优先级>元素选择器的优先级

1. 内联样式表的权值最高 1000；

2. ID 选择器的权值为 100

3. Class 类选择器的权值为 10

4. HTML 标签选择器的权值为 1

6.注册一个github账号 了解github是什么

1.github是一个基于git的web 协作社区，它有多种机制让大家协同的和你一起的对项目进行贡献。2.github全平台、全设备支持，你可以在任何终端上，随时随地的共享你的代码、评论或着其他有意义的信息。3.这个世界上最大的开源软件社区。

7.什么是硬件加速如何开启css硬件加速

硬件加速（Hardware acceleration）就是利用硬件模块来替代软件算法以充分利用硬件所固有的快速特性。硬件加速通常比软件算法的效率要高。

计算机显示使用硬件加速会快些，但有时会带来负面效果，如会在投影仪或截图时发现显示区是黑的，这时就要关闭硬件加速（硬件加速反方向操作）

以上就是“常见的web前端开发面试题有哪些？”的详细内容，想要了解更多web前端教程欢迎持续关注编程学习网