data-xxx 为前端开发者提供自定义的属性，这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取；
data-xxx 属性用于存储页面或应用程序的私有自定义数据。data-xxx 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。示例： 1.利用dataset
<article id="electriccars" data-columns="3" data-index-number="12314" data-parent="cars"> ... </article> var article = document.querySelector('#electriccars'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars"2.不支持dataset属性，使用setAttribute
var cur = document.getElementById('cur'); //使用attributes方法存取data-*自定义属性的值非常方便 var trueImg = cur.getAttribute("data-img"); //使用setAttribute设置 data- 属性 cur.setAttribute('data-site', 'http://www.xxx');href:
href 标识超文本引用，用在 link 和 a 等元素上，href 是引用和其它页面关联，用来建立当前元素和文档之间的链接。src:
src 表示引用资源，在请求 src 资源时会将其指向的资源下载并应用到文档中，用在 img，script，iframe 上，src 是页面内容不可缺少的一部分。根本区别：src是引入(下载并引入)资源,而href是引用资源。
作用：有了锚点，用户可以快速跳转到与锚点相对应的内容位置，而不需用户滚动滚动条慢慢寻找内容，提高用户体验。
设置锚点：有两种形式设置锚点
当设置锚点是a标签时，利用name属性命名锚点当设置锚点是其它标签时，利用id属性命名锚点注意：要想跳至设置的锚点是利用a标签。
示例：
<body> <h1 id="h1">h1(非a标签使用id)</h1> <a name="a">A (a标签使用name)</a> <div></div> <a href="#a">回到A</a> <a href="#h1">回到h1</a> </body>区别：
link 属于 HTML 标签，而 @import 是 CSS 提供的；页面被加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载；import 只在 IE5 以上才能识别，而 link 是 HTML 标签，无兼容问题；link 方式的样式的 权重 高于 @import 的权重。两者关键的区别在于：
下载完成js之后何时执行代码如果有多个script标签，是否顺序执行两者都会在从上到下解析HTML结构时，解析至script就会立即下载js文件。
defer(延迟)：
下载js完成时不立即执行，而是等到整个页面在内存中正常渲染结束(DOM 结构完全生成，以及其他脚本执行完成)后才会执行。多个 defer 脚本会按照它们在页面出现的顺序加载。渲染完再执行async(异步):
一旦下载完js，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。多个 async 脚本是不能保证加载顺序的。谁先下载完谁先执行。参数说明：
width 设置 viewport 宽度，为一个正整数，或字符串‘device-width’ device-width 设备宽度 height 设置 viewport 高度，一般设置了宽度，会自动解析出高度，可以不用设置 initial-scale 默认缩放比例（初始缩放比例），为一个数字，可以带小数 minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数 maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数 user-scalable 是否允许手动缩放两种方式：：
meta标签中的 viewport 属性 ，initial-scale 设置为 1；rem按照设计稿走，然后在全局利用transform：scale(0.5)缩小1倍。meta 标签中的 viewport 属性 ，initial-scale 设置为 0.5；rem 按照设计稿标准走即可造成1px渲染成2px的可能原因：
UI 设计师设计的时候，画的 1px（真实像素）实际上是 0.5px(css像素) 的线或者边框。但是他不这么认为，他认为他画的就是 1px 的线，因为他画的稿的尺寸本身就是屏幕尺寸的 2 倍。假设手机视网膜屏的宽度是 320x480 宽，但实际尺寸是 640x960 宽，设计师设计图的时候一定是按照 640x960 设计的。但是前端工程师写代码的时候，所有 css 都是按照 320x480 写的，写 1px(css)，浏览器自动变成 2px（真实像素）。
总结：
WebSocket、SharedWorker；localstorge、cookies 等本地存储方式；localstorge 另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件， 我们通过监听事件，控制它的值来进行页面信息通信；方法一：调用localstorge
标签1：
<input id="name"> <input type="button" id="btn" value="提交"> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ var name=$("#name").val(); localStorage.setItem("name", name); //存储需要的信息 }); }); </script>标签页2：
$(function(){ window.addEventListener("storage", function(event){ console.log(event.key + "=" + event.newValue); }); //使用storage事件监听添加、修改、删除的动作 });方法二：使用 cookie+setInterval
将要传递的信息存储在 cookie 中，每隔一定时间读取 cookie 信息，即可随时获取要传递的信息。
标签页1：
$(function(){ $("#btn").click(function(){ var name=$("#name").val(); document.cookie="name="+name; }); });标签页2：
$(function(){ function getCookie(key) { return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key]; } setInterval(function(){ console.log("name=" + getCookie("name")); }, 10000); });websocket、sharedworker方法自行查找。
Webp:是⾕歌（google）开发的⼀种旨在加快图⽚加载速度的图⽚格式。图⽚压缩体积⼤约只有 JPEG 的 2⁄3 ，并能节省⼤量的服务器带宽资源和数据空间。
Apng：全称是 “Animated Portable Network Graphics” , 是PNG的位图动画扩展，可以实现png格式的动态图⽚效果，有望代替 GIF 成为下⼀代动态图标准。
1.避免使用iframe。
共享连接池，阻塞主页面加载
2.避免空链接属性。
空的链接属性是指 img、link、script、ifrrame 元素的 src 或 href 属性被设置了，但是属性却为空，即使图片的地址为空，浏览器依旧会以默认的规则去请求空地址
3.避免节点深层级嵌套。
深层级嵌套的节点在初始化构建时往往需要更多的内存占用，并且在遍历节点时也会更慢些，这与浏览器构建 DOM 文档的机制有关。通过浏览器 HTML 解析器的解析，浏览器会把整个 HTML 文档的结构存储为 DOM 树结构。当文档节点的嵌套层次越深，构建的 DOM 树层次也会越深。
4.缩减 HTML 文档大小
提高下载速度最显而易见的方式就是减少文件的大小，特别是压缩内嵌在 HTML 文档中的 JavaScript 和 CSS 代码，这能使得页面体积大幅精简。除此之外减少 HTML 文档大小还可以采取下面几种方法：
删掉 HTM 文档对执行结果无影响的空格空行和注释使用 HTML5避免 Table 布局5.显示设置图片的宽高
当浏览器加载页面的 HTML 代码时，有时候需要在图片下载完成前就对页面布局进行定位。 如果 HTML 里的图片没有指定尺寸（宽和高），或者代码描述的尺寸与实际图片的尺寸不符时，浏览器则要在图片下载完成后再 “回溯” 该图片并重新显示，这会消耗额外时间。 所以，最好为页面里的每一张图片都指定尺寸，不管是在页面 HTML 里的< img > 标签，还是在 CSS 里。
6.避免脚本阻塞加载
当浏览器在解析常规的 script 标签时，它需要等待 script 下载完毕，再解析执行，而后续的 HTML 代码只能等待。为了避免阻塞加载，应把脚步放到文档的末尾，如把 script 标签插入在 body 结束标签之前。
H5 引入的 Page Visibility API，能很有效地帮助我们完成这样的判断。
API由三部分组成：
1.document.hidden
表示页面是否隐藏的布尔值。
页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 （注意，页面被其他软件遮盖并不算隐藏，比如打开的 sublime 遮住了浏览器）
2.document.visibilityState 表示下面 4 个可能状态的值
hidden：页面在后台标签页中或者浏览器最小化 visible：页面在前台标签页中 prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 true unloaded：页面正在从内存中卸载
3.Visibilitychange 事件 当文档从可见变为不可见或者从不可见变为可见时，会触发该事件。 这样，我们可以监听 Visibilitychange 事件，当该事件触发时，获取 document.hidden 的值
document.addEventListener('visibilitychange', function() { var isHidden = document.hidden; if (isHidden) { // 动画停止 // 服务器轮询停止 等等 } else { // 动画开始 // 服务器轮询 } });作用：如果 页面最小化了 或者 隐藏在了其他标签页后面 ，那么有些功能是可以停下来的，比如轮询服务器或者某些动画效果。
1.主要用于区分操作是人还是机器行为。可以防止恶意破解密码，刷票
春节购票系统为了防止被恶意机器盗刷，恶意占票，图片验证码，由于机器无法准确识别图片中的内容，从而保障了正常的购票行为。
2.有效防止黑客对某人特定注册用户用特定程序暴力破解方式进行不断的登陆尝试
浏览器内核主要分成两部分：
渲染引擎JS引擎渲染引擎：
负责获取网页的内容（HTML、XML、图像等等）、整理信息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。 浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS引擎：
解析和执行 javascript 来实现网页的动态效果。
注意：最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。
常见的浏览器内核：
-moz- 对应 Firefox, -webkit- 对应 Safari and Chrome -o- for Opera -ms- for Internet Explorer1.解析HTML文件，创建DOM树
自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
2.解析 CSS
优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式
3.构建渲染树
将 CSS 与 DOM 合并，构建渲染树（Render Tree）
4.布局和绘制
布局和绘制，重绘（repaint）和重排（reflow）
详细了解重排、重绘可以看这篇博客。
1.png-24格式图片在IE6浏览器上出现背景
情景： 图片出现背景： 正常情况(无灰色背景)： 解决方案：
使用png-8格式图片使用一个js插件，使背景透明即可2.IE6双边距bug bug描述：
在IE下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍
示例：
#box{ float:left; width:10px; margin:10px; }这种情况下，IE6的margin将会变成20px。
解决方案：
在 float 的标签样式控制中加入 _display:inline; 将其转化为行内属性。( _ 这个符号只有 ie6 会识别）
3.浏览器默认的margin和padding不同
解决方案：
在全局统一
*{ margin:0; padding:0; }4.上下margin会发生重合问题
问题描述：
在IE和chorme都存在，相邻的两个div的margin-left和margin-right不会发生重合，但是margin-top和margin-bottom却会发生重合。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>margin上下重合</title> <style> * { margin: 0; padding: 0; } div { width: 100px; height: 100px; } .top { background-color: aqua; margin-bottom: 10px; } .bottom { background-color: blueviolet; margin-top: 10px; } </style> </head> <body> <div class="top"></div> <div class="bottom"></div> </body> </html>解决方案：
养成良好的代码编写习惯，同时采用 margin-top 或者同时采用 margin-bottom。
5.hover和active失效
问题描述：
被点击访问过的超链接样式不再具有 hover 和 active 了
解决方案： 改变CSS属性的排列顺序：L-V-H-A
a:link {} a:visited {} a:hover {} a:active {}