目前的你是否有一颗跳槽的心呢?这次应学员的要求，小知姐姐总结了与前端相关的面试题，其中包括阿里+网易等大厂面试题，相信你看完之后一定会跳槽成功哦~

由于题目较多，答案内容较详细，以下为部分题目及部分答案，全部的面试题及答案以网盘的形式分享给大家哦~ 完整版文末查看获取方式哦~

· CSS常用布局

参考答案：CSS常用布局为盒模型div+css、其中需要注意IE的怪异盒模型，我们通常通过box-sizing解决。传统盒模型布局方式中我们可以细分为文档流布局、浮动布局、定位布局。在ie10+中我们可以使用flex布局，其中我们需要理解最为核心的容器和轴的概念。二维布局中，我们可以使用Grid布局。对于三栏布局，除了浮动实现方式，还有双飞翼布局和圣杯布局。其实双飞翼布局就是对圣杯布局的bug修复，一种改造升级。

· 什么是渐进式渲染（progressive rendering）

部分参考答案：渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。

· BFC

部分参考答案：BFC即为块级格式化上下文。在普通流的Box属于一种formatting box，类型可以为block或者为inline。但是不能同时为这两者。并且Block boxes在block formatting context里格式化，inline boxes在inline formatting context中格式化，任何被渲染的元素都属于一个box，不是block就是inline。

· Viewport

部分参考答案：字面意思为视图窗口，在移动web开发中使用。表示将设备浏览器宽度虚拟成一个特定的值（或计算得出），这样利于移动web站点跨设备显示效果基本一致。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

· Viewport属性值

部分参考答案：width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"initial-scale 设置页面的初始缩放值，为一个数字，可以带小数minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数

· Reflow和Repaint

部分参考答案：Reflow：当涉及到DOM节点的布局属性发生变化时，就会重新计算该属性，浏览器会重新描绘相应的元素，此过程叫Reflow（回流或重排）。Repaint：当影响DOM元素可见性的属性发生变化 (如 color) 时, 浏览器会重新描绘相应的元素, 此过程称为Repaint（重绘）。因此重排必然会引起重绘。

· img中的alt和元素的title属性作用

部分参考答案：img的alt属性：如果无法显示图像，浏览器将显示alt指定的内容元素title属性：在鼠标移到元素上时显示title的内容

· href和src区别

部分参考答案：href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

· 浏览器的渲染过程

部分参考答案：解析HTML生成DOM树；解析CSS生成CSSOM规则树；将DOM树与CSSOM规则树合并在一起生成渲染树；遍历渲染树开始布局，计算每个节点的位置大小信息；将渲染树每个节点绘制到屏幕。

· px/em/rem的区别

部分参考答案：px顾名思义就是我们通常说的像素大小。em和rem都是相对大小，不过em是继承父级元素的字体大小，rem是相对于根元素的大小，这个单位可谓是集相对大小和绝对大小为一身。通过它可以做到只修改根元素即可修改所有字体的大小，又可以避免字体大小逐层复合的连锁反应。当rem相对于浏览器进行缩放，1rem默认为16px。

· animation和transition

部分参考答案：写法：animation：name duration timing-function delay iteration-function direction .transition为过渡动画，这种效果可以在事件中触发，并且圆滑的以动画效果改变css的属性值。不同于transform，transform为2D转换。


扫码或搜索添加vx (csheima7) 回复 前端面试题 即可获取链接

目前的你是否有一颗跳槽的心呢?这次应学员的要求，小知姐姐总结了与前端相关的面试题，其中包括阿里+网易等大厂面试题，相信你看完之后一定会跳槽成功哦~

由于题目较多，答案内容较详细，以下为部分题目及部分答案，全部的面试题及答案以网盘的形式分享给大家哦~ 完整版文末查看获取方式哦~

· CSS常用布局

参考答案：CSS常用布局为盒模型div+css、其中需要注意IE的怪异盒模型，我们通常通过box-sizing解决。传统盒模型布局方式中我们可以细分为文档流布局、浮动布局、定位布局。在ie10+中我们可以使用flex布局，其中我们需要理解最为核心的容器和轴的概念。二维布局中，我们可以使用Grid布局。对于三栏布局，除了浮动实现方式，还有双飞翼布局和圣杯布局。其实双飞翼布局就是对圣杯布局的bug修复，一种改造升级。

· 什么是渐进式渲染（progressive rendering）

部分参考答案：渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。

· BFC

部分参考答案：BFC即为块级格式化上下文。在普通流的Box属于一种formatting box，类型可以为block或者为inline。但是不能同时为这两者。并且Block boxes在block formatting context里格式化，inline boxes在inline formatting context中格式化，任何被渲染的元素都属于一个box，不是block就是inline。

· Viewport

部分参考答案：字面意思为视图窗口，在移动web开发中使用。表示将设备浏览器宽度虚拟成一个特定的值（或计算得出），这样利于移动web站点跨设备显示效果基本一致。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

· Viewport属性值

部分参考答案：width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"initial-scale 设置页面的初始缩放值，为一个数字，可以带小数minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数

· Reflow和Repaint

部分参考答案：Reflow：当涉及到DOM节点的布局属性发生变化时，就会重新计算该属性，浏览器会重新描绘相应的元素，此过程叫Reflow（回流或重排）。Repaint：当影响DOM元素可见性的属性发生变化 (如 color) 时, 浏览器会重新描绘相应的元素, 此过程称为Repaint（重绘）。因此重排必然会引起重绘。

· img中的alt和元素的title属性作用

部分参考答案：img的alt属性：如果无法显示图像，浏览器将显示alt指定的内容元素title属性：在鼠标移到元素上时显示title的内容

· href和src区别

部分参考答案：href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

· 浏览器的渲染过程

部分参考答案：解析HTML生成DOM树；解析CSS生成CSSOM规则树；将DOM树与CSSOM规则树合并在一起生成渲染树；遍历渲染树开始布局，计算每个节点的位置大小信息；将渲染树每个节点绘制到屏幕。

· px/em/rem的区别

部分参考答案：px顾名思义就是我们通常说的像素大小。em和rem都是相对大小，不过em是继承父级元素的字体大小，rem是相对于根元素的大小，这个单位可谓是集相对大小和绝对大小为一身。通过它可以做到只修改根元素即可修改所有字体的大小，又可以避免字体大小逐层复合的连锁反应。当rem相对于浏览器进行缩放，1rem默认为16px。

· animation和transition

部分参考答案：写法：animation：name duration timing-function delay iteration-function direction .transition为过渡动画，这种效果可以在事件中触发，并且圆滑的以动画效果改变css的属性值。不同于transform，transform为2D转换。


扫码或搜索添加vx (csheima7) 回复 前端面试题 即可获取链接