标签：避免 第三方 异步 png 语法 interval append 拖拽 play
新特性：
1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
9. 新的技术webworker, websocket, Geolocation
移除元素：
1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u
2. 对可用性产生负面影响的元素：frame，frameset，noframes
处理兼容问题：
1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：
区分：
1. DOCTYPE声明新增的结构元素、功能元素
创建节点：
1. createDocumentFragment() 创建一个DOM片段
2. createElement 创建一个具体的元素
3. createTextNode 创建一个文本节点
添加节点：
1. appendChild()
移除节点：
1. removeChild()
替换节点：
1. replaceChild()
查找节点：
1. getElementByTagName 通过标签名称
2. getElementById 通过元素的Id
3. getElementByName 通过元素的name
1. IE8以下的模拟盒子定义的元素宽高不包含内边距和边框
引起问题：
1. 父元素的高度无法撑开，影响和父元素同行元素
2. 与浮动元素同级的非浮动元素会紧跟随后
3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决方法：
1. 额外标签法：css中的 clear ：both （会使HTML结构看起来不够简洁）
2. after伪类法
3. 浮动外部元素
4. 设置overflow：auto或者hide
1. 浏览器兼容问题：各种浏览器的margin和padding不一样
解决方式：在全局设置margin：0，padding：0
2. 浏览器兼容问题：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大 (IE6中后面的一块被顶到下一行)
解决方式：在float中设置display：inline，转化为行内元素
3. 浏览器兼容问题：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
解决方式：设置overflow：hidden或设置行高linehight小于你设置的高度
1.元素的嵌套： XHTML要求所有元素必须正确嵌套
2. XHTML必须嵌套在<html>根元素中
3. XHTML必须标签小写
4. XHTML标签必须被关闭，空标签也需要结束符
5. 两者基本概念不同，HTML是超文本标记语言，XHTML是可扩展超文本标记语言
作用：
1. DOCTYPE声明处于文档最前面，处于标签之前，告知浏览器以何种模式渲染文档
严格模式和混杂模式区分：
1. 文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
2. 包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式
3. DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）
4. HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）
意义：
1. 严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。
1. 去掉或丢失样式还可以让页面呈现清晰的结构
2. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息
3. 方便其他设备解析
4. 便于团队开发和维护，语义化更具有可读性，遵循W3C标准团队，可减少差异化
优点：
1. 解决第三方内容图片或广告加载缓慢问题
2. 并行加载脚本
缺点：
1. 会阻塞主页面Onload事件
2. 无内容，也会出现加载
3.无语义
调用localstorge，cookies等本地存储方式
1. localstorage
localstorage在一个标签被添加，修改或删除时，都会触发一个storage事件，通过另一个标签进行监听storage事件，便可获得localstorge存储的值，从而实现不同标签页之间的通信。
2. cookies
使用cookies+setInterval，将要传递的信息存储在cookie中，每隔一段时间读取cookie信息，即可随机获得传递的信息。
webSocket类似HTTP协议，是为了弥补HTTP协议的缺陷：通信只能服务端发起，HTTP不能做到服务端主动向客服端推送信息。
解决兼容问题
1. 使用flash
2. 使用轮询或长连接的方式实现伪websocket的通信
一个程序至少一个进程，一个进程至少一个线程。
1. 进程拥有独立的堆栈空间和数据段，每启动一个新的进程就要分配一个独立的地址空间；线程有独立的堆栈空间，但是共享数据段。
2. 通信机制上，进程之间互不干扰，互相独立，通信机制相当复杂；但线程共享数据，通信机制方便。
3. 同一个进程的所有线程共享该进程的所有资源，不同进程相互独立。
1. 文件合并
2. 文件压缩
3. cdn托管
4. 多个域名缓存
1. 图片优化
2. 图像格式选择
3. CSS优化
4. 网址后面加斜杆
5. 标明宽高度
6. 减少HTTP请求
1. JSPerf
2. Dromaeo
1. 如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。
2. 使用LINK标签将样式表放在文档HEAD中。
1. null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
2. 当声明的变量还未被初始化时，变量的默认值为undefined。
3. null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
1. 创建一个空对象，并用this指向该对象，同时继承函数
2. 属性和方法加入this引用的对象
3. 新创建的对象由this所引用，并且最后隐式的返回this
是一种轻量级的数据交换格式，它基于JavaScript的一个子集，数据格式简单，易于读写，占用带宽小
1. defer
HTML4.01为script标签定义了的defer属性，告诉浏览器立即下载，但延迟执行。但只适合外部脚本文件
2. async
HTML5为script定义了async属性，和defer一样，只适合外部脚本文件，不让页面等待脚本的下载和执行，从而异步加载页面其他内容
3. 动态创建DOM
4. 使用jQuery的getScript
$.getScript("outer.js",function(){//回调函数，成功获取文件后执行的函数
console.log("脚本加载完成")
});
5. setTimeOut延时
6. js放最底部，最后加载
跨域是指一个域下面的文档或脚本试图请求另一个域下的资源
常见跨域场景
解决方式
1. JSONP
2. NGINX反向代理
nginx支持配置反向代理，通过反向代理实现网站的负载均衡，通过配置proxy_pass_http配置代理站点，upstream实现负载均衡
document.write只会绘制整个页面，innerHTML可以重绘页面的一部分。
JavaScript中的每一个function对象都有一个apply()方法和一个call()方法。
apply:调用一个对象的一个方法，用另一个对象替换当前对象，例：B.apply(A, arguments);即A对象应用B对象的方法。
call:调用一个对象的一个方法，用另一个对象替换当前对象，例：B.call(A, ag1,ag2);即A对象调用B对象的方法。
相同之处：
1. 都可以代替另一个对象调用一个方法
不同之处：
1. apply最多只能有两个参数，新的this对象和一个数组argArray。
2. call可以接受多个参数，新的this对象和一串参数列表，主要用于js对象各方法的相互调用。
内存泄露是指一个分配的内存既不使用，也不能回收，直到浏览器运行结束。
标记清除：js中最常见的垃圾清除器
导致内存泄漏的操作：
1. 意外的全局变量
2. 闭包
3. 没有清理的DOM元素引用
4. 定时器
JavaScript是函数级作用域，不是块级作用域。
块级作用域：一对花括号{}中的语句集都属于一个块，在其中定义的变量块外都不可见
变量提升：当一个函数外定义了一个全局变量，而想在函数内改变这个变量的值，可以通过声明一个局部变量。
var name="haha"; function changeName(){ console.log(name); var name="xixi"; } changeName(); console.log(name);
变量提升
var name="haha"; function changeName(){ var name; console.log(name); name="xixi"; } changeName(); console.log(name);
通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中。
优雅降级：以最低要求，实现最基础的功能，向上兼容
渐进增强：开始先针对较高版本浏览器构建页面，完善功能，再进行各种不同浏览器适配
1. 轮询
2. 长连接
3. WebSocket
优点：
1. node基于时间驱动和无阻塞，便于处理并发事件
2. 交互的客户端用的是相同的语言
缺点：
1. node是一个相对新的开源项目，不太稳定
2. 缺乏较多的第三方库支持
1. 减少http请求次数：CSS源码压缩，图片适当大小，data缓存，图片服务器。
2. 前端模板js+数据，减少HTML标签导致的带宽浪费，前端使用变量保存ajax请求结果，每次操作本地变量，不用请求，减少请求次数。
3. 用innerHTML代替DOM，减少DOM的操作次数，优化JavaScript性能
4. 不要直接设置style，而是通过classname设置
5. 少用全局变量，缓存DOM节点查找结果，减少IO读取操作(IO指的是input和output)
6. 图片预加载
1. 200 OK
2. 301 临时跳转
3. 304 永久跳转
4. 400 error
5. 401 未授权
6. 403 禁止访问
7. 404 not found
8. 500 服务器错误
9. 503 服务器无法使用
1. 当发送一个URL请求，浏览器会开一个线程处理这个请求，同时远程dns服务器启动dns查询，使得浏览器获得相对应的ip。
2. 浏览器和远程web服务器通过TCP三次握手建立TCP/IP连接。
3. 一旦TCP/IP建立，浏览器会通过该连接向服务器发送http的get请求，远程服务器找到资源后通过http响应该资源，值为200是一个正确的响应。
4. web服务器提供资源服务，客户端下载资源，请求返回后，就进入前端模块，浏览器解析HTML生成DOM tree。
1. 工厂模式
2. 原型模式
3. 构造函数模式
4. 混合原型模式和构造函数模式
5. 动态原型模式
6. 寄生构造函数模式
7. 稳妥构造函数模式
1. 原型链继承 （将父类的实例作为子类的原型）
2. 借用构造函数继承 （）
3. 组合继承（原型+借用构造）
4. 原型式继承
5. 寄生式继承
6. 寄生组合式继承
ajax = async javascript and xml 异步JavaScript和XML
ajax是一种创建动态页面，通过后台和服务器进行少量数据交互，ajax可以实现异步更新，实现页面某部分更新。
1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象
2. 创建一个新的HTTP请求，并指定该HTTP的请求方式和URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求
5. 获取异步调用返回的数据
6. 使用JavaScript和DOM实现局部刷新
异步加载：又称非阻塞模式，浏览器下载执行js的同时，还可以进行后续的处理
实现方法
1. script DOM Element（async）
2. onload
延迟加载：有些js代码在某些情况才需要使用，并不是页面初始化的时候才用到，延迟加载就是为了解决这个问题，js将分成许多模块，初始化只需加载需要立即执行的js,其他js等到第一次使用的时候再加载。
标签：避免 第三方 异步 png 语法 interval append 拖拽 play
原文地址：https://www.cnblogs.com/xx929/p/10439173.html
