一些面试题的整理

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中获取，并设定初始位置和宽度高度，即可画出一个矩形。代码如下，效果展示：http://kugaoheng.com/cs/rect.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas画矩形</title>
</head>
<body>
    <canvas id="rect"></canvas>
    <canvas id="rect2"></canvas>
    <script>
        var canvas = document.getElementById(\'rect\');
        var ctx = canvas.getContext(\'2d\');
        ctx.rect(0,0,280,130);
        ctx.stroke();
        function draw(id){
            var canvas = document.getElementById(id);
            if(canvas == null)
                return false;
            var context = canvas.getContext(\'2d\');
            context.fillStyle = \'blue\';
            context.fillRect(0,0,250,200);
            context.stroke();
        }
        draw(\'rect2\');
    </script>    
</body>
</html>

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，在这里做善后工作也可以