H5考点

HTML 5

1.行内元素、块级元素、空元素

行内元素：input、img、span、label、a、b、strong、sub、sup、button、textarea、select
行内元素：不独占一行，上下内外边距无效，高度宽度无效，只能包含另外的行内元素或者文本
块级元素：独占一行，能包含其他块级元素或行内元素或文本
块级元素：div、p、ul、ol、dl、li、dd、dt、h1~6
空元素：标签内没有内容，不需要结束标签闭合
空元素：br、hr、img、input、link、meta

2.link、@import

link引入的css文件和dom同步解析加载，而@import引入的css在dom加载完后加载
@import只能用来引入样式表，link还可以设置rel等属性用来引入网站图标等
可通过js操作dom插入link标签改变样式，而@import无法用js操作dom

3.常见浏览器内核

Trident：ie
Gecko：fireFox
Blink：chrome
webkit：safari
Presto： opera

4.浏览器解析构建过程

根据dom文档生成由dom元素和属性组成节点的dom树
根据css样式构建cssom规则树
合并dom树和cssom树生成render树
根据render树解析布局，浏览器开始重排
当布局完成后调用gpu绘制页面，进行重绘

5.async、defer的脚本

没有asycn和defer，则立即加载执行，会阻塞dom文档解析加载
有async则异步执行，脚本加载不阻塞dom解析加载，但加载完立刻执行并阻塞dom加载，多个async脚本执行顺序不确定
有defer则延迟加载，脚本加载不阻塞dom加载，但等dom加载完才执行脚本

6.CSS阻塞文档解析

某些脚本里有修改dom样式的操作，如果在修改时dom的样式未加载，则会先进行对应的css加载解析，再执行脚本，再继续后面的文档解析加载

7.样式闪烁、白屏

样式闪烁：因为dom加载完后显示了html内容但css加载时间过长，所以会出现短暂无样式内容
白屏：js文件放在顶部，阻塞css和dom的加载；dom加载时间过长导致页面无内容显示

8.如何减少重排

使用transform过渡动画代替top等定位操作
不使用table，因为td或tr的改变会引起整个table的改变
操作dom使用fragment统一操作
改变dom样式使用clssName统一改变

9.webStorage、cookie

cookie：大小一般4k；会随http请求一并发送至服务器；存在所有同源窗口中；过期时间由expires定，如果设置expires = 0则会话结束就过期
sessionStorage：大小5m以上；存在同源会话中（新建页面不算同会话）
localStorage：大小5m以上；永久存储，除非清理浏览器缓存；存在所有同源窗口中

10.iframe缺点

不被搜索引擎检索，不利于seo
阻塞页面onload事件
与主页面共享域名请求数量限制，影响页面加载
使页面后退按钮无效

11.常见浏览器内核私有CSS属性前缀

mozilla内核（filefox）：-moz-
webkit内核（safari、chrome）：-webkit-
opera内核（opera）：-o-
trident内核（ie）：-ms-

12.前端性能优化

html方面：css雪碧图；利用base64缓存图片；减少http请求；对常用资源进行缓存
css、js方面：压缩js和css文件；避免使用@import；脚本放页面底部；样式表放head中
服务器方面：使用cdn引入资源；服务器使用gzip对资源进行压缩减少体积；减小cookie大小