1、从输入网址到显示网页的过程分析
1、应用层DNS解析域名：客户端先检查本地是否有对应的IP地址，若找到则返回响应的IP地址。若没找到则请求上级DNS服务器，直至找到或到根节点。
2、浏览器与服务器建立TCP连接（默认端口80）(详细点可以说下三次握手的过程)
3、应用层客户端发送HTTP请求。
4、服务器响应请求：查找客户端请求的资源，并返回响应报文，响应报文中包括一个重要的信息——状态码（200-300，成功；304使用缓存）。
5、服务器返回相应文件给浏览器。
6、Tcp连接释放(可以说下四次挥手的过程)。
7、浏览器对HTML文件进行解析构建DOM树 ，构建渲染树 ，js根据DomAPI操作执行绑定事件等，页面显示完成。
2：MVC
MVC是三个单词的首字母缩写，它们是Model（模型）、View（视图）和Controller（控制）。
这个模式认为，程序不论简单或复杂，从结构上看，都可以分成三层。
1）最上面的一层，是直接面向最终用户的"视图层"（View）。它是提供给用户的操作界面，是程序的外壳。
2）最底下的一层，是核心的"数据层"（Model），也就是程序需要操作的数据或信息。
3）中间的一层，就是"控制层"（Controller），它负责根据用户从"视图层"输入的指令，选取"数据层"中的数据，然后对其进行相应的操作，产生最终结果。
这三层是紧密联系在一起的，但又是互相独立的，每一层内部的变化不影响其他层。每一层都对外提供接口（Interface），供上面一层调用。这样一来，软件就可以实现模块化，修改外观或者变更数据都不用修改其他层，大大方便了维护和升级。
3ajax原理和XmlHttpRequest对象
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
所以我们先从XMLHttpRequest讲起，来看看它的工作原理。
首先，我们先来看看XMLHttpRequest这个对象的属性。
它的属性有：
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text 伴随状态码的字符串信息
readyState 对象状态值
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
4水平垂直居中的方法
1 /*使用flex*/ 2 .parent{ 3 display: flex; 4 justify-content: center; 5 align-content: center; 6 } 7 8 /*使用transform*/ 9 .parent{ 10 position:relative; 11 } 12 .child{ 13 position:absolute; 14 top:50%; 15 left:50%; 16 transform: translate(-50%,-50%); 17 } 18 19 /*负边距法*/ 20 .parent{ 21 position:relative; 22 } 23 .child{ 24 position:absolute; 25 width:60px; 26 height:70px; 27 top:50%; 28 margin-top: -35px; 29 left:50%; 30 margin-left: -30px; 31 }
//文字在垂直方向居中：line-high=high
//快容器在水平方向的居中：margin:0 auto
5：优雅降级和渐进增强
优雅降级：web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。
由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
6：哪些常见操作会造成内存泄漏？
内存泄漏指任何对象在不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）。
7：性能优化的方法？
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存ajax请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
8：nodejs的认识
9:清除浮动
1、使用空标签清除浮动
空标签可以是div标签，也可以是P标签。也有很多人用<hr>，只是需要另外 为其清除边框，但理论上可以是任何标签。对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的 做法。
这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代 码：clear:both。此方法的弊端在于增加了无意义的结构元素。
.clearfix{ clear:both; }
2、使用overflow属性。
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6,也可以用100%。
不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；
1 .header{ 2 background-color: #abcdef; 3 overflow:auto; 4 zoom:1; 5 }
3、使用after伪对象清除浮动。
该方法只适用于非IE浏览器 。具体写法可参照以下示例。使用中需注意以下几点。一、display设置为block(因为能够把它拉开，撑开的必须是 块状元素)二、content属性是必须的，其值为空（一个空格也行）（“我并不是没有插入内容，而是 我插入的是空内容”）
1 .header::after{ 2 display: block; 3 content:""; 4 clear:both; 5 }
10：Web Socket
11:localstorage
1 //方法一 2 if(window.localStroage){ 3 alert("您的浏览器支持localStorage") 4 }else{ 5 alert("您的浏览器暂不支持localStorage") 6 } 7 //方法二 8 if(typeof window.localStroage == 'undefined'){ 9 alert('您的浏览器暂不支持localStorage') 10 }; 11 12 //setItem存储value 13 sessionStorage.setItem("key",'value'); 14 localStroage.setItem("site","js8.in"); 15 16 //getItem获取value 17 var value=sessionStorage.getItem("key"); 18 var site=localStroage.getItem("site"); 19 20 //removeItem删除key 21 sessionStorage.removeItem("key"); 22 localStroage.removeItem("site"); 23 24 //clear清除所有的key/value 25 sessionStorage.clear(); 26 localStroage.clear();
12:前端安全问题
CSRF
CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。
你这可以这么理解CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账......造成的问题包括：个人隐私泄露以及财产安全。
1. 检查报头中的Referer参数确保请求发自正确的网站（但XHR请求可调用setRequestHeader方法来修改Referer报头）；
2. 对于任何重要的请求都需要重新验证用户的身份；
3. 创建一个唯一的令牌（Token），将其存在服务端的session中及客户端的cookie中，对任何请求，都检查二者是否一致。
XSS
xss表示Cross Site Scripting(跨站脚本攻击)，它与SQL注入攻击类似，SQL注入攻击中以SQL语句作为用户输入，从而达到查询/修改/删除数据的目的，而在xss攻击中，通过插入恶意脚本，实现对用户游览器的控制。
1.如前面所述，浏览器自身可以识别简单的XSS攻击字符串，从而阻止简单的XSS攻击；
2。从根本上说，解决办法是消除网站的XSS漏洞，这就需要网站开发者运用转义安全字符等手段，始终把安全放在心上；
3.对于普通网民，需要注意尽量抵挡诱惑，别去点击非知名网站的链接。