前端开发实习面试题（Web篇）

冷不防 2022-12-09 11:55 220阅读 0赞

## 1.http有哪些请求方式？ ##

*  GET方法
    
     *  发送一个请求来取得服务器上的某一资源
 *  POST方法
    
     *  向URL指定的资源提交数据或附加新的数据
 *  PUT方法
    
     *  跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有
 *  HEAD方法
    
     *  只请求页面的首部
 *  DELETE方法
    
     *  删除服务器上的某资源
 *  OPTIONS方法
    
     *  它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息
 *  TRACE方法
    
     *  TRACE方法被用于激发一个远程的，应用层的请求消息回路
 *  CONNECT方法
    
     *  把请求连接转换到透明的TCP/IP通道

## 2.http的状态码有哪几种？分别代表什么意思？ ##

*  1XX：信息状态码
    
     *  100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息。
 *  2XX：成功状态码
    
     *  200 OK 正常返回信息。
     *  201 Created 请求成功并且服务器创建了新的资源。
     *  202 Accepted 服务器已接受请求，但尚未处理。
 *  3XX：重定向
    
     *  301 Moved Permanently 请求的网页已永久移动到新位置。
     *  302 Found 临时性重定向。
     *  303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
     *  304 Not Modified 自从上次请求后，请求的网页未修改过。
 *  4XX：客户端错误
    
     *  400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
     *  401 Unauthorized 请求未授权。
     *  403 Forbidden 禁止访问。
     *  404 Not Found 找不到如何与 URI 相匹配的资源。
 *  5XX: 服务器错误
    
     *  500 Internal Server Error 最常见的服务器端错误。
     *  503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

## 3.get请求和post请求的区别？ ##

*get:* 从指定的资源请求数据，用于获取数据。

*post:* 向指定的资源提交要被处理的数据，用于将数据发送给服务器。

*  get参数通过url传递，post放在request body中，因此get安全性较差，post相对安全，所以不能用get来传递敏感参数
 *  get请求可被缓存，post请求不会被缓存
 *  get请求可被收藏为书签，post不能被收藏为书签
 *  get请求保留在浏览器历史记录中，post请求不会保留在浏览器历史记录中
 *  get请求有长度限制，post请求对数据长度没有要求
 *  get和post本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同
 *  get产生一个TCP数据包；postT产生两个TCP数据包

## 4.介绍一下你对浏览器内核的理解？常见浏览器的内核是什么？ ##

*  主要分成两部分：渲染引擎(`layout engineer`或`Rendering Engine`)和`JS`引擎
 *  渲染引擎：负责取得网页的内容（`HTML`、`XML`、图像等等）、整理讯息（例如加入`CSS`等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
 *  `JS`引擎则：解析和执行`javascript`来实现网页的动态效果
 *  最开始渲染引擎和`JS`引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。  
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎。  
常见的浏览器内核：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70][]

不同浏览器的默认样式存在差异，可以使用 `Normalize.css` 抹平这些差异。

## 5.如何解决常见浏览器兼容性问题？ ##

**（1）****不同浏览器的标签默认的外补丁和内补丁不同**

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

碰到频率:100%

解决方案：CSS里    \*\{margin:0;padding:0;\}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符\*来设置各个标签的内外补丁是0。

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

问题症状:常见症状是IE6中后面的一块被顶到下一行

碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

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

问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

碰到频率：60%

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

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

问题症状：IE6里的间距比超过设置的间距

碰到几率：20%

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

备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

**（5）****图片默认有间距**

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

碰到几率：20%

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）

**（6）****标签最低高度设置min-height不兼容**

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容

碰到几率：5%

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：\{min-height:200px; height:auto !important; height:200px; overflow:visible;\}

备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

**（7）****透明度的兼容CSS设置**

.transparent_class {  
          filter:alpha(opacity=50);  
          -moz-opacity:0.5;  
          -khtml-opacity: 0.5;  
          opacity: 0.5;  
    }

如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

*  IE6认识的hacker 是下划线\_ 和星号 \*
 *  IE7 遨游认识的hacker是星号 \*

比如这样一个CSS设置：

height:300px;\*height:200px;\_height:100px;   
IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识\*heihgt， 所以当IE6读到\*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识\_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；

IE7和遨游也是一样的从高度300px的设置往下读。当它们读到\*height200px的时候就停下了，因为它们不认识\_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

**（8）IE6****双边距问题:在 IE6中设置了float , 同时又设置margin , 就会出现边距问题**  
解决方案：设置display:inline;

**（9）****当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度**  
解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

**（10）****图片默认有间距**  
解决方案：使用float 为img 布局

**（11）IE9****一下浏览器不能使用opacity**  
解决方案：  
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

**（12）****边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；**  
解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

**（13）cursor:hand** **显示手型在safari 上不支持**  
解决方案：统一使用 cursor:pointer

**（14）****两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；**  
解决方案：父级元素设置position:relative

**（15）IE6 背景闪烁的问题**

问题：链接、按钮用 `CSSsprites` 作为背景，在 `ie6` 下会有背景图闪烁的现象。原因是 `IE6` 没有将背景图缓存，每次触发 `hover` 的时候都会重新加载

解决：可以用 `JavaScript` 设置 `ie6` 缓存这些图片：

document.execCommand("BackgroundImageCache", false, true);

**（16）解决在 IE6 下，列表与日期错位的问题**

日期`` 标签放在标题 `<a>` 标签之前即可

**（17）解决 `IE6` 不支持 `min-height` 属性的问题**

min-height: 350px;
    _height: 350px;

**（18）让 `IE7、IE8` 支持 `CSS3中background-size`属性**

由于 background-size 是 CSS3 新增的属性，所以 IE 低版本自然就不支持了，但是老外写了一个 htc 文件，名叫 [background-size polyfill][]，使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。

html {
      height: 100%;
    }
    body {
      height: 100%;
      margin: 0;
      padding: 0;
      background-image: url('img/37.png');
      background-repeat: no-repeat;
      background-size: cover;
      -ms-behavior: url('css/backgroundsize.min.htc');
      behavior: url('css/backgroundsize.min.htc');
    }

**（19）IE6-7 `line-height` 失效的问题**

问题：在`ie` 中 `img` 与文字放一起时，`line-height` 不起作用

解决：都设置成 `float`

**`width:100%`**

`width:100%` 这个东西在 `ie` 里用很方便，会向上逐层搜索 `width` 值，忽视浮动层的影响.

`Firefox` 下搜索至浮动层结束，如此，只能给中间的所有浮动层加 `width:100%`才行，累啊。

`opera` 这点倒学乖了，跟了 `ie`

**`cursor:hand`**

显示手型 `cursor: hand`，ie6/7/8、opera 都支持，但是safari 、 ff 不支持

cursor: pointer;

**（20）td 自动换行的问题**

问题：`table` 宽度固定，`td` 自动换行

解决：设置 `Table` 为 `table-layout: fixed`，`td` 为 `word-wrap: break-word`

**（21）让层显示在 `FLASH` 之上**

想让层的内容显示在 flash 上，把 FLASH 设置透明即可

1、<param name=" wmode " value="transparent" />

2、<param name="wmode" value="opaque"/>

**（22）键盘事件 `keyCode` 兼容性写法**

var inp = document.getElementById('inp')
    var result = document.getElementById('result')
    
    function getKeyCode(e) {
      e = e ? e : (window.event ? window.event : "")
      return e.keyCode ? e.keyCode : e.which
    }
    
    inp.onkeypress = function(e) {
      result.innerHTML = getKeyCode(e)
    }

**（23）求窗口大小的兼容写法**

// 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）
    // 1600 * 525
    var client_w = document.documentElement.clientWidth || document.body.clientWidth;
    var client_h = document.documentElement.clientHeight || document.body.clientHeight;
    
    // 网页内容实际宽高（包括工具栏和滚动条等边线）
    // 1600 * 8
    var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
    var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;
    
    // 网页内容实际宽高 (不包括工具栏和滚动条等边线）
    // 1600 * 8
    var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
    var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;
    
    // 滚动的高度
    var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;

**（24）DOM 事件处理程序的兼容写法**

以上皆是本人目前在广州找实习期间亲身经历过的面试题中的Web相关问题，部分答案源于网上，如有错漏或有更好的答案也欢迎大家指出，仅作为笔记收录使用，也衷心希望各位能少走弯路，能够找到自己心仪的工作！春招后更新！

[前端][Link 1]开发交流QQ群：761614159

求职[前端][Link 1]开发的小伙伴可以进群交流一下！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70]: /images/20221123/79ef266a85d34af883f1a220e6092e04.png
[background-size polyfill]: https://link.juejin.im/?target=%E6%A0%87%E7%AD%BE
[Link 1]: https://www.nowcoder.com/jump/super-jump/word?word=%E5%89%8D%E7%AB%AF