web前端面试题整理

青旅半醒 2022-05-19 01:16 275阅读 0赞

## 前端和计算机相关知识 ##

**1. 你能描述一下渐进增强和优雅降级之间的不同吗?**

定义:  
优雅降级（graceful degradation): 一开始就构建站点的完整功能，然后针对浏览器测试和修复  
渐进增强（progressive enhancement): 一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。  
都关注于同一网站在不同设备里不同浏览器下的表现程度

区别:  
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站. 而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。  
“渐进增强”观点则认为应关注于内容本身。请注意其中的差别：我甚至连“浏览器”三个字都没提。

理解:  
“优雅降级”就是首先完整地实现整个网站,包括其中的功能和效果. 然后再为那些无法支持所有功能的浏览器增加候选方案, 使之在旧式浏览器上以某种形式降级体验却不至于完全失效.  
“渐进增强”则是从浏览器支持的基本功能开始, 首先为所有设备准备好清晰且语义化的html及完整内容, 然后再以无侵入的方法向页面增加无害于基础浏览器的额外样式和功能. 当浏览器升级时, 它们会自动呈现并发挥作用.

**2. 浏览器兼容问题:**

问题1   不同浏览器的标签默认的外补丁和内补丁不同.

即随便写几个标签, 在不加样式控制的情况下, 各自的margin和padding差异较大.  
解决方法: CCS里: \*\{margin:0; padding:0\}

问题2   块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

会使得ie6后面的一块被顶到下一行.  
解决方案: 在float的标签样式中加入 display: inline; 将其转化为行内属性

问题3  设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度  
解决方案: 给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度  
原因: ie8之前的浏览器都会给标签一个最小默认的行高的高度. 即使标签是空的,这个标签的高度还是会达到默认的行高.

问题4  行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

解决: 在display:block;后面加入display:inline;display:table;

问题5  图片默认有间距

几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。  
解决: 使用float属性为img布局

问题6  标签最低高度设置min-height不兼容

因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容  
如果我们要设置一个标签的最小高度200px，需要进行的设置为：\{min-height:200px; height:auto !important; height:200px; overflow:visible;\}

问题7  透明度的兼容CSS设置

使用hacker  
IE6认识的hacker是下划线\_和\*  
IE7,遨游认识的hacker是\*

问题8  IE ol的序号全为1, 不递增

解决: li设置样式\{display: list-item\}

问题9 ie6,7不支持display:inline-block

解决方法: 设置inline并触法haslayout  
display:inline-block; \*display:inline; \*zoom:1

**3. 如何对网站的文件和资源进行优化?**

文件合并  
减少调用其他页面、文件的数量。一般我们为了让页面生动活泼会大量使用background来加载背景图，而每个 background的图像都会产生1次HTTP请求，要改善这个状况，可以采用css的1个有用的background-position属 性来加载背景图，我们将需要频繁加载的多个图片合成为1个单独的图片，需要加载时可以采用：background:url(….) no-repeat x-offset y-offset;的形式加载即可将这部分图片加载的HTTP请求缩减为1个。  
每个http请求都会产生一次从你的浏览器到服务器端网络往返过程，并且导致推迟到达服务器端和返回浏览器端的时间，我们称之为延迟。

文件最小化/文件压缩  
即将需要传输的内容压缩后传输到客户端再解压，这样在网络上传输的 数据量就会大幅减小。通常在服务器上的Apache、Nginx可以直接开启这个设置，也可以从代码角度直接设置传输文件头，增加gzip的设置，也可以 从 负载均衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。建议服务器性能不是很好的网站，要慎重考虑。  
js和css文件在百度上搜一个压缩网站就能压缩，但是在实际开发的项目中，使用gulp、webpack等工具可以打包出合并压缩后的文件，小图片可以在打包时转换成base64方式引入，大图片可以被压缩，html文件也是可以被压缩的

使用 CDN 托管  
CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

缓存的使用  
Ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的