1.一个200 * 200的格在不同分辨率屏幕上下左右居中，用CSS实现
div{ width: 200px; height: 200px; background-color: red; position:absolute; top:50%; left:50%; margin-left:-100px; margin-top: -100px; z-index:1000; }2.实现左中右三栏布局，左右固定宽度，中间自适应
如果是最外层DIV布局设置的CSS宽度100％（宽度：100％），此时该DIV将盒子浏览器随宽度改变而宽度自适应改变。
一般情况下如果要让布局网页自适应浏览器宽度改变而改变，通常即使最外层的DIV默认宽度就是自适应值100％的，但我们依然最好也设置个宽度：100％，达到最大限度让各大浏览器兼容
有父级的盒子对象如果设置宽度为100％，那么这个盒子将继承上一级（父级）宽度而计算百分比值。假如父级宽度设置400像素，级子的格设置宽度为100％，那么这个子级的DIV宽度就是400像素。
格，p这类标签，默认宽度是自适应100％的，有时的英文不需要设置100％宽度的（可以不设置宽度），只要不给设置浮子样式，那么宽度就是默认为自适应100％的。但最外层的 DIV宽度的英文百分百时候，就最好给予设置宽度宽度为100％，这样最大限度兼容各大浏览器。
详情：https：//www.thinkcss.com/jiqiao/1000.shtml
①margin+浮动
<style type="text/css"> *{ margin: 0; padding: 0; } #left{ width: 200px; height: 300px; float: left; background-color: red; } #middle{ height: 300px; margin: 0 200px 0 200px; background-color: green; } #right{ width: 200px; height: 300px; float: right; background-color: orange; } </style>②定位+浮动
*{ margin: 0; padding: 0; } #left{ width: 200px; height: 300px; float: left; background-color: red; } #middle{ height: 300px; /* margin: 0 200px 0 200px; */ position: absolute; left: 200px; right: 200px; background-color: green; } #right{ width: 200px; height: 300px; float: right; background-color: orange; }③盒布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } #content{ display: -webkit-box; display: -moz-box; width: 100%; height: 300px; } #left{ width: 200px; height: 300px; background-color: red; } #middle{ -webkit-box-flex: 1; -moz-box-flex: 1; height: 300px; background-color: green; } #right{ width: 200px; height: 300px; background-color: orange; } </style> </head> <body> <div id="content"> <div id="left">我是左侧内容</div> <div id="middle">我是中间内容</div> <div id="right">我是右侧内容容</div> </div> </body> </html>3.清除浮动的几种方式
①父级DIV定义伪类：后和变焦
/* 清除浮动的代码 在父类div中定义*/ .clearfloat:after{ display: block; clear: both; content: ""; visibility: hidden; height: 0; } .clearfloat{ zoom: 1; }②在结尾处添加空格标签样式添加明确：两者（如果页面浮动布局多，就要增加很多空格，让人感觉很不爽）
③父级DIV定义溢出：隐藏
4.请描述的的的sessionStorage的和localStorage的的的的的区别
相同点：都存储在客户端
不同点：
① 存储大小：饼干为4K，的的sessionStorage的和的localStorage的的为500万或更多
② 有效值时间：
的的的sessionStorage的数据在当前浏览器关闭后自动删除;
localStorage的的的的数据存储持久数据，浏览器关闭数据也不会丢失，除非主动删除;
饼干数据在浏览器关闭之后也不会丢失，直到其设置的过期时间到了才会失效;
③ 数据与服务之间的交互方式
饼干的数据会自动传递到服务端，服务端也可以写到客户端;
的的的的sessionStorage和localStorage的的的的不会主动发送数据到服务端，数据一致保存在客户端;
5. 计算一个数组ARR所有元素的和
var s=[1,2,3,4]; var sum=s.reduce(function(pre,cur,index,array){ //返回数组项的和 正向相加 return pre+cur; }); alert(sum); //10function sum2(arr){ var all=0; for (var i=0;i<arr.length;i++) { if (typeof arr[i]=="number") { all+=arr[i]; } } return all; } document.write(sum2([1,2,3,4]));
6. 编写一个方法去掉数组里面重复的内容
①一般写法：
var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d']; //定义一个新的数组 var s = []; //遍历数组 for(var i = 0;i<arr.length;i++){ if(s.indexOf(arr[i]) == -1){ //判断在s数组中是否存在，不存在则push到s数组中 s.push(arr[i]); } } console.log(s);②es6写法（组对象中的每一项都不会重复）
let arr = ['abc','abcd','sss','2','d','t','2','sss','f','22','d']; console.log(Array.from(new Set(arr)));
7.null跟未定义的区别
空是空对象指针
未定义是声明了变量未赋值就是未定义;
8. http和https的区别
HTTP：HTTP协议运行在TCP之上，传输的都是明文传输速度快，但客户端和服务器都无法验证对方的身份，不安全;
HTTPS：HTTP运行在SSL / TSL之上，而SSL / TSL运行在TCP之上，传输的内容是经过加密的，如果客户端配置客户端验证，那么服务端也可以验证客户端身份，足够安全。
HTTP +加密+认证+完整性保护= HTTPS
使用两把密钥的公开密钥加密
公开密钥加密使用一对非对称的密钥。一把叫做私钥，另一把叫做公钥。私钥不能让其他任何人知道，而公钥则可以随意发布，任何人都可以获得。使用公钥加密方式，发送密文的一方使用对方的公钥进行加密处理，对方收到被加密的信息后，再使用自己的私钥进行解密。利用这种方式，不需要发送用来解密的私钥，也不必担心密钥被攻击者窃听而盗走。
9.常见的HTTP状态码
200：服务器已经成功处理了请求;
400：错误请求，服务器不理解请求的语法
403：服务器拒绝请求
404：服务器找不到请求的网页
500：服务器内部遇到错误，无法完成请求
501：服务器不具备完成请求的功能
503：服务器目前无法使用
以4开头的状态码代码表示：请求出了错误，妨碍服务器的处理;
以5开头的状态码表示：服务器在尝试处理请求的时候发生了内部错误;
10.网站性能优化的方法
缓存，JavaScript的的的的压缩和模块打包，按需加载资源，图片编码优化
11.哪些JS操作会引起内存泄漏？
①意外的全局变量;
②闭包;
③没有清理的DOM元素引用;
④被遗忘的定时器或回调;
12.浏览器是如何渲染页面的
①解析HTML文件，创建DOM树;
②解析CSS;
③将CSS和DOM合并，构建渲染树;
④布局和绘制，重绘和重排
13.一次完整的HTTP事务是怎样的过程？
①域名解析;
②发起TCP三次握手;
③建立起TCP连接后发起HTTP请求;
④服务端响应请求，返回的HTML代码;
⑤浏览器解析HTML代码，并请求代码中的资源;
⑥浏览器对页面进行渲染呈现给用户;
14. 从网址到显示页面，都经历了什么？
1，首先，在浏览器地址栏中输入网址
2，器浏览查看先浏览器缓存 -系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容若没有，则跳到第三步操作。
3，在发送HTTP请求前，需要域名解析（DNS解析），解析获取相应的IP地址。
4，浏览器向服务器发起TCP连接，与浏览器建立TCP三次握手。
5，握手成功后，浏览器向服务器发送HTTP请求，请求数据包。
如图6所示，服务器处理收到的请的英文什么意思？，将数据返回至浏览器
7，浏览器收到HTTP响应
如图8所示，读取页面内容，浏览器渲染，解析HTML源码
9，生成的大教堂树，解析CSS样式，JS的交互
10，客户端和服务器交互
11，阿贾克斯查询
15.什么是盒子模型？
在网页中，一个元素占有空间的大小由几个部分构成，包括其中元素的内容（内容），元素的内边距（填充），元素的边框（边框），元素的外边距（保证金）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域0.4个部分一起构成了CSS中元素的盒模型。
16.行内元素有哪些？块级元素有哪些？空（虚）元素有那些？
行内元素：A，B，跨度，IMG，输入，强，选择，标签，EM，按钮，字幕：区域
块级元素：DIV，UL，LI，DL，DT，DD，P，H1-H6，BLOCKQUOTE
空元素：即没有内容的HTML元素，例如：BR，间，小时，链接，输入，IMG
17.简述一下SRC与HREF的区别？
HREF是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
SRC是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置;在请求的SRC资源时会将其指向的资源下载并应用到文档内，例如JS脚本，IMG图片和帧等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载，编译，执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签。这也是为什么将JS脚本放在底部而不是头部。
18.什么是CSS Hack？
由于不同厂商的浏览器，比如Internet Explorer，Safari，Mozilla Firefox，Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
hack：本意：修改，引申为对软件的二次修改 css hack的意思是浏览器兼容
19.简述同步和异步的区别
的英文同步阻塞模式，异步的英文非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去;
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
20.px和EM的区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易.em 的值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合：1em = 16px。那么12px = 0.75em，10px = 0.625em
21.什么叫优雅降级和渐进增强？
渐进增强渐进增强：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果，交互等改进和追加功能达到更好的用户体验。优雅降级优雅降级：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：
一个。降级优雅英文的从复杂的现状开始，并试图减少用户体验的供给
增强湾渐进则的英文从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
C.降级（功能衰减）意味着往回看;而渐进增强则意味着朝前看，同时保证其根基处于安全地带
22.Javascript中被叫和主叫方的作用？
被叫方：是返回一个对函数的引用，该函数调用了当前函数;
来电显示：返回正在被执行的函数
23.统计字符串中字母个数或统计最多字母数。
var str = "aaaabbbccccddfgh"; var obj = {}; for(var i=0;i<str.length;i++){ var v = str.charAt(i); if(obj[v] && obj[v].value == v){ obj[v].count = ++ obj[v].count; }else{ obj[v] = {}; obj[v].count = 1; obj[v].value = v; } } for(key in obj){ document.write(obj[key].value +'='+obj[key].count+' '); // a=4 b=3 c=4 d=2 f=1 g=1 h=1 }
24.如何理解闭包？
闭包是指可以访问另一个函数作用域变量的函数，一般是定义在外层函数中的内层函数。
“闭包就是跨作用域访问变量。”
【“闭包就是一个引用了父环境的对象，并且从父环境中返回到更高层的环境中的一个对象。”如何理解？
我们换个说法：如果一个函数引用了父环境中的对象，并且在这个函数中把这个对象返回到了更高层的环境中，那么，这个函数就是闭包。
还是看上面的例子：
的getName函数中引用了用户（父）环境中的对象（变量名），并且在函数中把名称变量返回到了全局环境（更高层的环境）中，因此，的getName就是闭包。
为什么需要闭包？
局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。
特点
- 占用更多内存
- 不容易被释放
何时使用？
变量既想反复使用，又想避免全局污染
如何使用？
- 定义外层函数，封装被保护的局部变量。
- 定义内层函数，执行对外部函数变量的操作。
- 外层函数返回内层函数的对象，并且外层函数被调用，结果保存在一个全局的变量中。
25.跨域请求资源的方法有哪些？
跨域：
由于浏览器同源策略，凡是发送请求的URL的协议，域名，端口三者之间任意一个与当前页面地址不同即为跨域。
（1），porxy代理
定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。
实现方法：通过nginx的代理;
（2），CORS【跨源资源共享】
定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。
使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作
（3），jsonp
定义和用法：通过动态插入一个脚本标签浏览器对脚本的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。
特点：通过情况下，通过动态创建的脚本来读取他域的动态资源，获取的数据一般为JSON格式。
缺点：
如图1所示，这种方式无法发送交请求（这里）
2，另外要确定JSONP的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。
26.谈谈垃圾回收机制方式及内存管理？
JavaScript的垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以回收垃圾会器固按照定的时间间隔周期性的执行。
使用不再变量的就是也。生命周期结束的变量，只当然可能的英文局部变量，全局变量的生命周期直至浏览器卸载页面才会结束。局部变量只在函数的执行过程中存在，而在这个过程中会为局部变量在栈或堆上分配相应的空间，以存储它们的值，然后在函数中使用这些变量，直至函数结束，而闭包中由于内部函数的原因，外部函数并不能算是结束。
标记清除：
定义和用法：当变量进入环境时，将变量标记 “进入环境”，当变量离开环境时，标记为： “离开环境” 某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。
到目前为止，IE，火狐，歌剧，铬，Safari浏览器的JS实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。
引用计数：
定义和用法：引用计数是跟踪记录每个值被引用的次数。
基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。
内存管理
1，什么时候触发垃圾回收？
垃圾回收器周期性运行，如果分配的内存非常多，那么回收工作也会很艰巨，确定垃圾回收时间间隔就变成了一个值得思考的问题。
IE6的垃圾回收是根据内存分配量运行的，当环境中的变量，对象，字符串达到一定数量时触发垃圾回收。垃圾回收器一直处于工作状态，严重影响浏览器性能。
IE7中，垃圾回收器会根据内存分配量与程序占用内存的比例进行动态调整，开始回收工作。
2，合理的GC方案：（1），遍历所有可访问的对象; （2），回收已不可访问的对象。
3，GC缺陷：（1），停止响应其他操作;
4，GC优化策略：
（1），分代回收（Generation GC）;
区分临时与持久对象，通过多回收临时对象，少回收持久对象来减少GC遍历对象的时间，
（2），增量GC
“每次处理一点，下次再处理一点，如此类推”
这种方案，虽然耗时短，但中断较多，带来了上下文切换频繁的问题。
因为每种方案都其适用场景和缺点，因此在实际应用中，会根据实际情况选择方案。
27.开发过程中遇到的内存泄露情况，如何解决的？
1，定义和用法：
内存泄露英文的指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束 .C＃和Java的的等语言采用了自动垃圾回收方法管理内存，几乎不会发生内存泄露。我们知道，浏览器中也是采用自动垃圾回收方法管理内存，但由于浏览器垃圾回收方法有错误，会产生内存泄露。
2，内存泄露的几种情况：
（1），当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。
实例如下：
<div id="myDiv"> <input type="button" value="Click me" id="myBtn"> </div> <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function(){ document.getElementById("myDiv").innerHTML = "Processing..."; } </script>解决如下：
<div id="myDiv"> <input type="button" value="Click me" id="myBtn"> </div> <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function(){ btn.onclick = null; document.getElementById("myDiv").innerHTML = "Processing..."; } </script>（2），由于是函数内定义函数，并且内部函数 - 事件回调的引用外暴了，形成了闭包闭包可以维持函数内局部变量，使其得不到释放。
实例如下：
function bindEvent(){ var obj=document.createElement("XXX"); obj.onclick=function(){ //Even if it's a empty function } }解决方法如下：
①
function bindEvent(){ var obj=document.createElement("XXX"); obj.onclick=function(){ //Even if it's a empty function } obj=null; }②
function bindEvent(){ var obj=document.createElement("XXX"); obj.onclick=handleclick(); }, function handleclick(){ //Even if it's a empty function }
28.什么是web标准？
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为 （Behavior）。
对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。
29.XHTML与HTML有什么区别？
XHTML1.0和HTML4.01之间的主要差异是它遵守XML编码约定。
标签不能重叠,可以嵌套
标签与属性都要小写
标签都要有始有终,要么以
</p>形式结束,要么以<br />形式结束每个属性都要有属性值,并且属性值要在双引号中
别用
name用id
30.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
( 1 ) DOCTYPE声明是指HTML文档开头处的一行或两行代码，它描述使用哪个DTD
（文档类型定义），由此知道要使用HTML的哪个版本。DOCTYPE不存在或格式不正确会导致文档以混杂（兼容）模式呈现。DTD是一组机器可读的规则，它们定义XML或 HTML的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施
（2）严格（标准）模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在混杂（兼容）模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
31.HTML5为什么只需要写<!DOCTYOE HTML>,作用是什么？
HTML5 不基于 SGML，所以不需要引用 DTD，因此没有声明DTD;
作用：<!DOCTYPE>声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。（浏览器获知文档类型）;
32.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
(1)HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加:
①绘画 canvas;
②用于媒介回放的 video 和 audio 元素;
③本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除;
④语意化更好的内容元素，比如 article、footer、header、nav、section;
⑤表单控件，calendar、date、time、email、url、search;
⑥新的技术webworker, websocket, Geolocation;
(2)移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；
(3)支持HTML5新标签：
①IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。
②当然也可以直接使用成熟的框架,比如html5shiv;可以把HTML5的新元素转换成IE6认识的内容。只需要在你的head中调用这段代码就行：
<!--if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->(4)如何区分HTML5： DOCTYPE声明\新增的结构元素\功能元素
33.label的作用是什么？是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
(1)
<label for="Name">Number:</label>
<input type=“text“name="userName" id="Name"/>
(2)
<label>Date:<input type="text" name="B"/></label>
34.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE的content部分把 border 和 padding计算了进去;
35.Get和Post的区别？数据怎样获取？
(1)GET请求提交的数据在地址栏能看到，POST看不到,get安全性非常低，post安全性较高。
(2)GET请求把请求数据追加在请求URI后面，以?开头；POST请求把请求数据追加在请求主体中
(3)HTTP协议规定：请求消息起始行总长度不能超过1024字节；请求主体长度没有限制。GET请求提交的数据或是汉字一般也就几十个，不超过2kb。post传送的数据量较大，一般被默认为不受限制.
(4)语义不同:get是从服务器上获取数据，post是向服务器传送数据。