前端一些易错的知识点总结

前端一些易错的知识点总结

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)支持该方法,不明白的同学可以参照一下W3c的说明:

toSource()的用法

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没有

跨域访问

前端解决跨域问题的8种方案(最新最全)

多域名提供资源

* CDN缓存更方便

* 突破浏览器并发限制,一般浏览器每个域名不超过6个

* 不携带cookie,节省带宽,尤其是上行带宽一般比下行慢

* 对各种数据类型进行划分存储,通过子域名进行分流,提高网页加载速度

本文转自

ShanaKnights的博客 在此致谢!!!