前端面试题四

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

作者：王不懂Sir
链接：https://www.jianshu.com/p/d93c8dab3895
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。