1.HTML&浏览器

原文链接：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相关

# 常用
  H5标准声明，使用 HTML5 doctype，不区分大小写
 标准的 lang 属性写法
    声明文档使用的字符编码
 优先使用 IE 最新版本和 Chrome
       页面描述
    页面关键词
 为移动设备添加 viewport
  启用360浏览器的极速模式(webkit)
     避免IE使用兼容模式
设置页面不缓存
   向后兼容http1.0，当该属性适用，会忽略下面的cache-control和expires

     缓存失效日期

# 不常用
    网页作者
      搜索引擎抓取
 添加到主屏后的标题（iOS 6 新增）
（iOS 6 新增）是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏

 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）

 忽略页面中的数字识别为电话，忽略email识别

 设置苹果工具栏颜色
  关闭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请求