doctype声明有哪些?作用
<!DOCTYPE html>
<html lang="en">
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
作用:告诉浏览器，使用哪种规范来解释这个文档中的规范。你知道如果没有它，浏览器在渲染页面的时候会使用怪异模式（各个浏览器在怪异模式下对各个元素渲染时有差异，因此会导致同一个样式在不同浏览器上看到的效果不同）。
怎么垂直居中一个元素
参考
首先分情况,是对行内(行内块)元素讨论以及块元素讨论;
行内元素
- 行内包含特殊元素,比如行内块元素,可以用
vertical-align: middle - 设置
line-height
块元素
- 父元素设置
display:flex以及align-items:center居中对齐 - 父元素设置
display:flex以及子元素设置align-self:center - 父元素设置
display:table-cell;vertical-align: middle;
垂直水平居中元素
- 知道父元素高度,使用
releactive定位
.box {
position: relative;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
- 不知道父元素也不知道自身高度,父元素相对定位,自身绝对定位
.container {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
内存泄漏,以及怎么定位内存泄漏
参考
主要引起内存泄漏有:
- 在window上拓展的属性;比如在方法内未申明就直接使用的变量,会直接拓展window的属性
- 定时器没有及时回收;在用完定时器记得回收
- 闭包;只要定义了匿名函数,并且匿名函数用了父作用域定义的数据,就会引起闭包,不管这个匿名有没有使用过;这样子这个匿名函数导致内存泄漏;
- dom引用;这个引起的场景主要是为了更好的操作dom,会把dom数据用一张表保存,但是在对dom进行remove操作后,却没有回收保存表的资源,导致dom的引用一直存在,dom不能及时回收.
怎么快速对数组元素去重
参考
es6的写法:
let arr=[1,1,1,2]
[...new Set(arr)]
重排和重绘的区别
重排重绘，看这一篇就够了
网页性能管理详解
浏览器会发生重新渲染:
- dom的修改
- 样式表发生变化
- 用户事件(鼠标悬停,页面滚动,改变窗体大小,输入框输入文字)
重排重绘的一般规则:样式表越简单,重排重绘越快;重排重绘的dom元素层机越高,成本越高;table的重排重绘的成本比div高.
vue的缓存机制
vue使用keep-alive实现数据缓存不刷新
利用router的meta属性实现动态缓存页面;
其实router的meta也可以实现动态显示公共头部,顶部信息;
vue的优化
Vue 应用性能优化指南
一般包含:
- 路由组件懒加载
- 图片懒加载
- css样式文件分离(脚手架也配置好了)
- 去掉多余的console日志
- 服务端渲染
- 服务器使用gzip压缩配置
网友评论