错题回顾与总结

前言

看到朋友圈满天飞的内推和暑假实习生招募信息才恍然大悟已经大三下了，就又到了实习季了。

看到高中计算机专业的好友在牛客网上刷了刷题，于是自己也想去试试。

做了二十道简单的选择题没想到正确率有75%还算不错？

但是还是感觉自己这块的基础知识有待加强，故打算今天开始多点看基础知识，复习同时多刷题，也做好每次的错题整理。

正文

新窗口打开网页用到以下哪个值（）

A._self B._blank C._top D._parent

正解：B

解析：

例如

     <a href="/XXXX"  target="_blank" >打开新的网页</a>

值	描述
_blank	新窗口打开被链接文档（对web来说就是网页）
_self	在相同的框架(一般编写中一个html文件就是一个框架)中打开(默认)
_parent	在父框架打开
_top	清除所有的框架，并在父子关系中最高的祖先框架中打开（也可以理解是清理了所有框架之后直接在本网页打开，对于没有parent的框架来说就相当于_self的效果）
framename	在指定的框架中打开

flash和js通过什么类如何交互?

正解：ExternalInterface

解析：

Flash(编写flash的语言为action script，即AS，与js语法风格相似)提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback：

     ExternalInterface.addCallback("在js里可调用的flash方法名",flash内方法) //在flash中通过这个方法公开 在js中可调用的flash内的方法;
     ExternalInterface.call("js方法",传给js的参数) //在flash里调用js里的方法

下述有关css属性position的属性值的描述，说法错误的是？

A.static：没有定位，元素出现在正常的流中

B.fixed：生成绝对定位的元素，相对于父元素进行定位

C.relative：生成相对定位的元素，相对于元素本身正常位置进行定位

D.absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位

正解：B

解析：

值	描述
absolute	相对于static定位以外的第一个父元素进行定位
fixed	相对于浏览器窗口进行定位
relative	相对于其正常位置进行定位
static	默认值，按照文档流出现在正常位置
inherit	继承父元素中的position值

下面有关浏览器中使用js跨域获取数据的描述，说法错误的是？

A.域名、端口相同，协议不同，属于相同的域

B.js可以使用jsonp进行跨域

C.通过修改document.domain来跨子域

D.使用window.name来进行跨域

正解：A

解析：

只要协议、域名、端口有任何一个不同, 都被当作是不同的域。

A,B选项，关于跨域问题的深入理解详见本人另外一篇文章。

C选项，document.domain设为相同的值后可以用来页面间互相访问JavaScript对象。有点类似jsonp，但是两个页面设置的url值必须是同一个域内的。

D选项，首先清楚window.name的特性：一个window里面可以有多个页面（或者frame），而window的属性都为这些页面所共用，自然name属性也一样，每个页面都对它有读写权限。因此利用window.name来跨域的思路（在同一个页面更新数据的情况下）就是利用一个隐藏的iframe来加载外域的数据（也就是src指向外域），等到这个iframe加载完毕我们就可以拿到它的window.name，也就是数据了，之后让src指向同源地址即可。

具体代码实现可以看这篇简书。

扩充一些别的数据交互方式：
1. image ping
```
     var img=new Image();
     img.onload=img.onerror=function(){
         // do something
     }
     img.src="url?name=value";
```
  请求数据通过查询字符串的形式发送，响应可以是任意内容，通常是像素图或204响应。图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。但只能发送GET请求；无法访问服务器的响应文本，只能用于浏览器与服务器间的单向通信。
2. Comet
  
  Comet可实现服务器向浏览器推送数据。
  
  Comet是实现方式：长轮询和流
  
  短轮询即浏览器定时向服务器发送请求，看有没有数据更新。
  
  长轮询即浏览器向服务器发送一个请求，然后服务器一直保持连接打开，直到有数据可发送。发送完数据后，浏览器关闭连接，随即又向服务器发起一个新请求。其优点是所有浏览器都支持，使用XHR对象和setTimeout()即可实现。
  
  流即浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据，页面的整个生命周期内只使用一个HTTP连接。
3. WebSocket
  
  WebSocket可在一个单独的持久连接上提供全双工、双向通信。
  
  WebSocket使用自定义协议，未加密的连接时ws://；加密的链接是wss://。
  
  注意：
  
  必须给WebSocket构造函数传入绝对URL；
  
  WebSocket可以打开任何站点的连接，是否会与某个域中的页面通信，完全取决于服务器；
  
  WebSocket只能发送纯文本数据，对于复杂的数据结构，在发送之前必须进行序列化JSON.stringify(message))。但这一点也会导致在客户端和服务器之间发送非常少的数据，减少字节开销。
  
  关于websocket，笔者打算会再写一篇博客对此进行详解。
下面有关HTML的Doctype和严格模式与混杂模式的描述，错误的是？

A.<!DOCTYPE> 声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档

B.在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示

C.DOCTYPE不存在或格式不正确会导致文档以标准模式呈现

D.浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法

正解：C

解析：

A选项不用多解释。

B选项中的标准模式和混杂模式(quirks mode)也如选项所描述的一样按照不同方式去显示（此处向下兼容主要是指对老版本ie），当文档标明了<!DOCTYPE html>，且位于文档头部也就是<html>（xml声明也不能放在头部）前面的时候，就是标准模式，反之或者在<!DOCTYPE html>与xml生命之间加了标签、文本、注释就会是混杂模式。具体在显示的时候会有什么局别可以看看这篇博客。

C选项，按照B选项解析的叙述可以知道doctype不存在会以混杂模式显示，故错误。

D选项，DTD(document type definition,文档类型定义)，这里需要注意的是现在使用的html5标准中是不需要编写复杂的dtd的，但是html4中则是需要，并且有严格(strict)和过渡(transitional)两种不同的风格，详情我觉得可以好好阅读一下W3C关于html4的规范，当然了毕竟是比较过时的东西我们做个了解即可，阅读后会更有利于我们理解h5。
下面有关CSS sprites说法错误的是？

A.允许你将一个页面涉及到的所有零星图片都包含到一张大图中去

B.利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位

C.CSS Sprites虽然增加了总的图片的字节，但是很好地减少网页的http请求，从而大大的提高页面的性能

D.CSS Sprites整理起来更为方便，同一个按钮不同状态的图片也不需要一个个切割出来并个别命名

正解：C

先解释C选项，后半句是正确的，也是使用雪碧图的最重要原因，但是雪碧图总体大小是比各张图片字节之和要小的，所以选C。

至于ACD选项不逐一解析了，我们直接来了解雪碧图它本身：

css sprites 在html5支持svg之前，很多网站都会采用这种形式来处理图片。原理就是将图片或者说图标都集合到一张大的图片上，使用时通过利用CSS的“background-image”，“background-repeat”，“background-position”的属性组合进行背景定位，就可以把每个小图标分割出来使用。这样在加载网站必要资源的时候就只需要请求一张图片，减少http请求的次数从而提升页面的性能，并且如上所述一张大图片的字节是更少的，也不在需要对每个图标进行命名分类。但是它的缺点也很明显：首先需要制作一张大图片就十分费工夫，其次需要进行惊喜的定位来使用图标，这样也同时意味着兼容性和可维护性不好，显示的时候一旦不兼容，发生走位就又要重新调整位置，十分麻烦。
下面列出的浏览器，无webkit内核的是（）

A.chrome B.Safari C.搜狗浏览器 D.Firefox

正解：D

解析：chrome、safari、还有诺基亚塞班平台默认浏览器都使用webkit内核，另外的内核有ie使用的trident内核，firefox使用的gecko内核，还有Opera浏览器使用的Presto内核（主要应用在手机的opera mini）。这里我们也复习一下css中的浏览器兼容前缀：

IE:-ms- firefox:-moz- opera:-o- chrome和safari:-webkit-

这里我们需要注意的是像搜狗浏览器这些国产浏览器有些是双核的，这里的双核也不是指两个内核同时处理而是普通的网页使用webkit内核，而一些特定的如银行网站就会使用trident内核。

总结

这些题目中其实并非完全是错题，有些可能是排除法做对了但是并不对每一个知识点都了解透彻，可见虽然在实际项目开发中使用的比较多但是基础知识还是需要一个一个去巩固好。

牛客网前端刷题错题整理（一）

错题回顾与总结

前言

正文

总结

CATALOG

FEATURED TAGS

FRIENDS