面试总结

   自用笔记:面试中暴漏出许多平常大意而遗漏的问题,鞭策提醒自己平常要躲注意多方面的自我提升。

面试

2016年11月17日,1次腾讯电面,11月25日1次百度电面,面试后深感自己web(JavaScript)理论基础不够深,面试中暴漏出许多平常大意而遗漏的问题。腾讯那次是20:27打过来的,由于正好从实习公司下班走在大马路上,环境嘈杂很多问题都不怎么听得清导致思维紧张混乱,甚至有些明明知道答案却不知道考官问的问题指的是什么。特此写下笔记总结,鞭策提醒自己平常要躲注意多方面的自我提升。

HTML

HTML5中新增的语义化元素有哪些?

  • article 定义文章
  • header 页眉
  • footer 页脚
  • nav 定义导航链接
  • section 定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分

XHTML与HTML的区别

HTML是一种基于web的网页设计语言,XHTML是一个基于XML的置标语言,类似HTML的XML,是一种过渡技术,对代码的书写要求更为严谨,主要是以下几点

  • XML要求标签正确嵌套
  • 所有元素必须正确关闭
  • 标签区分大小写
  • 属性值要使用双引号
  • id的属性值去替代name属性值
  • 特殊字符需要进行处理
  • 必须要有根元素

JavaScript

数组的操作方法有哪些?各自什么作用?

  • .join() 数组转字符串,无参数的时候默认以,进行分隔。
  • .reverse() 数组颠倒排序
  • .sort() 数组排序,默认字母顺序排,自定排序需传入排序函数
  • .concat() 数组拼接,可跟多个参数,参数可以数组,也可以是值
  • .slice() 返回数组片段
  • .splice() 删除数组片段,第一个参数代表起始下标;第二参数代表删除个数,忽略则代表全删;第三、四…………个代表从删除位置开始要插入的内容
  • .push() 数组末尾加入指定参数,返回值为数组长度
  • .pop() 删除数组末尾元素,返回删除数值
  • .unshift() 数组首部加入指定参数,返回数组长度
  • .shift() 删除头部元素,返回删除的数值
  • .toString() 转字符串,以都,隔开,与无参数的.join()相同
  • .toSource() 只有 Gecko 核心的浏览器(比如 Firefox)支持该方法,说明

ajax的优缺点

优点:

  • 无刷新页面,给用户体验好
  • 异步与服务器通信,不打断用户操作,具有更迅速的响应能力
  • 前端和后端负载平衡,AJAX可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,AJAX的原则是“按需取数据”,可以最大程度的减少冗余请求和响应对服务器造成的负担,提升站点性能。
  • 基于标准被广泛支持
  • 界面与应用分离,Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离),有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

缺点:

  • AJAX干掉了Back和History功能,即对浏览器机制的破坏。
  • 存在安全隐患问题,开发者会暴露一定数据和服务器逻辑,还有Ajax也难以避免一些已知的安全弱点,诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等
  • SEO不友好
  • 违背URL和资源定位的初衷
  • 编写复杂、容易出错 ;冗余代码比较多

ajax工作原理

  • 第一步:创建ajax对象(XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp))
  • 第二步:判断数据传输方式(GET/POST)
  • 第三步:打开链接 open()
  • 第四步:发送 send()
    当ajax对象完成第四步(onreadystatechange)数据接收完成,判断http响应状态(status)200-300之间或者304(缓存)执行回调函数
    注意:检测XMLHttpRequest对象的readyState属性,该属性表示请求/响应过程的当前活动阶段,属性值如下:
  • 0:未初始化。尚未调用open()方法
  • 1:启动。已经调用open()方法,但尚未调用send()方法
  • 2:发送。已经调用send()方法,但尚未接收到响应
  • 3:接收。已经接收到部分响应数据
  • 4: 完成。已经接收到全部响应数据,而且已经可以在客户端使用了(如果写原生的js ajax请求需要等到 readyState==4的时候再做处理)其他的js库已经做好处理了

严格模式的优缺点

严格模式————js文件第一行写”use strict”,让js解释器以更严格的方式检查代码
优点:

  • 消除一些语法不合理的地方
  • 提高编译效率和运行速度
  • 为新版本做铺垫
    缺点:
  • 如果js文件一部分用,一部分没用,可能导致无效,浪费字节
  • IE6、7、8、9不支持阉割模式

DOM操作有哪些?

创建

  • createDocumentFragment() //创建一个DOM片段
  • createElement() //创建一个具体的元素
  • createTextNode() //创建一个文本节点

添加、移除、替换、插入

  • appendChild()
  • removeChild()
  • replaceChild()
  • insertBefore() //在已有的子节点前插入一个新的子节点

查找

  • getElementsByTagName() //通过标签名称
  • getElementsByName() //通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)
  • getElementById() //通过元素Id,唯一性

JS组成

  • 核心(ECMAScript) 描述了该语言的语法和基本对象
  • 文档对象模型(DOM)描述了处理网页内容的方法和接口
  • 浏览器对象模型(BOM)描述了与浏览器进行交互的方法和接口

判断数组

  • arr instanceof Array
  • Array.isArray()
  • arr.constructor == Array

JS值类型和引用类型

  • 数字、字符串、布尔都是值类型,存放在栈中
  • 对象、函数、数组等都是引用类型,存放在堆中
    Notice:
  • 栈,系统自动分配释放
  • 堆,程序员手动分配释放

变量声明提升

javascript的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明都提升到当前作用域的最前面。
优先级顺序:

  • 1、语言内置:所有的作用域中都有 this 和 arguments 关键字
  • 2、形式参数:函数的参数在函数作用域中都是有效的
  • 3、函数声明:形如function foo() {}
  • 4、变量声明:形如var bar;

document load 与 document DOMContentLoaded 区别

DOM文档加载步骤:

  • 1、解析HTML结构。
  • 2、加载外部脚本和样式表文件。
  • 3、解析并执行脚本代码。
  • 4、DOM树构建完成。//DOMContentLoaded
  • 5、加载图片等外部文件。
  • 6、页面加载完毕。//load
    在第4步,会触发DOMContentLoaded事件。在第6步,触发load事件。
    事件DOMContentLoaded和load的区别

CSS

书写高效CSS

  • 多利用padding、margin、font等缩写属性
  • 颜色进制代码可以用缩写 #fffff可以缩写为#fff
  • css选择器解析式从右向左,注意合理利用选择器

其他

GET与POST的区别

  • 浅谈HTTP中Get与Post的区别,说的很清楚
    简要总结大概就是:
  • GET请求可以被缓存,POST不能
  • GET请求保留在浏览器的历史记录中,POST不能
  • GET请求有长度限制,POST没有

跨域访问

多域名提供资源

  • CDN缓存更方便
  • 突破浏览器并发限制,一般浏览器每个域名不超过6个
  • 不携带cookie,节省带宽,尤其是上行带宽一般比下行慢
  • 对各种数据类型进行划分存储,通过子域名进行分流,提高网页加载速度

其他问题

  • Ajax的实现,Ajax在IE上的兼容
  • 201、202、203,301、302、304状态码的意思(表示只知道200为成功状态,3开头为重定向,具体的不清楚没答上)
  • IE浏览器与高级浏览器的区别
  • 冒泡
  • 对React的了解 ( 当时都没听清是问的这个 o(╯□╰)o )

最后更新时间2016年12月6日

0%