前端常见面试题

Laugh
200 阅读7分钟

一、HTML5的离线储存怎么使用，工作原理能不能解释一下?

  1. 在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件

  2. 原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

  3. 页面头部像下面一样加入一个manifest的属性； 在cache.manifest文件的编写离线存储的资源 在离线状态时，操作window.applicationCache进行需求实现

CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: /offline.html

**二、js字符串操作函数? **

  • indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回 -1 **。 **位置方法indexOf()和lastIndexOf() **这两个方法都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引 **indexOf()方法从数组的开头（位置0）开始向后查找 **lastIndexOf()方法则从数组的末尾开始向前查找。 **这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1

    var numbers = [1,2,3,4,5,4,3,2,1]; alert(numbers.indexOf(4)); //3 alert(numbers.lastIndexOf(4)); //5 alert(numbers.indexOf(4, 4)); //5 alert(numbers.lastIndexOf(4, 4)); //3 var person = { name: "Nicholas" }; var people = [{ name: "Nicholas" }]; var morePeople = [person]; alert(people.indexOf(person)); //-1 alert(morePeople.indexOf(person)); //0

  • slice() 方法可从已有的数组中返回选定的元素。

    输出：

    George,John,Thomas John,Thomas George,John,Thomas

  • split() 方法用于把一个字符串分割成字符串数组。

输出：

How,are,you,doing,today? H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,? How,are,you

  • concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

在本例中，我们将把 concat() 中的参数连接到数组 a 中：

输出：

1,2,3,4,5

  • replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

在本例中，我们将使用 "W3School" 替换字符串中的 "Microsoft"：

输出：

Visit W3School!

三、请使用冒泡排序算法为下列数组排序

思路：比较两个相邻的元素，如果后一个比前一个大，则交换位置

var arr=[100，0.6，28，49，94，67，11]

function sort(element){

​ //外层循环，控制行数

​ //外层循环 控制比较次数，判断两个数的大小

​ for(var i = 0;i<element.length-1;i++) { ​ for(var j = 0;j<element.length-i-1;j++){

​ //如果前面的数大，放到后面

​ if(element[j]>element[j+1]){ ​ //把大的数字放到后面 ​ var swap = element[j]; ​ element[j] = element[j+1]; ​ element[j+1] = swap; ​ } ​ } ​ } ​ } ​ sort(element); ​ console.log("after:"+element);

四、简述你所知道的前端页面级性能优化

1、减少http请求，合理浏览器缓存

**2、启用压缩：**HTML、CSS、javascript文件启用GZip压缩可达到较好的效果

**3、CSS Sprites：**合并 CSS图片，减少请求数的又一个好办法。 **4、LazyLoad Images：**在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片 **5、CSS放在页面最上部，javascript放在页面最下面：**让浏览器尽快下载CSS渲染页面 6、异步请求Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）

7、减少cookie传输 一方面，cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，因此哪些数据需要写入cookie需要慎重考虑，尽量减少cookie中传输的数据量。另一方面，对于某些静态资源的访问，如CSS、script等，发送cookie没有意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发送cookie，减少cookie传输次数。

8、Javascript代码优化

9、CSS选择符优化

五、找到数组-1，-2，1，10，4，11，8中的最大值，至少 写出两种方法？

方法一（使用递归函数）：

var` `arr = [9,8,55,66,49,68,109,55,33,6,2,1];`` ` `var` `max = arr[0];` `function` `findMax( i ){`` ``if``( i == arr.length ) ``return` `max;`` ``if``( max < arr[i] ) max = arr[i];`` ``findMax(i+1);``}`` ` `findMax(1);``console.log(max);

方法二（使用for循环遍历）：

var` `arr = [9,8,55,66,49,68,109,55,33,6,2,1]; ``var` `max = arr[0];``for``(``var` `i = 1; i < arr.length; i++){`` ``if``( max < arr[i] ){``  ``max = arr[i];`` ``}``}` `console.log(max);

方法三（使用apply将数组传入max方法中直接返回）：

Math.max.apply(``null``,[9,8,55,66,49,68,109,55,33,6,2,1])

六、写一个方法，找出字符串abcabcabcabcabcabda中ab出现的次数置。

运用js查找摸个字符串出现的位置以及次数indexOf

var str = 'abcabcabcabcabcabda'; var index = str.indexOf('ab'); // 字符出现的位置 var num = 0; // 这个字符出现的次数 while(index !== -1) { console.log(index); // 打印字符串出现的位置 num++; // 每出现一次 次数加一 index = str.indexOf('ab',index + 1); // 从字符串出现的位置的下一位置开始继续查找 } console.log('一共出现了' + num + '次');

七、清除浮动的几种方式，各自的优缺点？

1.使用空标签清除浮动clear:both。

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：通俗易懂，容易掌握

缺点：会添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦

2.父级div定义overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单，代码少，浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏

3、父级div定义伪类:after和zoom(用于非IE浏览器)

原理：IE8以上和非IE浏览器才支持:after，原理和方法1有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。

缺点：代码多，要两句代码结合使用，才能让主流浏览器都支持

4、*父级div定义height*

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单，代码少，容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

5、*父级div定义overflow:auto*

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单，代码少，浏览器支持好

缺点：内部宽高超过父级div时，会出现滚动条。

八、 Javascript 中的定时器有那些？他们的区别及用法是什么？

img

  1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
  2. setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

九、解释css sprites,如何使用?

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片

用CSS sprites的好处有以下几bai点： 1、减少了图du片zhi个数，这样减小了dao对服务器的请求。 2、整个图片的变小了，使得图片下载速度更快。

#beauty { width:225px; height:248px; text-decoration:none; display:block; background-image:url(../images/demo/2010/beauty.jpg); background-position:0 0; } #beauty:hover,#beauty:active { background-position:225px 0; } 将光标移动到下图上即可看到我们使用CSS sprites实现的功能。

十、如果要让表单支持回车提交表单该怎样做?



<script type="text/javascript">
    document.onkeydown = function(e){
        if(!e) e = window.event;//火狐中是 window.event
        if((e.keyCode || e.which) == 13){
            document.getElementById("auto").click();
        }
    }
avatar
文章
阅读
粉丝