可以当做笔记的前端面试题（一：HTML和CSS、JS基础）

最新推荐文章于 2024-06-24 20:51:09 发布

竹叶轻拂水

最新推荐文章于 2024-06-24 20:51:09 发布

阅读量1.9k

点赞数

分类专栏：笔记文章标签：笔记面试题总结

本文链接：https://blog.csdn.net/cbb_2313/article/details/85061778

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这些面试题都来自于网络，只记录了一部分，以后可以当做笔记来看。

一、HTML和CSS

1、为什么利用多个域名来存储网站资源会更有效？

CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题

2、请描述一下cookies，sessionStorage和localStorage的区别？

cookie
- 数据的声明周期：一般在服务器生成，可以设置有效时间。如果在浏览器端设置cookie，默认是关闭浏览器失效
- 存放数据的大小一般4k左右
- 与服务器端的通信：每次都会携带在HTTP请求头中，如果使用cookie保存过多数据会带来性能问题
- 易用性：需要程序员自己封装，原生的cookie接口不友好

localStorage和sessionStorage
- 数据的声明周期：localStorage除非手动清除，否则永久保存;sessionStorage仅在当前回话下有效，关闭页面或关闭浏览器后会被清除
- 存放数据的大小：一般为5MB左右
- 仅仅在客户端（浏览器）中保存，不参与服务器的通信
- 易用性：原生接口可以接受，也可以再次封装来对Object和Array有更好的支持

3、知道的网页制作会用到的图片格式有哪些？

png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）
科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

4、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

图片懒加载：在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

5、谈谈以前端角度出发做好SEO需要考虑什么？

了解搜索引擎如何抓取网页和如何索引网页
你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。
Meta标签优化
主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。
如何选取关键词并在网页中放置关键词
搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。
了解主要的搜索引擎
虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。
主要的互联网目录
Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。
按点击付费的搜索引擎
搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。
搜索引擎登录
网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。
链接交换和链接广泛度（Link Popularity）
网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。
合理的标签使用

6、CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

最基本的：
设置display属性为none，或者设置visibility属性为hidden
技巧性：
设置宽高为0，设置透明度为0，设置z-index位置在-1000em

7、超链接访问过后hover样式就不出现的问题是什么？如何解决？

答案：被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

8、什么是外边距重叠？重叠的结果是什么？

外边距重叠就是margin-collapse。
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

9、px和em的区别。

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

10、Sass、LESS是什么？大家为什么要使用他们？

他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
为什么要使用它们？
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

11、CSS中link和@import的区别是：

link是html的标签，不存在什么兼容问题，而@import是CSS提供的，只有在ie5以上版本才可以被识别，在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用
Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）

12、简介盒子模型：

CSS的盒子模型有两种：IE盒子模型、标准的W3C盒子模型模型
盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框
在这里插入图片描述

13、html常见兼容性问题？

双边距BUG float引起的使用display
3像素问题使用float引起的使用dislpay:inline -3px
超链接hover 点击后失效使用正确的书写顺序 link visited hover active
Ie z-index问题给父级添加position:relative
Png 透明使用js代码改
Min-height 最小高度！Important 解决’
select 在ie6下遮盖使用iframe嵌套
为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
IE5-8不支持opacity，解决办法：
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 /
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”; / for IE 8*/
}
IE6不支持PNG透明背景，解决办法: IE6下使用gif图片

14、前端页面有哪三层构成，分别是什么?作用是什么?

答：结构层 Html 表示层 CSS 行为层 js。

15、列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

block 像块类型元素一样显示。
none 缺省值。向行内元素类型一样显示，还有隐藏元素。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
position的值
*absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
*fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。

relative
生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left, right z-index 声明）。
inherit 规定从父元素继承 position 属性的值。

16、浏览器标准模式和怪异模式之间的区别是什么?

怪异模式：在HTML和CSS的标准化未完成之前，各个浏览器对于HTML和CSS的解析各有不同的实现，我们称之为怪异模式
标准模式：浏览器遵循一个标准去解析页面-HTML和CSSDE规范（W3C）

17、什么是外边距重叠？重叠的结果是什么？

外边距重叠margin-collapse：在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距
折叠结果遵循下列计算规则：
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时，折叠结果是两者的相加的和、

18、描述一个"reset"的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？

重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。
你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。
在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像HTML的audio元素不一致或line-height不一致。

19、css优先级算法如何计算？

!important > id > class > 标签
!important 比内联优先级高
*优先级就近原则，样式定义最近者为准;
*以最后载入的样式为准;

20、哪些css属性可以继承？

可继承：font-size font-family color, ul li dl dd dt;
不可继承：border padding margin width height ;

二、JS基础

1、例举3种强制类型转换和2种隐式类型转换?

强制（parseInt(),parseFloat(),Number()）
隐式（== ,!!）

2、事件绑定和普通事件有什么区别

普通添加事件的方法：

var btn = document.getElementById("hello");
btn.onclick = function(){
	alert(1);
}
btn.onclick = function(){
	alert(2);
}
// 执行上面的代码只会alert 2

事件绑定方式添加事件：

var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
	alert(1);
},false);
btn.addEventListener("click",function(){
	alert(2);
},false);
// 执行上面的代码会先alert 1 再 alert 2

普通事件和事件绑定的区别：

普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。
addEventListener不兼容低版本IE
普通事件无法取消
addEventLisntener还支持事件冒泡+事件捕获

3、IE和DOM事件流的区别

1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题

4、IE和标准下有哪些兼容性的写法

Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

5、如何阻止事件冒泡和默认事件

canceBubble()只支持IE
return false,stopPropagation()

6、javascript的本地对象，内置对象和宿主对象

本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等

7、`==`和`===`的不同

==会自动转换类型
===不会

8、已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)

```
document.getElementById("ID").value
```

9、希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)

  var domList = document.getElementsByTagName(‘input’)
  var checkBoxList = [];
  var len = domList.length;　　//缓存到局部变量
  while (len--) {　　//使用while的效率会比for循环更高
  　　if (domList[len].type == ‘checkbox’) {
      　　checkBoxList.push(domList[len]);
  　　}
  }

10、iframe的优缺点？

优点：

解决加载缓慢的第三方内容如图标和广告等的加载问题
Security sandbox
并行加载脚本

缺点：

iframe会阻塞主页面的Onload事件
即时内容为空，加载也需要时间
没有语意

11、请你谈谈Cookie的弊端？

缺点：
- 1.Cookie数量和长度的限制。每个domain（作用域）最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
- 2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
- 3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
  • 由于在HTTP请求中的cookie是明文传递的，潜在的安全风险，Cookie 可能会被篡改
  • 有些状态不可能保存在客户端
  • cookie会被附加在每个HTTP请求中，所以无形中增加了流量
  • cookie一般不可跨域使用
  • 没有封装好的setCookie和getCookie方法，需要开发者自省封装

12、js延迟加载的方式有哪些？

defer /dɪ’fɝ/和async /æˈsɪŋk/
动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）
按需异步载入js

defer是标签的属性，只使用于外部脚本文件，在js中设置defer属性，表示脚本在执行时不会影响页面的结构，也就是说脚本会延迟到整个页面结束之后再执行，多个有defer的脚本不一定会按照顺序执行。
1、defer 和 async 都是延迟加载，都适用于外部脚本文件，都不能控制加载顺序。
2、将脚本语言放到的上面。

13、哪些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包
控制台日志
循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

14、事件委托是什么

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
图片来自知乎专栏
知乎专栏地址：https://zhuanlan.zhihu.com/p/26536815

15、闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁

   function outer(){
      var num = 1;
      function inner(){
          var n = 2;
          alert(n + num);
      }
      return inner;
  }
  outer()();

16、解释jsonp的原理，以及为什么不是真正的ajax

jsonp是一种跨域通信的手段，它的原理其实很简单，动态创建script标签，回调函数：
- 1、首先是利用script标签的src属性来实现跨域。
- 2、通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。
- 3、由于使用script标签的src属性，因此只支持get方法
jsonp为什么不是真正的ajax
- 1、ajax和jsonp这两种技术在调用方式上"看起来"很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
- 2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
- 3、所以说，其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。
- 4、还有就是，jsonp是一种方式或者说非强制协议，如同ajax一样，它也不一定非要json格式来传递数据，如果你愿意，字符换也行，只不过这样不利于jsonp提供公开服务。
- 总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变这一点。

17、请尽可能详尽的解释ajax的工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。
简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。

Ajax的原理就是:通过javascript的方式，将前台数据通过xmlhttp对象传递到后台，后台在接收到请求后，将需要的结果，再传回到前台，这样就可以实现不需要页面的回发，页是数据实现来回传递，从页实现无刷新。
XMLHttpRequest 对象方法描述

abort() 停止当前请求
getAllResponseHeaders() 作为字符串返问完整的headers
getResponseHeader(“headerLabel”) 作为字符串返问单个的header标签
open(“method”,“URL”[,asyncFlag[,“userName”[, “password”]]]) 设置未决的请求的目标 URL, 方法, 和其他参数
send(content) 发送请求
setRequestHeader(“label”, “value”) 设置header并和请求一起发送 ('post’方法一定要 )
XMLHttpRequest 对象属性描述
onreadystatechange 状态改变的事件触发器，readyState 对象状态(integer):
0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成
responseText 服务器进程返回数据的文本版本
responseXML 服务器进程返回数据的兼容DOM的XML文档对象
responseBody 服务器返回的主题（非文本格式）
responseStream 服务器返回的数据流
status 服务器返回的状态码, 如：404 = “文件末找到” 、200 =“成功”
statusText 服务器返回的状态文本信息

18、什么是三元表达式？“三元”表示什么意思？

三元运算符:
三元如名字表示的三元运算符需要三个操作数。
语法是条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。

19、业界常用的优化WEB页面加载速度的方法（可以分别从页面元素展现，请求连接，css,js,服务器等方面介绍）参考下面23题：前端代码优化的方法

在这里插入图片描述

20、列举常用的web页面开发，调试以及优化工具

谷歌，IE，火狐浏览器
谷歌插件：WEB前端助手（可以优化代码，压缩代码等等）、Generate some CSS3（可以调试css的一些样式）等等。。

21、解释什么是sql注入，xss漏洞

sql注入：
- SQL 注入，顾名思义就是通过注入 SQL 命令来进行攻击，更确切地说攻击者把 SQL 命令插入到 web 表单或请求参数的查询字符串里面提交给服务器，从而让服务器执行编写的恶意的 SQL 命令。
- 对于 web 开发者来说，SQL 注入已然是非常熟悉的，而且 SQL 注入已经生存了 10 多年，目前已经有很成熟的防范方法，所以目前的 web 应用都很少会存在漏洞允许进行 SQL 注入攻击。除非是入门开发人员，在开发的时候仍使用旧的技术去实现（比如 Java 的 Statement 和 PreparedStatement）
- 产生的原因：从上面可知，SQL 注入是通过让服务器执行了恶意的 SQL 命令从而进行攻击的，那么主要问题就出在于服务器是如何生成 SQL 语句的。其实绝大多数拥有 SQL 注入漏洞的 Web 系统，在生成 SQL 语句的时候，采用的是拼接字符串的方式，并且没有对要组装成 SQL 语句的参数进行检验和过滤。
XSS漏洞（XSS攻击）
- XSS ，全名：cross-site scripting（跨站点脚本），是当前 web 应用中最危险和最普遍的漏洞之一。攻击者尝试注入恶意脚本代码到受信任的网站上执行恶意操作，用户使用浏览器浏览含有恶意脚本页面时，会执行该段恶意脚本，进而影响用户（比如关不完的网站、盗取用户的 cookie 信息从而伪装成用户去操作）等等。
  他与 SQL 注入很类似，同样是通过注入恶意指令来进行攻击。但 SQL 注入是在服务器端上执行的，而 XSS 攻击是在客户端上执行的，这点是他们本质区别。
- XSS 攻击的分类没有标准，但普遍分为三类：
  反射型XSS（非持久性跨站攻击）
  存储型XSS（持久性跨站攻击
  DOM Based XSS（基于 dom 的跨站点脚本攻击）
- 总结：身为一名 web 开发人员，应该去了解一下如何能够进行 XSS 攻击，这并不是要你去成为一名黑客去攻击别人的网站，去盗取别人的信息，而是去了解有哪些 XSS 攻击场景，了解产生该漏洞的原因，从而去思考为什么会产生这个 bug，如何去修复这个 bug。要想设计出更好的 XSS 过滤器，就必须得知道有哪些攻击方式，才能这样思考更全面。

22、js中如何实现一个map

源码

  function Map() {
  this.elements = new Array();
  this.size = function() {
      return this.elements.length;
  }
  this.isEmpty = function() {
      return (this.elements.length < 1);
  }

  this.clear = function() {
      this.elements = new Array();
  }

  this.put = function(_key, _value) {
      if (!this.containsKey(_key))
          this.elements.push({
              key : _key,
              value : _value
          });
  }

  this.remove = function(_key) {
      var bln = false;

      try {
          for (i = 0; i < this.elements.length; i++) {
              if (this.elements[i].key == _key) {
                  this.elements.splice(i, 1);
                  return true;
              }
          }
      } catch (e) {
          bln = false;
      }
      return bln;
  }

  this.get = function(_key) {
      try {
          for (i = 0; i < this.elements.length; i++) {
              if (this.elements[i].key == _key) {
                  return this.elements[i].value;
              }
          }
      } catch (e) {
          return null;
      }
  }

  this.element = function(_index) {
      if (_index < 0 || _index >= this.elements.length) {
          return null;
      }
      return this.elements[_index];
  }

  this.containsKey = function(_key) {
      var bln = false;
      try {
          for (i = 0; i < this.elements.length; i++) {
              if (this.elements[i].key == _key) {
                  bln = true;
              }
          }
      } catch (e) {
          bln = false;
      }
      return bln;
  }

  this.containsValue = function(_value) {
      var bln = false;
      try {
          for (i = 0; i < this.elements.length; i++) {
              if (this.elements[i].value == _value) {
                  bln = true;
              }
          }
      } catch (e) {
          bln = false;
      }
      return bln;
  }

  this.values = function() {
      var arr = new Array();
      for (i = 0; i < this.elements.length; i++) {
          arr.push(this.elements[i].value);
      }
      return arr;
  }

  this.keys = function() {
      var arr = new Array();
      for (i = 0; i < this.elements.length; i++) {
          arr.push(this.elements[i].key);
      }
      return arr;
  }
  }

用法

  var map=new Map();
  //放入值
  map.put("key","value");
  //删除
  map.remove("key");

23、前端代码优化的方法

【】数据交互时数据量的合理安排
并不是收越少越好，而是按照数据量，流量和服务器性能计算出最合理的安排
【】console.time和console.timeEnd来测试代码性能
【】设置图片大小优化
【】测试包jsUnit，来做测试
【】测试包JSLint，优化代码
【】合并文件
包括js，css等这些脚本文件，尽量做文件合并，合并的目的是减少http请求，但是在合并和通用之间做合理安排
【】使用less来编写css，但是不适用css表达式技术
【】DNS优化
【】虽然gbk的网页打开速度>utf8，但是我们还是使用国际规范utf8来加强容错率
【】http请求文件，包括css，js，img，媒体，字体等等，能减少就尽量减少
【】ajax的Cache-Control设置，内存设置arr，objectlist，本地存储设置等
【】css和js制作成min压缩版本
【】gzip设置压缩打开
【】雪碧图
【】使用apache的mod_rewrite伪静态指令来做重定向跳转
【】浏览器渲染dom，尽量减少dom数量，就是减少浏览器渲染工作量
【】尽量减少dom的操作，一些操作，比如jq的html（）代替append()，不过以业务逻辑为主
【】摒弃滤镜这些技术
【】@import摒弃
【】摒弃table，iframe等元素
【】如果是iis服务器，设置etags优化
【】使用预加载技术
【】使用延迟加载技术
【】cdn技术，但是不宜过多（因为dns的原因）
【】样式顶部，js尾部
【】使用事件捕获，事件冒泡技术来捕捉事件源，而不是盲目的添加事件
【】png>jpg>gif，使用上，尽量用png
【】get>post，在可以get和post的同时，选择get，因为get更快捷，post的请求需要两步（post->httpheader>data）
【】移动端的优化，移动端很多场景摒弃jquery的原因，不是因为jquery不够强，而是因为有部分移动互联网设备对缓存做过设置，所以，一般过大的组件，包等不建议采用。一般建议在0-20k之间为好
【】内存不在使用，要清空内存，闭包进行优化，全局变量尽量减少，使用文件依赖（传参）
【】数组push<arr[len+1]
【】数组unshift<[].concat
【】if-else if这种嵌套越少越好
【】if(true)这种写法>if(a==‘string’)
【】concat的效率高，容错率高，多用concat进行各种拼接
【】只使用一次的代码，可以链式写法
【】字符串转数字（不含有字符的情况下），使用+号代替number方法
【】===>==
【】三目运算符的效率最快，用三目运算符代替ifelse，在一些情况下
【】一些情况，用||代替if else
【】用catch捕获错误
【】用ifelse，做严谨逻辑，比如ajax的data，if（data…）{}else(){}
【】封装命名空间的时候，可能会涉及到闭包，这里尽量做优化
【】filter方法
【】call和aplly方法影响性能，尽量选择性使用
【】模拟java的面向对象的时候，设置私有属性注意
【】模拟java面向对象的时候，尽量避免内存的多次申请，一些方法，添加到原型当中
【】尽量使用es6的class代替es5的模拟面向对象
【】对jquery对象和dom元素使用变量=起来
【】DocumentFragment代替循环dom操作
【】jquery查找，使用next(),eq(),find等过滤来代替$(’.aaa>aaa’)这样的写法
【】尽量减少嵌套，不论是循环，方法，判断，对象，数组等
【】当出现数据量大的数组的时候，尽量使用【快速排序算法】【希尔排序算法】来代替简单的插入排序和冒泡排序
【】性能上，原生js>jquery>=other
【】循环，减少循环
【】setInterval>setTimeout
【】尽量使用包代替命名空间
【】局部变量》全局变量！！！
【】eval摒弃
【】这种.aaa,.bb,.aaa.bb.cc这种，不要这样做，不清晰，也慢，尽量不要这么写，写好了的，再次使用，就用变量保存
【】a += 1 > a = a+1;
【】扩展的时候，用参数，对对象进行扩展，类似java的继承子对象的方式，多用这种方式对元对象进行扩展，方便维护。
【】Math>parseInt
【】不是做面向对象方式开发框架的时候，尽量不要用构造函数来创建对象，直接{}最好的
【】还是减少new（构造器）这个东西
【】正则>js逻辑
【】分号不要忘记
【】innerHTML比jquery的html和append都要好些
【】减少回流（这个参看浏览器解析原理）
【】摒弃with
【】适当使用常量
【】删除dom
【】事件代理
【】减少null值这种情况，也不要比较null值（null是人为造成的）
【】要么不创建dom对象，创建了就给它添加到页面里
【】注意内存的释放
【】解耦，解耦，解耦，重要的事情说三遍！！！！！！！！！！！！！！
【】自己写jquery插件，或者原生写一个js框架的时候，一定要注意两件事，一，判断类型！！！！typeof 二，释放内存和释放内存方法