前端基础面试题

HTML+CSS

1.对WEB标准以及W3C的理解与认识

　　标签闭合、标签小写、不乱嵌套、使用外链css和js脚本、结构行为表现的分离

2.xhtml和html有什么区别

　　html，xhtml和xml的定义：

　　　　1、html即是超文本标记语言（Hyper Text Markup Language），是最早写网页的语言，但是由于时间早，规范不是很好，大小写混写且编码不规范；
　　　　2、xhtml即是升级版的html（Extensible Hyper Text Markup Language），对html进行了规范，编码更加严谨纯洁，也是一种过渡语言，html向xml过渡的语言；
　　　　3、xml即时可扩展标记语言（Extensible Markup Language），是一种跨平台语言，编码更自由，可以自由创建标签。
　　　　4、网页编码从html>>xhtml>>xml这个过程发展。

　　html，xhtml和xml的区别：

　　　　1、xhtml对比与html，xhtml文档具有良好完整的排版，体现在两方面：a、元素必须要有结束标签；b、元素必须嵌套；
　　　　2、对于html的元素和属性，xhtml必须小写，因为xml是严格区分大小写的，<li>和<LI>是不同的标签；
　　　　3、xhtml的属性值必须在引号之中；
　　　　4、xhtml不支持属性最小化，什么是属性最小化了？
　　　　　　正确:非最小化属性(unminimized attributes)
　　　　　　　　<input checked="checked">
　　　　　　不正确:最小化属性(minimized attributes)
　　　　　　　　<input checked>
　　　　5、 在xhtml中，name属性是不赞成使用的，在以后的版本中将被删除。

3.CSS引入的方式有哪些? link和@import的区别是?

　　内联 内嵌 外链 导入

• link属于html标签，而@import是css提供的。
• 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
• link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
• link方式样式的权重高于@import的。

4.你如何对网站的文件和资源进行优化？期待的解决方案包括：

　　文件合并

　　文件最小化/文件压缩

　　使用CDN托管

　　缓存的使用

 

 

JS

1.javascript的typeof返回哪些数据类型

　　Object number function boolean underfind

2.例举3种强制类型转换和2种隐式类型转换？

　　强制（parseInt,parseFloat,number）

　　隐式（== - ===）

3.ajax请求的时候get 和post方式的区别

• GET在浏览器回退时是无害的，而POST会再次提交请求。

• GET产生的URL地址可以被Bookmark，而POST不可以。

• GET请求会被浏览器主动cache，而POST不会，除非手动设置。

• GET请求只能进行url编码，而POST支持多种编码方式。

• GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

• GET请求在URL中传送的参数是有长度限制的，而POST么有。

• 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

• GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

• GET参数通过URL传递，POST放在Request body中。 

4.call和apply,bind的区别

　　call()和apply()就是改变函数的执行上下文，也就是this值。他们两个是Function对象的方法，每个函数都能调用。

　　他们的第一个参数就是你要指定的执行上下文，第二个用来传递参数(说第二个不准确，应该说第二部分，因为参数可以传多个)，

　　也就是传给调用call和apply方法的函数的参数。说白了，就是调用函数，但是让它在你指定的上下文下执行，这样，函数可以访问的作用域就会改变

function apply1(num1, num2){
    return sum.apply(this, [num1, num2]);
}
function call1(num1, num2){
    return sum.call(this, num1, num2);

}

call的第二部分参数要一个一个传，apply要把这些参数放到数组中。这就是他们的区别，真的就这么点区别！！！

然后，不得不说的一点：它们的第二个参数都可以传arguments。

 

bind是新创建一个函数，然后把它的上下文绑定到bind()括号中的参数上，然后将它返回。

所以，bind后函数不会执行，而只是返回一个改变了上下文的函数副本，而call和apply是直接执行函数。

if (!function() {}.bind) {
    Function.prototype.bind = function(context) {
        var self = this
            , args = Array.prototype.slice.call(arguments);
            
        return function() {
            return self.apply(context, args.slice(1));    
        }
    };
}

5.闭包是什么，有什么特性，对页面有什么影响

闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题

6.数组去重

new Set([1,2,3,3]) //[1,2,3]

function oSort (arr) {
　　var result = {};
　　var newArr = [];
　　for (var i = 0; i < arr.length; i++){
　　　　if(!result[arr[i]]){
　　　　　　arr[i].push(newArr);
　　　　　　result[arr[i]] = 1;
　　　　}
　　}
　　result newArr
}

7.排序算法

//快速排序<递归函数实现>

　　function quickSort (arr) {

　　　　if(arr.length < 2) return arr

　　　　　　var left = [];

　　　　　　var right = [];

　　　　　　var midSlice = Math.floor(arr.length/2);

　　　　　　var midNum = arr.splice(midSlice,1)[0];

　　　　　　for (var i = 0; i < arr.length; i++){

　　　　　　　　if(arr[i] < midNum){

　　　　　　　　left.push(arr[i])

　　　　　　}else{

　　　　　　　　right.push(arr[i])

　　　　　　}

　　　　}

　　　　return quickSort(left).concat([midNum],quickSort(right))

　　}

　　console.log(quickSort([5,4,3,2,1]))

//实现冒泡排序

　　function oSort(arr){

　　　　var temp;

　　　　for(var i=0;i<arr.length;i++){

　　　　　　for(var j=0;j<arr.length-i;j++){

　　　　　　　　if(arr[j]>arr[j+1]){

　　　　　　　　　　temp = arr[j];

　　　　　　　　　　arr[j] = arr[j+1];

　　　　　　　　　　arr[j+1] = temp;

　　　　　　　　}

　　　　　　}

　　　　}

　　　　return arr

　　}

　　console.log(oSort([5,4,3,2,1]))

//选择排序

　　function selectSort(arr){

　　　　var len=arr.length;

　　　　var temp;

　　　　for(var i=0;i<len-1;i++){

　　　　　　for(var j=i+1;j<len;j++){

　　　　　　　　if(arr[j]<arr[i]){

　　　　　　　　　　temp=arr[j];

　　　　　　　　　　arr[j]=arr[i];

　　　　　　　　　　arr[i]=temp;

　　　　　　　　}

　　　　　　}

　　　　}

　　　　return arr;

　　}

console.log(oSort([5,4,3,2,1]))