Document type definition 文档类型定义
DOCTYPE 就是用来声明文档类型和DTD规范的,告诉浏览器按照什么规范解析
几个文档规范
- html5中使用
- html4中严格模式,不能使用一些废弃标签
- html4宽松模式,可以使用一些废弃标签
渲染过程
1.渲染过程:
html生成Dom Tree,css生成rule Tree,然后两者结合生成render Tree.
然后经过layout的计算确定元素大小以及在页面中的位置,之后就开始在页面上渲染,呈现页面。
2.重排/回流 reflow
页面每个元素都有自己的大小和位置,当改变大小和位置时,浏览器都需要经过重新计算,再次把元素放到对应的位置。重排一定会触发重画。
2.1 何时会触发回流
- dom元素的增删改
- css中的width,height,position,float,line-height...
- 动画
2.2 如何减少回流
- 减少不必要的dom层级
- 避免不必要的复杂的选择器,会耗费更多的cpu
- 改多个样式,尽量使用class,一次性改变
3.重画 repaint
更新一些样式比如颜色,并不影响页面布局,就叫做重画,重画不一定触发回流。
3.1 何时会触发重画
- color,background-color,outline....
4.优化性能
一个线程-js解析,一个线程-ui渲染
但js又是单线程的所以,你执行js解析就不会进行ui渲染,你ui渲染就不会执行js解析,所以这两个就会相互影响。
css性能会让js变慢,如果频繁触发回流和重绘会影响js性能。
渐进增强和优雅降级
渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。 优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。