Web前端年后跳槽必看的各种面试题

时间：2022-08-05 15:05:26

幸运且光荣的被老大安排了一个任务 - “去整理些前端面试题”。年前确实不是招人的好时候，所以我们前端团队经过了超负荷的运转，终于坚持过了春节。春节以后就开始招人啦，这套题考察的目标就是基础基础再基础，嘿嘿。

事先声明：

◆ 这些题目的来源：面试曾经被问过;工作被别人问过或者遇见过;网上看见过...

◆ 答案真心不给提供，真的是许多问题都需要个人的理解和沉淀，所以还请各位自己动手...前端可以试试自己差不多能回答多少题，哈哈。

◆ 其实很多题我也没有好答案，面试的时候如果遇到牛人我也可以顺便交流交流，反正我也只是一面，不丢人也不怕丢人。

◆ 如果朋友们有好的面试题欢迎提建议，我会其实补充更新的，先谢谢各位了。

HTML相关

1. <!DOCTYPE>标签的定义与用法。

2. 块级元素和行内元素都有哪些?

3. 你真的了解HTML吗? 雅虎面试题　　把前面黄底那段拿去搜索下就知道了(曾在某浪公司面试的时候被问到过，确实是很好的问题)。

CSS相关

1. 介绍所知道的CSS hack技巧(如：_， *， +， \9， !important 之类)。

2. 介绍CSS盒模型。

3. CSS层叠是什么?介绍一下。

4. 都知道哪些CSS浏览器兼容性问题。

5. 有时会被问到些刁钻点的题，比如position值都有哪些，CSS3都有哪些新内容...

JavaScript基础相关

1. HTTP协议的状态消息都有哪些?(如200、302对应的描述)

2. AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?

3. 同步和异步的区别?

4. 简述JavaScript封装。

5. JavaScript继承有哪两种形式形式，进行描述。

6. 什么是闭包?以下代码点击<p> 会输出什么?为什么?能大概说明白的话继续问能想出几种解决办法。

 

    

  1. <!DOCTYPE HTML> 
    2.  
 
  2. 
<html> 

    3.  
 
  3. 
<head> 

    4.  
 
  4. 
<meta charset="utf-8" /> 

    5.  
 
  5. 
<title>闭包演示</title> 

    6.  
 
  6. 
<style type="text/css"> 

    7.  
 
  7.     p {background:gold;}  
    8.  
 
  8. 
</style> 

    9.  
 
  9. 
<script type="text/javascript">   

    10.  
 
  10. function init() {      
    11.  
 
  11. 
    var pAry = document.getElementsByTagName("p");      

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

    13.  
 
  13. 
         pAry[i].onclick = function() {      

    14.  
 
  14.          alert(i);      
    15.  
 
  15.     }   
    16.  
 
  16.   }  
    17.  
 
  17. }  
    18.  
 
  18. 
</script>   

    19.  
 
  19. 
</head>   

    20.  
 
  20. 
<body onload="init();">   

    21.  
 
  21. 
<p>产品 0</p>   

    22.  
 
  22. 
<p>产品 1</p>   

    23.  
 
  23. 
<p>产品 2</p>   

    24.  
 
  24. 
<p>产品 3</p>   

    25.  
 
  25. 
<p>产品 4</p>   

    26.  
 
  26. 
</body>   

    27.  
 
  27. 
</html>  

    28.  




7. 在JS中this关键字的使用场合和用法(如在构造函数中、setTimeout中等)。
 

8. 简述下cookie的操作，还有cookie的属性都知道哪些。
 

9. IE与FF的JS兼容性都知道哪些。
 

10. DOM操作 - 怎样添加、移除、移动、复制、创建和查找节点(这个问题真心是基础题，一般不会问)。
 

jQuery相关
 

1. jQuery源码是否尝试去读过?说说基本的架构或者 jQuery.fn.init 中都做了哪些判断。
 

2. 都知道哪些不好的jQuery书写方式。
 

3. Sizzle是否有读过?
 

其它相关的加分项：
 

1. 都使用和了解过哪些编辑器?都使用和了解过哪些日常工具?
 

2. 都知道有哪些浏览器内核?开发过的项目都兼容哪些浏览器?
 

3. 国内外的JS牛人都知道哪些?
 

4. 瀑布流布局或者流式布局是否有了解
 

4. 正则表达式有系统学习过吗(看书或网上教程)?有的话就问问简单点的邮箱验证、URL验证， 或者问问 贪婪匹配与懒惰匹配 的理论知识。



5. Node.js是否有过尝试?到什么程度?说说个人理解的看法?
 

6. HTML5都有哪些新的JS API?
 

7. 前端优化知识都知道哪些?
 

8. 基础算法题(如快速排序，能否一两句说说重要的核心原理或者数组消重等)。
 

9. 是否有接触过或者了解过重构。
 


 


 


 

 

1.简述div元素和span元素的区别。
 

 
 

div是块元素，默认换行，一般用于排版。
 

span是行内元素，默认不换行，一般用于局部文字样式。
 

 
 

通过display属性他们之间可以相互转换，div默认为block,span默认为inline。
 

 
 

2.谈谈javascript数组方法sort()的使用，重点介绍sort()参数的使用及其内部机制。
 

 
 

语法：arrayObject.sort(sortby)
 

参数sortby:可选，规定排序顺序。必须是函数。



 
 

返回对数组的引用。注意，数组在原数组上进行排序，不生成副本。
 

 
 

如果该方法没有使用参数，将按照字符编码的顺序进行排序。
 

如果想要按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b，其返回值如下：
 

1）若a小于b，在排序后的数组中a应该出现在b之前，返回一个小于0的值。
 

2）若a等于b，返回0。
 

3）若a大于b，则返回一个小于0的值。
 

例：按照数值进行排序
 

 
 

<script type="text/javascript">

function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))</script>
 

 
 

 
 

 
 

3.结合<span id="outer"><span id="inner">text</span></span>这段结构，谈谈innerHTML outerHTML innerText之间的区别。
 

 
 

innerHTML:对象里面的HTML内容，这里是<span id="inner">text</span>



outerHTML:对象里面包括对象本身的HTML内容，这里是<span id="outer"><span id="inner">text</span></span>
 

innerText:对象里面的文本内容，这里是text
 

 
 

4.说几条XHTML规范的内容。
 

 
 

1）标签名必须用小写字母。
 

2）所有标签都必须被关闭，包括空标签。
 

3）属性值必须加引号。
 

4）用Id属性代替name属性。
 

5）所有XHTML文档必须进行文件类型声明。
 

 
 

5.对Web标准化（或网站重构）知道哪些相关知识，简述几条你知道的Web标准？
 

 
 

为什么要使用web标准？
 

1）具有更好的兼容性。
 

2）易于代码维护和开发。
 

3）可增加网站的访问量。
 

4）标准的web文档更易被转换为其他格式。
 

5）更易被搜索引擎访问，也更易被准确索引。
 

6）更易被JavaScript和DOM代码访问。



 
 

W3C标准：HTML、XHTML、CSS、XML、XSL、DOM。
 

 
 

6.完成foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。
 

 
 

<html>
 

<head>
 

    <script type="text/javascript">
 

        function foo() {
 

    //在此处添加代码
 

            var radioGroup = document.getElementsByName("radioGroup");
 

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

                if(radioGroup[i].checked) {
 

                    alert("你选择了第" + (i+1)+"单选框");
 

                }
 

            }
 

            return false;
 

        }
 

    </script>
 

</head>



<body>
 

<form name="form1" onsubmit="return foo();">
 

    <input type="radio" name="radioGroup"/>
 

    <input type="radio" name="radioGroup"/>
 

    <input type="radio" name="radioGroup"/>
 

    <input type="radio" name="radioGroup"/>
 

    <input type="radio" name="radioGroup"/>
 

    <input type="radio" name="radioGroup"/>
 

    <input type="submit"/>
 

</form>
 

</body>
 

</html>
 

 
 

7.填充注释部分的函数体，使得foo()函数调用弹出“成功”的对话框。代码应尽量简短。
 

 
 

 
 

<html>
 

<head>
 

    <script>
 

    function foo() {



        var str = reverse('a,b,c,d,e,f,g');
 

        alert(str);
 

        if (str == 'g,f,e,d,c,b,a') {
 

            alert('成功');
 

        }else {
 

            alert('失败');
 

        }
 

    }
 

    function reverse(str)
 

    {
 

        // 在此处加入代码，完成字符串翻转功能
 

        return str.split(",").reverse().join(",");
 

    }
 

    </script>
 

</head>
 

<body>
 

    <INPUT type="button" value="str" onclick="foo()"/>
 

</body>
 

</HTML>
 

 



 
 

 
 

8.下面代码：
 

<script type="text/javascript">
 

var x = 1;
 

var y = 0;
 

var z = 0;
 

function add(n) {
 

n = n +1;
 

}
 

y = add(x);
 

function add(n) {
 

n = n + 3;
 

}
 

z = add(x);
 

s = y + z;
 

</script>
 

求：y、z、s的值。
 

 
 

答案：undefined、undefined、NaN。两个add函数都没有返回值，所以是undefined，两个undefined相加自然是NaN。



 
 

9.下面代码：
 

 
 

<script type="text/javascript">
 

var x = 1;
 

var y = 0;
 

var z = 0;
 

function add(n) {
 

return n = n +1;
 

}
 

y = add(x);
 

function add(n) {
 

return n = n + 3;
 

}
 

z = add(x);
 

s = y + z;
 

</script>
 

求：y、z、s的值。
 

 
 

 



答案：4，4，8。直接通过function声明的函数，后面定义的会影响前面的。
 

<script type="text/javascript">
 

function x() {alert("2");}
 

x();//输出3
 

function x() {alert("3");}
 

x();//输出3
 

</script>
 

通过var声明的函数，后面定义的不会影响前面的：
 

<script type="text/javascript">
 

var x = function() {alert("0");}
 

x();//输出0
 

var x = function() {alert("1");}
 

x();//输出1
 

</script>
 

通过function定义的函数，后面定义的，照旧影响前面的引用，但是不能改变通过var声明函数后的引用，反而，通过var声明的函数，改变了后来通过声明函数之后的引用。
 

<script type="text/javascript">
 

var x = function() {alert("1");}
 

x();//输出1
 

function x() {alert("3");}
 

x();//输出1



</script>
 

<script type="text/javascript">
 

function x() {alert("2")};
 

x();//输出3
 

var x = function() {alert("0");}
 

x();//输出0
 

var x = function() {alert("1");}
 

x();//输出1
 

function x() {alert("3");}
 

x();//输出1
 

</script>
 

 
 

10.下面的输出结果为：
 

 
 

typeof(NaN) //number
 

typeof(Infinity) //number
 

typeof(null) //object
 

typeof(undefined) //undefined
 

 
 

NaN == NaN //false



NaN != NaN //true
 

NaN >= NaN //false
 

 
 

null == undefined //true
 

null >= undefined //false
 

null <=undefined //false
 

 
 

parseInt("123abc") //123
 

"123abc" - 0 //NaN
 

 
 

Infinity > 10 //true
 

Infinity == NaN //false
 

Infinity > "abc" //false
 

 
 

true == 1 //true
 

new String("abc") == "abc" //true
 

new String("abc") === "abc" //false
 

 
 

 
 

var a = "123abc";



alert(typeof(a++)); //number
 

alert(a); //NaN
 

 
 

 
 

 
 

var a = "123abc";
 

a.valueOf = function(){return parseInt(a);}
 

a.toString = function(){return parseInt(a);}
 

alert(++a); //NaN
 

alert(a-0); //NaN
 

 
 

 
 

 
 

var a = new Object();
 

a.toString = function(){return "123abc";}
 

a.valueOf = function(){return parseInt(a);}
 

alert(++a); //124
 

alert(a-0); //124
 

 
 

 



 
 

String.prototype.valueOf = function()
 

{
 

return parseFloat(this);
 

}
 

alert("123abc" > 122); //false
 

alert(new String("123abc") > 122); //true
 

 
 

 
 

 
 

var s = new String("abc");
 

alert(typeof(s) == typeof("abc")); //false typeof(s) == object 而typeof("abc")==string
 

alert(s === "abc"); //false
 

alert(s.toString() == s); //true
 

 
 

标签：
相关文章