2018最新前端面试题四

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实现跨域

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

相关阅读：

2018最新前端面试题一

2018最新前端面试题二

2018最新前端面试题三

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