测试和实施面试题收集

前端+测试+运维+算法综合
前端部分面试题

1. 判断第二个日期比第一个日期大
   如何用脚本判断用户输入的的字符串是下面的时间格式2004-11-21 必须要保证用户的输入是此格式，并且是时间，比如说月份不大于12等等，另外我需要用户输入两个，并且后一个要比前一个晚，只允许用JAVASCRIPT，请详细帮助作答，,
   //这里可用正则表达式判断提前判断一下格式，然后按下提取各时间字段内容

2. 用table显示n条记录，每3行换一次颜色，即1，2，3用红色字体，4，5，6用绿色字体，7，8，9用红颜色字体。

1
2
3
4
5
6
7
8
9
10

4、请写出用于校验HTML文本框中输入的内容全部为数字的javascript代码

除了写完代码，还应该在网页上写出实验步骤和在代码中加入实现思路，让面试官一看就明白你的意图和检查你的结果。
5、px和em的区别
相同点：px和em都是长度单位；
异同点：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
6、$(document).ready()方法和window.onload有什么区别？(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。
7、jquery中$.get()提交和$.post()提交有区别吗？
相同点：都是异步请求的方式来获取服务端的数据；
异同点：
1、请求方式不同：$.get()方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。
2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。
3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多
4、安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。
8、谈谈你对webpack的看法
WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。
webpack的两大特色：
1.code splitting（可以自动完成）
2.loader 可以处理各种类型的静态文件，并且支持串联操作
webpack 是以commonJS的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：

1. 对 CommonJS 、 AMD、ES6的语法做了兼容
2. 对js、css、图片等资源文件都支持打包
3. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持
4. 有独立的配置文件webpack.config.js
5. 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
6. 支持 SourceUrls 和SourceMaps，易于调试
7. 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活
   8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快
   9、创建ajax过程
   (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
   (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
   (3)设置响应HTTP请求状态变化的函数.
   (4)发送HTTP请求.
   (5)获取异步调用返回的数据.
   (6)使用JavaScript和DOM实现局部刷新.

10、快速 排序的思想并实现一个快速排序？
“快速排序”的思想很简单，整个排序过程只需要三步：
　　（1）在数据集之中，找一个基准点
　　（2）建立两个数组，分别存储左边和右边的数组
　　（3）利用递归进行下次比较
    <scripttype=“text/javascript”>
        functionquickSort(arr){
            if(arr.length<=1){
                return arr;//如果数组只有一个数，就直接返回；
            }
 
            var num = Math.floor(arr.length/2);//找到中间数的索引值，如果是浮点数，则向下取整
            var numValue =arr.splice(num,1);//找到中间数的值
            var left = [];
            var right = [];
            for(var i=0;i<arr.length;i++){
                if(arr[i]<numValue){
                   left.push(arr[i]);//基准点的左边的数传到左边数组
                }
                else{
                  right.push(arr[i]);//基准点的右边的数传到右边数组
                }
            }
            returnquickSort(left).concat([numValue],quickSort(right));//递归不断重复比较
        }
 
        alert(quickSort([32,45,37,16,2,87]));//弹出“2,16,32,37,45,87”
   
11、cookie 和session 的区别：
 1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
 2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
    考虑到安全应当使用session。
 3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
     考虑到减轻服务器性能方面，应当使用COOKIE。
 4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
 5、所以个人建议：
    将登陆信息等重要信息存放为SESSION
    其他信息如果需要保留，可以放在COOKIE中
12、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
    1.id选择器（ # myid）
    2.类选择器（.myclassname）
    3.标签选择器（div, h1, p）
    4.相邻选择器（h1 + p）
    5.子选择器（ul > li）
    6.后代选择器（lia）
    7.通配符选择器（ * ）
    8.属性选择器（a[rel = “external”]）
    9.伪类选择器（a: hover, li:nth-child）
优先级为:
!important > id > class > tag
important 比 内联优先级高,但内联比 id 要高
CSS3新增伪类举例：
    p:first-of-type选择属于其父元素的首个

元素的每个

元素。
    p:last-of-type  选择属于其父元素的最后

元素的每个

元素。
 
    p:only-of-type  选择属于其父元素唯一的

元素的每个

元素。
    p:only-child    选择属于其父元