2018最新前端面试题四

这次给大家带来2018最新前端面试题，我们知道当你进入一个公司工作之前，面试这个阶段是必不可少的一部分，这次的前端面试常考问题分类整理汇总就是来帮助大家度过前端面试这一大难关。一起来看一下。

【相关推荐：前端面试题（2020）】

1、什么是FOUC (无样式内容闪烁)？你如何来避免FOUC？

如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。

原因大致为：

1，使用import方法导入样式表。

2，将样式表放在页面底部

3，有几个样式表，放在html结构的不同位置。

其实原理很清楚：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

解决方法：

使用LINK标签将样式表放在文档HEAD中。

2、请解释什么是ARIA和屏幕阅读器(screenreaders)，以及如何使网站实现无障碍访问(accessible)。

ARIA 为Web app提供满足用户不同需求的解决方案。建设起用户和软件之间的桥梁。

新的HTML5标准中增加 aria-* 的标签属性，全称Accessible Rich Internet Application。与role标签属性配合使用。

role属性表示一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button。而aria-*的作用就是描述这个tag在可视化的情境中的具体信息。

最简单的应用比如，

           < div role=”checkbox” aria-checked=”checked”>

辅助工具就会知道，这个div实际上是个checkbox的角色，为选中状态。

3、请解释CSS动画和JavaScript动画的优缺点。

1. css3动画只兼容Ie10+，js动画几乎兼容所有浏览器；

2.js动画更灵活，css3动画更简单

3.js动画复用性高

4.时间尺度上，css动画粒度比较粗，js动画可以更精细；

5.帧速不好的浏览器CSS动画可以做到优雅降级，js代码还需要写额外的代码

6.在某些条件下，css动画性能优于JS动画；（webkit内核的浏览器，js执行昂贵的任务，不引起layout和repaint情况下）

7.css3有天然的时间支持如（animationENd和transitionEnd）

4、什么是跨域资源共享(CORS)？它用于解决什么问题？

当使用ajax跨域请求时，浏览器报错：XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin.肯定是跨域的问题，如果用jsonp或者proxy的方式进行修改的话未免需要太大的工程量，所以采用CORS这种比较简单高效的技术。相比JOSP的方式，CORS更为高效。JSONP由于它的原理只能实现GET请求，而CORS支持所有类型的HTTP请求。使用CORS,可以使用普通的ajax实现跨域

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

相关阅读：

2018最新前端面试题一

2018最新前端面试题二

2018最新前端面试题三

以上就是2018最新前端面试题四的详细内容，更多请关注其它相关文章！