原文链接：https://github.com/helloyoucan/knowledge
（1）html相关
1、语义化
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码；同时让浏览器的爬虫和机器很好地解释。
具体可以这样处理：
- 少用无语义的标签div和span。
- 语义不明显时可用div和p时，优先用p，p有默认的间距，有利于兼容特殊终端。
- 不使用纯样式标签b、font、u等，使用css设置。
- 强调文本用strong，斜体用em
- 表格标题用caption，表头用thead和th，主体用tbody和td，尾部用tfoot
- 表单用fieldset包起来，用legend说明表单用途
- input标签用label说明，并设input的id与label对应
- 新标签：nav、header、main、article、section、footer、aside、details、dialog、time、progress等等
2、meta viewport相关
# 常用
<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写
<head lang="en"> 标准的 lang 属性写法
<meta charset="utf-8"> 声明文档使用的字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 优先使用 IE 最新版本和 Chrome
<meta name="description" content="不超过150个字符"/> 页面描述
<meta name="keywords" content="用英文逗号分隔"/> 页面关键词
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
<meta name="renderer" content="webkit"> 启用360浏览器的极速模式(webkit)
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 避免IE使用兼容模式
设置页面不缓存
<meta http-equiv="pragma" content="no-cache"> 向后兼容http1.0，当该属性适用，会忽略下面的cache-control和expires
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> 缓存失效日期
# 不常用
<meta name="author" content="name, email@gmail.com"/> 网页作者
<meta name="robots" content="index,follow"/> 搜索引擎抓取
<meta name="apple-mobile-web-app-title" content="标题"> 添加到主屏后的标题（iOS 6 新增）
<meta name="apple-mobile-web-app-capable" content="yes"/>（iOS 6 新增）是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name="format-detection" content="telphone=no, email=no"/> 忽略页面中的数字识别为电话，忽略email识别
<meta name="apple-mobile-web-app-status-bar-style" content="black"/> 设置苹果工具栏颜色
<meta name="google" value="notranslate" /> 关闭chrome浏览器下 翻译 插件
3、src vs href
href
- Hypertext Reference,超文本链接引用
- 用于建立当前元素与文档之间的连接
- 用link加载css时，不会停止对当前文档的处理，link引用的CSS会同时被加载，按顺序加载
src
- source，src的内容是页面必不可少的一部分，是引入
- src指向的内容会嵌入到文档中当前标签所在的位置
- 浏览器解析到该元素时，会停止浏览器的渲染，直到该资源加载完毕（js放在底部）
4、Doctype
- 告知浏览器解析器用什么文档标准解析这个文档。
- 不存在或格式不正确会导致文档以兼容模式呈现。
- 标准模式：排版和JS运行以浏览器支持的最高标准运行。
- 兼容模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为防止站点无法工作。
- HTML5不基于SGML（标准通用标记语言），因此不需要对DTD(文档类型定义)进行引用
- 需要doctype来规范浏览器的行为。
- HTML4.01基于SGML，所以需要读DTD进行引用，才能告知文档所使用的的文档类型。
5、HTML5
新特性
- 绘画canvas
- 媒介回放video和audio、picture（通过媒体查询，加载不同图片）
- 本地存储
- 语义化元素
- 表单控件：calendar、date、time、email、url、search
- 新的技术：Worker、
WebSocket、navigator.geolocation(地理位置)
移除的元素
- 纯表现元素：center、font等
- 对可用性产生负面影响的元素：frame、frameset、noframes
6、页面可见性（Page Visibility API）
document.visibilityState的值如下：
- hidden #页面不可久见
- 浏览器最小化
- 没有最小化，但当前页面切换成了背景页
- 将要卸载（unload）页面
- 操作系统触发锁屏屏幕
- visible #页面至少一部分可见
- prerender #页面即将或正在渲染，处于不可见状态（需要浏览器支持预渲染，Chrome支持）
document.visibilityState属性只针对顶层窗口
visibilitychange事件
document.addEventListener('visibilitychange', function () {
// 用户离开了当前页面
if (document.visibilityState === 'hidden') {
document.title = '页面不可见';
}
// 用户打开或回到页面
if (document.visibilityState === 'visible') {
document.title = '页面可见';
}
});
（2）浏览器相关
1、从URL到页面加载过程
- DNS解析获取IP
- 建立TCP连接：三次握手
- 发送http请求
- 服务器接收请求并返回HTTP报文
- 浏览器解析渲染页面
- 关闭连接：TCP4次挥手
2、渲染过程
- 根据HTML解析DOM树
- 根据CSS解析生成CSS规则树
- 结合DOM树和CSS规则树，生成渲染树
- 根据渲染树计算每一个节点的信息（位置、宽高、等）
- 根据计算好的信息绘制页面
页面加载事件
-
DOMContentLoaded——文档被完全加载和解析完成，其所属script之前的样式表加载解析完成才会触发 -
load——资源及其依赖源完成加载 -
beforeunload——浏览器窗口关闭或刷新 - unload——文档或一个子资源正在被卸载
3、Repaint & Reflow （重绘和回流）
Repaint（重绘）
当页面中元素样式改变时（不影响文档流中的位置，如：outline、visibility、color、background-color等），浏览器会将新样式赋予给元素并重新绘制它，这个过程成为重绘。
- 修改不影响文档流中位置（布局）的
css - 使用
css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘
Reflow （回流）
当Render Tree中部分或者全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
回流必定会发生重绘，重绘不一定会引发回流。
- 首次渲染
- 窗口大小改变
- 元素内容变化
- 字体大小变化
- 添加或删除可见的DOM元素
- 激活CSS伪类
- 查询某些属性或者调用某些方法
-
clientWidth、clientHeight、clientTop、clientLeft -
offsetWidth、offsetHeight、offsetTop、offsetLeft -
scrollWidth、scrollHeight、scrollTop、scrollLeft -
scrollIntoView()、scrollIntoViewIfNeeded() getComputedStyle()getBoundingClientRect()scrollTo()
-
如何避免？
CSS
- 避免使用
table布局 - 尽可能在DOM树的最末端改变
class - 避免设置多层内联样式
- 动画效果应用到
position属性为absolute或fixed的元素上 - 避免使用
css表达式（如calc()） - 使用transform替代top，使用visibility替代display:none
-
将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如
will-change、video、iframe等标签，浏览器会自动将该节点变为图层。 -
CSS3 硬件加速（GPU加速），使用css3硬件加速，可以让
transform、opacity、filters这些动画不会引起回流重绘 。
JavaScript
- 避免频繁操作样式，可一次性重写
style或将样式定义为class并以此更改class属性 - 避免频繁操作
DOM，可创建documentFragment,在上面操作DOM,再把它插入到文档中 - 可先设置元素属性为
display:none,操作完再显示 - 避免频繁读取会引发回流/重绘的属性，如要使用则可以缓存起来
- 对于复杂动画元素可使用绝对定位，使它脱离文档流
4、width & height
dom.style.width/height 内联样式的宽高
dom.currentStyle.width/height IE支持，渲染后的宽高
window.getComputedStyle(dom).width/height 渲染后的宽高
dom.getBoundingClientRect().width/height 根据元素在视窗的绝对位置获取宽高
dom.offsetWidth/offsetHeight 常用
拓展
屏幕宽高：window.screen.width/height
屏幕去除状态栏的宽高：window.screen.availWidth/availHeight
网页全文宽高：document.body.scrollHeight/Width
滚动条移动的距离：document.body.scrollTop/scrollLeft
网页可见区域不带边框的宽高：document.body.clientHeight/clientWidth
网页可见区域带边框对的宽高：document.body.offsetHeight/offsetWidth
5、缓存
-
Service Worker
- 运行于浏览器背后的独立线程
- 必须使用https
- 可自由控制缓存内容
- 步骤：注册Service Worker → 监听install事件后缓存文件 → 下次请求时查询是否有缓存，有则直接返回
-
Memory Cache
- 内存中的缓存
- 读取高效，持续性短，随进程释放而释放
- 是计算机的内存，容量小
- 部分缓存资源可能是
preloader相关指令（preload（提前加载资源）、prefetch（告知浏览器下一页面可能会用到的资源，优先级低，影响下一页面加载速度）） - 不关心返回资源http缓存头Cache-Control，可能会对Content-Type、CROS等其它特征做校验
-
Disk Cache
- 存储在硬盘中，读取速度慢
- 覆盖广
- 根据HTTP Header中的缓存字段判断资源的缓存、是否可直接使用、资源过期需重新请求
- 可跨站点
-
Push Cache（推送缓存）
- HTTP/2
- 前三种缓存都不命中时，才使用
- 只在会话中存在，会话结束就释放，缓存时间短（谷歌浏览器5分钟左右）
- 只能被使用一次
- 浏览器可以拒绝接受已存在的资源推送
- 可给其它域名推送资源
6、浏览器内核
- Trident （IE、360、搜狗）
- Gecko （火狐）
- Presto （Opera7以上，现在为Blink内核）
-
Webkit（Safari、Chrome）(Chrome的：Blink，是Webkit的分支)
7、常见兼容
css reset- 事件对象：IE下的是
event.x/event.y，火狐下是event.pageX/event.pageY需要处理(event.x?event.x:event.pageX;) - Chrome下最小字体是12px，可以加入
css属性：-webkit-text-size-adjust: none; - 超链接访问过后hover样式不出现，通过改变
css属性排列顺序：a:link {} a:visited {} a:hover {} a:active {}
（3）前端监控
数据埋点（数据上报）
- 用于前端监控，曝光等
- 使用1x1像素的透明gif图片
- 没有跨域问题
- 不会阻塞页面加载，不影响用户体验，只需要new Image对象
- 能够完成整个http请求+响应
- 触发GET请求后不需要获取和处理数据、服务器也不需要发送数据
- 相比
XMLHttpRequest对象发送GET请求，性能上更好 - GIF的最低合法体积最小
Ajax
- 不常用
- 会有跨域问题
- 可发送POST请求
