面试题汇总（其他常见问题篇）

ゝ一世哀愁。 2022-07-12 14:49 219阅读 0赞

## 1、请解释什么是 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的角色，为选中状态。

Screen Reader : 来自维基百科：A screen reader is a software application which, rather than presenting web content visually, converts text into ‘synthesised speech’ allowing user to alternatively listen to content.  
其实就是可以为盲人提供可听或者可触摸的途径，来帮助他们了解网页内容。

关于无障碍访问：  
[http://www.alloyteam.com/2012/10/how-to-develop-accessible-web-site-application/][http_www.alloyteam.com_2012_10_how-to-develop-accessible-web-site-application]

## 2、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？ ##

什么是FOUC(文档样式短暂失效)?  
如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。  
原因大致为：  
1，使用import方法导入样式表。  
2，将样式表放在页面底部  
3，有几个样式表，放在html结构的不同位置。  
其实原理很清楚：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。  
解决方法：  
使用LINK标签将样式表放在文档HEAD中。

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

1.  功能涵盖面，JS比CSS3大  
    定义动画过程的@keyframes不支持递归定义，如果有多种类似的动画过程，需要调节多个参数来生成的话，将会有很大的冗余（比如jQuery Mobile的动画方案），而JS则天然可以以一套函数实现多个不同的动画过程  
    时间尺度上，@keyframes的动画粒度粗，而JS的动画粒度控制可以很细  
    CSS3动画里被支持的时间函数非常少，不够灵活  
    以现有的接口，CSS3动画无法做到支持两个以上的状态转化
2.  实现/重构难度不一，CSS3比JS更简单，性能调优方向固定
3.  对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码
4.  CSS动画有天然事件支持（TransitionEnd、AnimationEnd，但是它们都需要针对浏览器加前缀），JS则需要自己写事件
5.  CSS3有兼容性问题，而JS大多时候没有兼容性问题

*另一个回答：*

CSS3的动画的优点：  
在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化（比如专门新建一个图层用来跑动画）  
代码相对简单

但其缺点也很明显：  
在动画控制上不够灵活  
兼容性不好  
部分动画功能无法实现（如滚动动画，视差滚动等）

JavaScript的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容IE6，并且功能强大。

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

参见阮一峰大神博客：  
[http://www.ruanyifeng.com/blog/2016/04/cors.html][http_www.ruanyifeng.com_blog_2016_04_cors.html]

## 5、请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间） ##

减少http请求（合并文件、合并图片）

优化图片文件，减小其尺寸，特别是缩略图，一定要按尺寸生成缩略图然后调用，不要在网页中用resize方法实现，虽然这样看到的图片外形小了，但是其加载的数据量一点也没减少。普通图像、icon也要尽可能压缩后，可以采用web图像保存、减少颜色数等等方法实现。

图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）

压缩JavaScript、CSS代码：一般js、css文件中存在大量的空格、换行、注释，这些利于阅读，如果能够压缩掉，将会很有利于网络传输。

服务器启用gzip压缩功能：将要传输的文件压缩后传输到客户端再解压，在网络传输数据量会大幅减小。在服务器上的Apache、Nginx可直接启用，也可用代码直接设置传输文件头，增加gzip的设置，也可从负载均衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。服务器性能不是很好的网站，要慎重考虑。

标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。 当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）

网址后面加上“/”:对服务器而言，不加斜杠服务器会多一次判断的过程，加斜杠就会直接返回网站设置的存放在网站根目录下的默认页面。

尽可能减少DOM元素：尽可能减少网页中各种元素数量

文件末尾放Javascript脚本  
网页文件的载入是从上到下加载的，很多Javascript脚本执行效率较低，或者在网页前面都不需要执行的，如果将这些脚本放置到页面比较靠前的位置，可能导致网站内容载入速度下降或加载不了，将这些脚本放置在网页文件末尾，一定要放置在前面的脚本要改用所谓的“后载入”方式加载，在主体网页加载完成后再加载，防止其影响到主体网页的加载速度。

## 6、你能描述渐进增强 (progressive enhancement) 和优雅降级 (graceful degradation) 之间的不同吗? ##

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

[http_www.alloyteam.com_2012_10_how-to-develop-accessible-web-site-application]: http://www.alloyteam.com/2012/10/how-to-develop-accessible-web-site-application/
[http_www.ruanyifeng.com_blog_2016_04_cors.html]: http://www.ruanyifeng.com/blog/2016/04/cors.html