前端笔试基础题

最近在复习前端知识时，将遇到的一些前端基础整理一下。

只要 协议、域名、端口 有任何一个不同, 都被当作是不同的域。
onBlur: 当失去输入焦点后产生该事件
onFocus: 当输入获得焦点后，产生该文件
onchange: 当文字值改变时，产生该事件
onselect: 当文字加亮后，产生该事件
onClick: 当组件被点击时产生的事件
DOCTYPE不存在或格式不正确会导致文档以 混杂模式 呈现
call() 方法和 apply() 方法的 作用相同 ，他们的区别在于 接收参数的方式不同 。对于call()，第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。(在使用call()）方法时，传递给函数的参数必须逐个列举出来。使用apply()时，传递给函数的是 参数数组 ) 如下代码做出解释：
1
2
3
4
5
6
function add (c, d) {
return this.a + this.b + c + d
}
var o = { a: 1, b: 3 }
add.call(o, 5, 7) // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]) // 1 + 3 + 10 + 20 = 34
CSS Sprites 在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了
- 利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点
- CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和

浏览器几大内核：
- Trident : IE 以Trident 作为内核引擎
- Gecko : Firefox 是基于 Gecko 开发
- WebKit : Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器
- Presto : Opera的内核，但由于市场选择问题，主要应用在手机平台–Opera mini
- 注：2013年2月Opera宣布转向WebKit引擎, 2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎

事件对象的 clientX, offsetX, screenX, pageX 有什么区别？

event.clientX、event.clientY: 鼠标相对于浏览器窗口可视区域的X, Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。
event.pageX、event.pageY: 鼠标相对于整个页面的X/Y坐标。注意，整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX, pageY的最大值就是它们了。特别说明：IE不支持！
screenX、screenY: 鼠标相对于用户显示器屏幕左上角的X, Y坐标。
event.offsetX、event.offsetY: 鼠标相对于事件父容器（srcElement）的X, Y坐标。特别说明：只有IE支持！

HTTP 状态码的主要类型有哪些？

1xx消息——请求已被服务器接收，继续处理
2xx成功——请求已成功被服务器接收、理解、并接受
3xx重定向——需要后续操作才能完成这一请求
4xx请求错误——请求含有词法错误或者无法被执行
5xx服务器错误——服务器在处理某个正确请求时发生错误

new 操作符到底做了什么

创建一个新对象
将构造函数的作用域赋给新对象(因此this就指向了这个新对象)
执行构造函数的代码(为这话新对象添加属性)

返回新对象

1
2
3

var obj = {}
obj.__proto__ = fn.prototype
fn.call(obj)

OSI, TCP/IP, 五层协议的体系结构，以及各层协议？
- OSI分层(7层)：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层
- TCP/IP分层(4层)：网络接口层、网际层、运输层、应用层
- 五层协议(5层)：物理层、数据链路层、网络层、运输层、应用层
- 每一层的协议如下：
  - 物理层：RJ54、CLOCK、IEEE802.3(中继器，集线器)
  - 数据链路层：PPP、FR、HDLC、VLAN、MAC(网桥，交换机)
  - 网络层：IP、ICMP、ARP、RARP、OSPF、IPX、RIP、IGRP、(路由器)
  - 传输层：TCP、UDP、SPX
  - 会话层：NFS、SQL、NETBIOS、RPC
  - 表示层：JPEG、MPEG、ASII
  - 应用层：FTP、DNS、Telnet、SMTP、HTTP、WWW、NFS
- 每一层的作用如下：
  - 物理层：通过媒介传输比特，确定机械及电气规范(比特Bit)
  - 数据链路层：将比特组装成帧和点对点的传递(帧Frame)
  - 网络层：负责数据包从源到宿的传递和网际互连(包PackeT)
  - 传输层：负责端到端的可靠报文传递和错误恢复(段Segment)
  - 会话层：建立、管理和终止会话(会话协议数据单元SPDU)
  - 表示层：对数据进行翻译、加密和压缩(表示协议数据单元PPDU)
  - 应用层：允许访问OSI环境的手段(应用协议数据单元APDU)

互联网上各类协议的介绍
1. ICMP协议：因特网控制报文协议。它是TCP/IP协议族的一个子协议，用于在IP主机、路由器之间传递控制消息。
2. TFTP协议：是TCP/IP协议族中的一个用在客户机与服务器之间进行简单文件传输的协议，提供不复杂，开销不大的文件传输服务。
3. HTTP协议：超文本传输协议，是一个属于应用层的面向对象的协议，由于其简洁、快速的方式，适用于分布式超媒体信息系统。
4. DHCP协议：动态主机配置协议，是一种得以让系统连接到网络上，并获取所需要的配置参数手段。
5. NAT协议：网络地址转换属接入广域网(WAN)技术，是一种将私有(保留)地址转化为合法IP地址的转换技术
6. DHCP协议：一个局域网的网络协议，使用UDP协议工作，用途：给内部网络或网络服务供应商自动分配IP地址，给用户或这内部管理员作为对所有计算机作中央处理的手段。

TCP和UDP的区别
TCP提供面向连接的、可靠的数据流的传输，而UDP提供的是非面向连接的、不可靠的数据流的传输；TCP传输单位称为TCP报文段，UDP传输单位称为用户数据报；TCP注重数据安全性，UDP数据传输快，因为不需要等待连接，少了很多操作，但是其安全性一般；TCP和UDP对应的协议如下：

TCP协议
  1. FTP：定义了文件传输协议，使用21端口。
  2. Telnet：一种用于远程登录的端口，使用23端口，用户可以以自己的身份，远程连接到计算机上，可以提供基于DOS模式下的通信服务。
  3. SMTP：邮件传送协议，用于发送邮件，服务器开放的是25端口。
  4. POP3：它是和SMTP对应，POP3用于接收邮件，POP3协议所用的是110端口

UDP协议
  1. DNS：用于域名解析服务，将域名地址转化为IP地址，使用53端口。
  2. SNMP：简单网络管理协议，用来管理网络设备，由于网络设备很多，无连接的服务就体现其优势，使用161端口。
  3. TFTP：简单文件传输协议，该协议在熟知端口69上使用UDP服务。

如何进行网站性能优化
- content方面
  - 减少HTTP请求：合并文件、css sprites、inline image
  - 减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何文件。方法：DNS缓存，将资源分布到恰当数量的主机名，平衡并行下载和DNS查询
  - 避免重定向：多余的中间访问
  - 使Ajax可缓存
  - 非必须组件延迟加载
  - 未来所需组件预加载
  - 减少DOM元素数量
  - 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
  - 减少iframe数量
  - 不用404
- Server方面
  - 使用CDN
  - 使用Expires或者Cache-Control响应头
  - 对组件进行Gzip压缩
  - 配置ETag(实体标签，HTTP中并没有指定如何生成ETag，哈希是比较理想的选择。)
  - Flush Buffer Early(尽可能早地发送缓冲区内容)
  - Ajax使用GET进行请求
  - 避免空src的img标签
- Cookie方面
  - 减小cookie大小
  - 引入资源的域名不要包含cookie
- css方面
  - 将样式表放到页面顶部
  - 不使用css表达式
  - 尽量不使用@import
  - 不使用IE的Filter
- Javascript方面
  - 将脚本放到页面底部
  - 将javascript和css从外部引入
  - 压缩javascript和css
  - 删除不需要的脚本
  - 减少DOM访问
  - 合理设计事件监听器
- 图片方面
  - 优化图片：根据实际颜色需要选择色深、压缩
  - 优化css精灵
  - 不要再HTML中拉伸图片
  - 保证favicon.ico小并且可缓存
- 移动方面
  - 保证组件小于25k
  - Pack Components into a Multipart Document

HTTP2.0协议
- 改进了传输性能，实现低延迟和高性能
- 解决HTTP中”队首阻塞”问题
- 所有http请求都建立在一个TCP请求上，实现多路复用
- 可以给请求添加优先级
- 服务器推送：服务器可以对一个客户端请求发送多个响应。服务器向客户端推送资源无需客户端明确地请求。
- 首部压缩，从而减少流量传输

请问何为混合应用 (Hybrid APP),与原生 Native 应用相比它的优劣势.

Hybrid APP 是 Native APP 上结合使用了 Web View （Native APP 的模块或称组件，用来加载Web资源,
采用了Web 技术的 APP，本质上属于原生应用（APP外壳）。
优势：
  - 兼容性良好，“一次开发，多处运行”，能够减少原生APP开发在多平台带来的问题
  - 代码移植性高
  - 开发者社区活跃，能够及时应用最新适合的Web技术来解决问题，提高用户体验
  - APP更加轻便，内容更新方便，部分更新不用从 APP Store 下载
劣势：
  - 性能：相对不如 Native APP 性能良好、体验流畅
  - Web技术在APP中操作权限有限，需要APP同步支持

常见加密算法

1
2
3

非对称加密算法：RSA，DSA/DSS 
对称加密算法：AES，RC4，3DES 
HASH算法：MD5，SHA1，SHA256