第一周笔试题原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的

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

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
如何使用：在cache.manifest文件的编写离线存储的资源在离线状态时，操作window.applicationCache进行需求实现

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

concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。

用法：var a = [1,2,3]; document.write(a.concat(4,5));

**indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回 -1 **。

用法：var str="Hello world!" document.write(str.indexOf("Hello") + "
"); document.write(str.indexOf("World") + "
"); document.write(str.indexOf("world"));

charAt() – 返回指定位置的字符。

用法：var str="hello world"; document.write(str.charAt(1));
**lastIndexOf() – 返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回 -1 **。

用法：var a=[1,2,3,4,5,6,7,8,9]; document.write(a.lastIndexOf(7));

substr() 函数 -- 返回从string的startPos位置，长度为length的字符串

用法：var atr ="Apple, Banana, Mango";

var str=atr.substr(7,13);

substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。

用法：var atr ="Apple, Banana, Mango";

var str=atr.substring(7,13);

slice() – 提取字符串的一部分，并返回一个新字符串。

用法：var a=[1,2,3,4,5,6,7,8,9,10]; console.log(a); document.write(a.slice(0,8));//多一部分都是从下标开始，（start。value:可以是0 end.value：结束数值）；

replace() – 用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。

用法：var str="hello world"; document.write(str.replace(/hello/,"w3c")); 替换方式:output(outputName.replace(/replaceName/,"methodname"))

search() – 执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。
split() – 通过将字符串划分成子串，将一个字符串做成一个字符串数组。

用法：var str="How are you doing today?" document.write(str.split(" ") + "
"); document.write(str.split("") + "
"); document.write(str.split(" ",3));

length – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。

用法：var arr = "I,Love,You,Do,You";**

var brr=arr.length;

toLowerCase() – 将整个字符串转成小写字母。

用法：var str="Hello World!" document.write(str.toLocaleLowerCase());

toUpperCase() – 将整个字符串转成大写字母。

用法：var str="Hello World!" document.write(str.toLocaleUpperCase());

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

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

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配合使用，因为超出的尺寸的会被隐藏

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用

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

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

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

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

建议：推荐使用，建议定义公共类，以减少CSS代码

4、*父级div定义height*

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

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

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

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

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

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

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

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧

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

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
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实现的功能。

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

只提交input，的话，给input设置一个键盘事件，就可以了，
表单支持回车提交：我们只需要在按下回车的时候，用js将焦点设置到页面中的某一个input上，那么及时按回车之前，我们的焦点是整个页面，按回车的时候，焦点已自动转移到某一个input标签上，浏览器也会自动帮我们提交了。

js代码：

```
<body>
		<input type="button" value="回车提交" id="auto" onclick="alert('你按了回车')"/>
	</body>

	<script type="text/javascript">
	    if((e.keyCode || e.which) == 13){
            var focusinput=document.getElementById("title")  //请根据自身页面情况选择一个input id名，我这里是title
            focusinput.focus();//获取焦点
        }
</script>

```

vue ：给form里的元素，设置双向数据绑定，按下回车键，获取，绑定的数据就可以了

第一周笔试题