前端面试技巧和注意事项_2020大厂web前端面试常见问题总结

本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题。通过对本篇知识的整理以及经验的总结，希望能帮到更多的前端面试者。

1.web前端项目的结构是怎样的？文件有哪些命名规范？

项目结构规范

页面文件：以项目名命名，例如：shop

js文件：命名为js

css文件：命名为css

图片文件：命名为images

数据文件：命名为data

文件存储规范：按项目模块分类存储，例如：用户信息管理

页面文件存放： shop/userinfo/userlist.html

js文件：js/userinfo/userlist.js

css样式：css/userinfo/userlist.css

注意：图片的分类一般按照功能作用划分，比如： 小图标、动画图片

动画图片：images/gif/…

图标库：images/flags/…

项目文件命名规范

页面/js/css文件规范：项目名称-模块名称-页面名称，例如：shop-user-index.html用户模块的首页。

注意：js一般会包含 公共js 习惯命名commo.js；css样式会包含公共css，习惯命名为 common.css。

2.谈谈浏览器的兼容性

这个问题是非常抽象的，越是抽象的问题越能表现出我们的表达能力，而面试官就喜欢根据你的回答来追问，不断地打断你的思路，这个时候不要慌，一定要坚信自己。

回答思路

我们在开发的时候会明确项目要兼容哪些浏览器的最低版本，我之前的项目要求兼容IE8.0以上的版本，Chrome 48以上，FireFox 44以上。有了这些最基本的要求，在开发中就是要考虑到CSS样式和JavaScript的在这些浏览器的兼容性了

html部分

1.H5新标签在IE9以下的浏览器识别

2.ul标签内外边距问题ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。解决方法：统一设置ul的内外边距为0

CSS样式的兼容性

1.css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同

IE的条件注释hack：

2.IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍

解决办法：display:block;

3.IE6下图片的下方有空隙

解决方法：给img设置display:block;

4.IE6下两个float之间会有个3px的bug

解决办法：给右边的元素也设置float:left;

5.IE6下没有min-width的概念，其默认的width就是min-width

6.IE6下在使用margin:0 auto;无法使其居中

解决办法：为其父容器设置text-align:center;

7.被点击过后的超链接不再具有hover和active属性

解决办法:按lvha的顺序书写css样式，

":link": a标签还未被访问的状态；

":visited": a标签已被访问过的状态；

":hover": 鼠标悬停在a标签上的状态；

":active": a标签被鼠标按着时的状态；

8.在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0， 子高父低，所以不会改变显示的顺序

9.IE6下无法设置1px的行高，原因是由其默认行高引起的

解决办法：为期设置overflow:hidden;或者line-height:1px;

JavaScript的兼容性

1.标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；

2.事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准

3.window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement

4.在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致，获取的值也是与1900的差值。

比如：var year= new Date().getYear();

5.ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject

6.IE中不能操作tr的innerHtml7.获得DOM节点的父节点、子节点的方式不同

其他浏览器：parentNode parentNode.childNodes

IE：parentElement parentElement.children

3.页面优化有哪些方法

页面优化的方法非常多，最好能够对这些优化方案进行分类，这些方案最好能够结合实际开发遇到的问题来表述。

优化的方案

减少操作量

尽量减少 HTTP 请求

1) 合并文件，比如把多个 CSS 文件合成一个；

2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位；

不要在 HTML 中使用缩放图片

缩放图片并没有减少图片的容量，只是控制了图片的大小。

Image压缩

使用工具对图片进行压缩，保证质量的同时减少了图片的大小。

减少对DOM的操作

减少对DOM的操作，减少页面的重绘。

提前做加载操作

对域名进行预解析

例如京东的做法

预载入组件或延迟载入组件

把 CSS 放到代码页上端

CSS 放到最顶部，浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。

使用 new Image对象，对图片进行缓存

提升并行加载

切分组件到多个域 ，提升服务器的响应能力

JavaScript和CSS优化

从页面中剥离 JavaScript 与 CSS

剥离后，能够有针对性的对其进行单独的处理策略，比如压缩或者缓存策略。

精简 JavaScript 与 CSS

使用工具压缩JavaScript和CSS文件

脚本放到 HTML 代码页底部

减少对页面的阻塞。

异步加载

使用Ajax实现异步加载，例如，滚动页面加载后面的内容，这种也比较常见。

4.页面渲染原理是什么？

这是一道纯理论的题目，只要能够将浏览器的渲染过程很专业的表述出来，一定会得到面试官的青睐，作为一枚前端人员确实有必要了解一下浏览器的渲染过程是怎样的，对于页面性能的提升是有帮助的。

解题思路

渲染引擎是干什么的

渲染引擎可以显示html、xml文档及图片，它也可以借助插件(一种浏览器扩展)显示其他类型数据，例如使用PDF阅读器插件可以显示PDF格式。

渲染引擎

不同的浏览器有不同的渲染引擎，对于渲染引擎的使用总结如下：

Trident(MSHTML)内核：IE,MaxThon,TT,The World,360,搜狗浏览器等

Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto内核：Opera7及以上

Webkit内核：Safari,Chrome等

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

步骤详细解释

第一步：渲染引擎开始解析html，根据标签构建DOM节点

第二步：根据css样式构建渲染树，包括元素的大小、颜色，隐藏的元素不会被构建到该树中。

第三步：根据css样式构建布局树，主要是确定元素要显示的位置。

第四步：根据前面的信息，绘制渲染树。

5.什么是响应式开发？

响应式开发是前端开发工作比较常见的工作内容，随着移动互联网的发展，移动端设计越来越重要，很多项目都是移动端项目先开发，而后是PC端的开发，为了降低运营成本和开发成本，同一个网站要能兼容PC端和移动端显示呼之欲出，进而响应式开发成了前端开发人员必备的技能，所以响应式开发的技术必须掌握。

什么是响应式

顾名思义，同一个网站兼容不同的大小的设备。如PC端、移动端(平板、横屏、竖排)的显示风格。

需要用到的技术

1. Media Query(媒体查询)

用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸，是否可触摸，屏幕精度，横屏竖屏等信息。

2. 使用em或rem做尺寸单位

用于文字大小的响应和弹性布局。

3. 禁止页面缩放

4. 屏幕尺寸响应

a) 固定布局：页面居中，两边留白，他能适应大于某个值一定范围的宽度，但是如果太宽就会有很多留白，太窄会出现滚动条，在PC页面上很常见。

b) 流动布局：屏幕尺寸在一定范围内变化时，不改变模块布局，只改变模块尺寸比例。比固定布局更具响应能力，两边不留白，但是也只能适应有限的宽度变化范围，否则模块会被挤(拉)得不成样子。

c) 自定义布局：上面几种布局方式都无法跨域大尺寸变化，所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。

d) 栅格布局：这种布局方式使得模块之间非常容易对齐，易于模块位置的改变用于辅助自定义布局。

响应式设计注意事项

1.宽度不固定，可以使用百分比

head{width:100%;}

content{width:50%;}

2. 图片处理

图片的宽度和高度设置等比缩放，可以设置图片的width为百分比，height:auto;

背景图片可以使用background-size 指定背景图片的大小。

6.html5有哪些新特性、移除了那些元素？

题目涉及到范围非常的大，如果要面面俱到显然半天都答不完，可以先罗列出H5的一些新特性，不要回答那么具体，等面试官提具体的问题，所以在面试之前也要把这里的技术过一遍，至少每个技术也要做个小程序出来体验一下。

H5新特性

增强了图形渲染、影音、数据存储、多任务处理等处理能力主要表现在

绘画 canvas;

类似windows自带的画图板，可绘制线、框、路径、图……，InternetExplorer 9、Firefox、Opera、Chrome 以及 Safari 支持 及其属性和方法。

画图需要的要素

a) 笔，用笔可以画线、圆、矩形、文本等

b) 颜色

c) 画板

由于画布案例比较多，代码比较复杂，可以在w3cschool上查看相关教程

2) 本地离线存储 localStorage

长期存储数据，浏览器关闭后数据不丢失;

1.特点

数据永久存储，没有时间限制；大小限制5M(够用了)；只存储字符串。

2.数据存取方式

localStorage.a = 3;//设置a为"3"

localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值

localStorage.setItem("b","isaac");//设置b为"isaac"

var a1 = localStorage["a"];//获取a的值

var a2 = localStorage.a;//获取a的值

var b = localStorage.getItem("b");//获取b的值

var b2= localStorage.key(0);//获取第一个key的内容

localStorage.removeItem("c");//清除c的值

localStorage.clear();//清除所有的数据

推荐使用：

getItem()

setItem()

removeItem()

3.事件监听

if(window.addEventListener){

window.addEventListener("storage",handle_storage,false);//

}else if(window.attachEvent){ //兼容IE

window.attachEvent("onstorage",handle_storage);

}

function handle_storage(e){

}

对象e为localStorage对象，Chrome、Firefox支持差，IE支持较好。

3) sessionStorage的数据在浏览器关闭后自动删除;操作参考localStorage

4) 用于媒介回放的 video和 audio 元素;

5) 语意化更好的内容元素，比如article、footer、header、nav、section;

6) 表单控件，calendar、date、time、email、url、search;

7) 新的技术webworker(专用线程)

8) websocketsocket通信

9) Geolocation 地理定位

移除的元素

纯表现的元素

默认字体，不设置字体，以此渲染

字体标签

水平居中

下划线

大字体

中横线

文本等宽

框架集