1.css的选择符,继承性,优先级顺序, css3新增伪类
CSS 选择符:
1) id选择器(# myid)
2) 类选择器(.myclassname) 3) 标签选择器(div, h1, p) 4) 相邻选择器(h1 + p) 5) 子选择器(ul > li) 6) 后代选择器(li a) 7) 通配符选择器( * ) 8) 属性选择器(a[rel = "external"]) 9) 伪类选择器(a: hover, li:nth-child)继承性:
可继承的(font-size,font-family,color,text-indent)
不可继承的(border,padding,margin,width,height)
优先级顺序:
(1)优先级就近原则,同权重情况下样式定义最近者为准
(2)载入样式以最后载入的定位为准
(3)!important>id>class>tag
(4)important比内联优先级高,但内联比id优先级高
css3新增伪类
(1)p:first-of-type 选择属于其父元素的首个p元素的每个p元素
(2)p:last-of-type 选择属于其父元素的最后p元素的每个p元素
(3)p:only-of-type 选择属于其父元素的唯一p元素的每个p元素
(4)p:only-child 选择其属于其父元素的唯一子元素的每个p元素
(5)p:nth-child(2) 选择属于其父元素的第二个子元素的每个p元素
(6):enabled :disabled 控制表单控件的禁用状态
(7):checked 单选框或复选框被选中
css3新特性
(1)css3实现圆角(border-radius),阴影(box-shadow)
(2)对文字加特效(text-shadow),线性渐变(gradient),旋转(transform)
(3)transform:rotate(9deg) scale(0.85,0.9) translate(0px,-20px) skew(-9deg,0); 旋转缩放定位倾斜
(4)增加了更多的css选择器,多背景rgba
(5)在css3中唯一引入的伪元素是::selection
(6)媒体查询,多栏布局
(7)border-image
2.减小页面加载时间的方法
(1)减少重复的HTTP请求数量比如:减少调用其他页面文件的数量;把需要频繁加载的图片合成一个单独的图片
(2)压缩JavaScript,css代码
(3)在文件头部放置css样式,在文件尾部放置JavaScript脚本
(4)css,JavaScript改为外部调用
(5)尽可能减少DOM元素
(6)避免使用css脚本
(7)添加文件过期或缓存头
(8)使用cdn网络加速
(9)服务器启用gzip压缩功能
(10)ajax采用缓存调用
(11)ajax尽量采用get方式调用
(12)养成良好的开发维护习惯,尽量避免脚本重复调用
(13)缩减iframe的使用
(14)优化图片文件
(15)当页面内容大到一定程度,可以采用分页的方式展现,或者淘宝的翻页后加载方式
(16)使用多域名负载网页内的多个文件、图片
3.如何画一个矩形
在HTML页面中添加canvas标签,然后在JS中获取,并设定初始位置和宽度高度,即可画出一个矩形。代码如下,效果展示:
canvas画矩形
4.关于vue的生命周期
Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。
每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。
-
实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,这个时候,数据还没有挂载呢,只是一个空壳,无法访问到数据和真实的dom,一般不做操作
-
挂载数据,绑定事件等等,然后执行created函数,这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数,在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取
-
接下来开始找实例或者组件对应的模板,编译模板为虚拟dom放入到render函数中准备渲染,然后执行beforeMount钩子函数,在这个函数中虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取
-
接下来开始render,渲染出真实dom,然后执行mounted钩子函数,此时,组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已经挂载好了,可以在这里操作真实dom等事情...
-
当组件或实例的数据更改之后,会立即执行beforeUpdate,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染,一般不做什么事儿
-
当更新完成后,执行updated,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom
-
当经过某种途径调用$destroy方法后,立即执行beforeDestroy,一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等等
-
组件的数据绑定、监听...去掉后只剩下dom空壳,这个时候,执行destroyed,在这里做善后工作也可以