04 面试题2-比较老
# 前端面试题及答案
这个面试题感觉有点老
基础知识
### 1 Doctype作用？ 严格模式与混杂模式如何区分？它们有何意义？ (1)、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 (2)、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 (3)、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 (4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
用于声明文档使用那种规范(HTML/XHTML)一般为 严格 过度 基于框架的html文档 加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug
### 2 行内元素有哪些？块级元素有哪些？ (1)CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值， 比如div默认display属性值为“block”，成为“块级”元素； span默认display属性值为“inline”，是“行内”元素。img 是行内块元素 inline-block (2)行内元素有：a b span input select 块级元素有：div ul ol li dl dt dd header p
### 3 link 和@import 的区别是？ (1)link属于XHTML标签，而@import是CSS提供的; (2)页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; (3)import只在IE5以上才能识别，而link是XHTML标签，无兼容问题; (4)link方式的样式的权重 高于@import的权重.
### 4 主流浏览器和内核分别是什么? IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto，现为Blink；Safiri 浏览器
### 5 HTML5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas: 用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation
### 6 对语义化如何理解？ 用正确的标签做正确的事情！HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
### 7 HTML5的离线储存有几种方式？
localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage 数据在浏览器关闭后自动删除。
### 8 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会。sessionStorage和localStorage的存储空间更大；sessionStorage和localStorage有更多丰富易用的接口；sessionStorage和localStorage各自独立的存储空间；
localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信 息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存， 不参与和服务器的通信。
sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB, 而且它仅在客户端(即浏览器)中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封 装来对Object和Array有更好的支持。
localStorage和sessionStorage使用时使用相同的API：
localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
localStorage.getItem("key");//获取名称为“key”的值
localStorage.removeItem("key");//删除名称为“key”的信息
localStorage.clear();//清空localStorage中所有信息
生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K 左右 。有个数限制(各浏览器不同)，一般不能超过20个。与服务器端通信：每次都会携带在HTTP 头中，如果使用cookie保存过多数据会带来性能问题。
三者的共同点：都是都是保存在浏览器端的，而且都是同源的！
localStorage存储有没有什么限制条件
1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较
常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到9 iframe有那些缺点？🐛
iframe会阻塞主页面的Onload事件； iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
### 10 CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
1.id选择器( # myid) 2.类选择器(.myclassname)
3.标签选择器(div, h1, p) 4.相邻选择器(h1 + p)
5.子选择器(ul < li) 6.后代选择器(li a)
7.通配符选择器( * ) 8.属性选择器(a[rel = "external"])
可继承的样式： font-size font-family color, UL LI DL DD DT; 不可继承的样式：border padding margin width height ; 优先级就近原则，同权重情况下样式定义最近者为准; 载入样式以最后载入的定位为准; 优先级为: !important > id > class > tag important 比 内联优先级高
### 11 CSS3新增伪类举例： p:first-of-type 选择属于其父元素的首个元素的每个元素。 p:last-of-type 选择属于其父元素的最后元素的每个元素。 p:only-of-type 选择属于其父元素唯一的元素的每个元素。 p:only-child 选择属于其父元素的唯一子元素的每个元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。 :enabled :disabled 控制表单控件的禁用态。 :checked单选框或复选框被选中。
### 12 如何居中div？如何居中一个浮动元素？ 给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
居中一个浮动元素 确定容器的宽高 宽500 高 300 的层 设置层的外边距 .div { Width:500px ; height:300px;//高度可以不设 Margin: -150px 0 0 -250px; position:relative;相对定位 background-color:pink;//方便看效果 left:50%; top:50%;}
列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？ 1.block 象块类型元素一样显示。 none 缺省值。象行内元素类型一样显示。 inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示，并添加样式列表标记。
2. absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed (老IE不支持) 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中 * (忽略 top, bottom, left, right z-index 声明)。
inherit 规定从父元素继承 position 属性的值。### 13 为什么要初始化CSS样式？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
* {
padding: 0;
margin: 0;
}
/* taobao */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, /5b8b/4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; }
### 14 css定义的权重 以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：/* 权重为1* /div{}/* 权重为10*/.class1{}/* 权重为100*/#id1{}/* 权重为100+1=101*/#id1 div{}/* 权重为10+1=11* /.class1 div{}/* 权重为10+10+1=21*/.class1 .class2 div{} 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现
### 15 CSS3有哪些新特性？
CSS3实现圆角(border-radius:8px)，阴影(box-shadow:10px)， 对文字加特效(text-shadow、)，线性渐变(gradient)，旋转(transform) transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜 增加了更多的CSS选择器 多背景 rgba
### 16 介绍一下CSS的盒子模型？ (1)有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
(2)盒模型： 内容(content)、内边界(padding)、外边界(margin)、 边框(border).
### 17 对WEB标准以及W3C的理解与认识？ 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
### 18 XHTML和HTML有什么区别？ HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同： XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。标签名必须用小写字母。 XHTML 文档必须拥有根元素。
### 26 写出几种IE6 BUG的解决方法 1.双边距BUG float引起的 使用display 2.3像素问题 使用float引起的 使用dislpay:inline -3px 3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active 4.Ie z-index问题 给父级添加position:relative 5.Png 透明 使用js代码 改 6.Min-height 最小高度 !Important 解决’ 7.select 在ie6下遮盖 使用iframe嵌套 8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px) 9.ie 6 不支持!important
### 27 img标签上title与alt属性的区别是什么? Alt 当图片不显示是 用文字代表。 Title 为该属性提供信息
### 29 解释css sprites，如何使用。 Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
### 30 浏览器标准模式和怪异模式之间的区别是什么? 盒子模型 渲染模式的不同 使用 window.top.document.compatMode 可显示为什么模式
### 31 你如何对网站的文件和资源进行优化?期待的解决方案包括： 文件合并 文件最小化/文件压缩 使用CDN托管 缓存的使用
### 33 清除浮动的几种方式，各自的优缺点 1.使用空标签清除浮动 clear:both(理论上能清楚任何标签，增加无意义的标签) 2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE) 3.是用afert伪元素清除浮动(用于非IE浏览器)
### 34 javascript的typeof返回哪些数据类型 Object number function boolean underfind
### 35 例举3种强制类型转换和2种隐式类型转换? 强制(parseInt,parseFloat,number) 隐式(== – ===)
### 36 split() join() 的区别 pop() push() unshift() shift()
知识点：数组和字符串常用API
split 是切割成数组的形式，join 是将数组转换成字符串
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
### 38 事件绑定和普通事件有什么区别
普通事件直接在HTML中获取事件，通常适应于简单事件单个事件(onclick)。
事件绑定可以绑定到界面中的特定元素，同一个元素可以绑定多个事件，可以绑定事件(add event lintener)，可以取消事件绑定(remove event listener)，这里的功能更强大。
### 39 IE和DOM事件流的区别 
1.执行顺序不一样、 2.参数不一样 3.事件加不加on 4.this指向问题
事件捕获和事件冒泡：事件捕获从上层向下层捕获，事件冒泡从下层向上层冒泡。阻止默认事件或者阻止事件冒泡需要选择合适的元素进行捕获。
### 40 IE和标准下有哪些兼容性的写法
var event = ev || window.event;
var ElementWidth = document.documentElement.clientWidth || document.body.clientWidth;
var target = ev.srcElement||ev.target;
### 41 ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面 formData 有大小限制 安全问题
Get 通常获取请求，POST 通常是设置请求
### 42 call和apply的区别 Object.call(this,obj1,obj2,obj3) Object.apply(this,arguments)
把一个对象的方法和属性设置到另一个对象上，实现对象的继承
### 43 ajax请求时，如何解释json数据 
使用eval(现在很少使用eval方法) parse 鉴于安全性考虑 使用parse更靠谱，或者使用jsonp
### 44 闭包是什么，有什么特性，对页面有什么影响 
闭包就是能够读取其他函数内部变量的函数。
### 45 如何阻止事件冒泡和默认事件 cancelBubble return false
### 46 添加 删除 替换 插入到某个接点的方法
obj.appendChidl
obj.innersetBefore
obj.replaceChild
obj.removeChild
### 47 解释jsonp的原理，以及为什么不是真正的ajax 
动态创建script标签，回调函数 Ajax是页面无刷新请求数据操作
### 48 javascript的本地对象，内置对象和宿主对象 
本地对象为array obj regexp等可以new实例化 内置对象为gload Math 等不可以实例化的 宿主为浏览器自带的document,window 等
### 49 document load 和document ready的区别 Document.onload 是在结构和样式加载完才执行js Document.ready原生种没有这个方法，jquery中有 $().ready(function)
### 50 ”= =”和“= = =”的不同
前者会自动转换类型 后者不会
### 51 javascript的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
### 52 编写一个数组去重的方法
function oSort(arr) {
var result ={};
var newArr=[];
for(var i=0;i<arr.length;i++) {
if(!result[arr[i]]) {
newArr.push(arr[i]);
result[arr[i]]=1;
}
}
return newArr
}
### 53 你认为最常遇到的兼容Bug有哪些?有哪些问题是你认为解决起来最麻烦的? IE6 PNG IE6 Fixed
### 54 CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么? 在CSS中关于定位的内容是：position:relative | absolute | static | fixed static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。 relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。 absolute 脱离文档流，通过 top,bottom,left,right 定位。选53D6其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。 fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
### 55 函数的几种定义方法？ function a(){}, var a = function(){}
### 57 类的定义方法(prototype)(继承) Var a = function(){} a.prototype = {} new a();
### 58 this 关键字的指向 obj.foo() == obj //方法调用模式,this指向obj foo() == window; //函数调用模式,this指向window new obj.foo() == obj //构造器调用模式, this指向新建立对象 foo.call(obj) == obj;//APPLY调用模式,this指向obj
### 59 异步ajax的优缺点都有什么？ 优点： 相对于同步ajax：不会造成UI卡死，用户体验好。 相对于刷新页面，省流量 缺点： 后退按钮无效； 多个请求同时触发时，由于回调时间不确定，会造成混乱，避免这种混乱需要复杂的判断机制。 搜索引擎不友好 数据安全
### 61 Javascript如何实现继承？ 通过原型和构造器
### 63 谈谈This对象的理解。 this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是有一个总原则，那就是this指的是调用函数的那个对象。this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象
### 64 事件是什么？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？ (1) 我们在网页中的某个操作(有的操作对应多个事件)。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。 (2) 事件处理机制：IE是事件冒泡、火狐是 事件捕获； (3) ev.stopPropagation();
### 65 如何判断一个对象是否属于某个类？ 使用instanceof if(a instanceof Person){ alert('yes'); }
### 66 Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？ hasOwnProperty
### 67 对JSON 的了解？ JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小{'age':'12', 'name':'back'}
### 68 简述一下src与href的区别 href 是指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接，用于超链接。 src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
### 69 简述同步和异步的区别
同步是阻塞模式，异步是非阻塞模式。 同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去； 异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
### 70 px和em的区别 px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
### 71 什么叫优雅降级和渐进增强？ 渐进增强 progressive enhancement： 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 区别： a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给 b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要 c. 降级(功能衰减)意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
### 72 浏览器的内核分别是什么? IE: trident内核 Firefox：gecko内核 Safari：webkit内核 Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核 Chrome：Blink(基于webkit，Google与Opera Software共同开发)
### 73 如何消除一个数组里面重复的元素？
// 方法一：
var arr1 =[1,2,2,2,3,3,3,4,5,6],arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
if(arr2.indexOf(arr1[i]) < 0){
arr2.push(arr1[i]);
}
}
document.write(arr2);
// 可以把重复的元素放在一个对象中；如果已经出现一次，那么就删除数组中的这个元素
### 74 在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
伪数组(类数组)：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
function log(){
var args = Array.prototype.slice.call(arguments);
//为了使用unshift数组方法，将argument转化为真正的数组
args.unshift('(app)');
console.log.apply(console, args);
};
caller是返回一个对函数的引用，该函数调用了当前函数； callee是返回正在被执行的function函数，也就是所指定的function对象的正文。
### 76 请描述一下cookies，sessionStorage和localStorage的区别 sessionStorage用于本地存储一个会话(session)中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。 web storage和cookie的区别 Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。 除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
### 77 手写数组快速排序 关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序 “快速排序”的思想很简单，整个排序过程只需要三步： (1)在数据集之中，选择一个元素作为”基准”(pivot)。 (2)所有小于”基准”的元素，都移到”基准”的左边；所有大于”基准”的元素，都移到”基准”的右边。 (3)对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。
### 78 统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。 js 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+' '); } ### 79 一次完整的HTTP事务是怎样的一个过程？
基本流程：
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
80、元素垂直居中
1.css3的transform：
.ele {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2.flex盒子布局:
.ele {
display: flex;
justify-content: center;
align-items: center;
}
3.display的table-cell:
.ele {
display: table-cell;
text-align: center;
vertical-align: middle;
}
CSS
81 flex 布局
flex布局也叫弹性布局，用来为盒装模型提供最大的灵活性，任何容器都可以指定为flex布局。(display： flex/inline-flex;)
1.flex-direction属性决定主轴的方向(即项目的排列方向)。
flex-direction: row | row-reverse | column | column-reverse;
2.flex-wrap属性表示项目若不在一条抽线上时的换行方式。
flex-wrap: nowrap | wrap | wrap-reverse;
3.flex-flow属性是flex-direction和flex-wrap的简写，默认值为row nowrap。
flex-flow: < flex-direction > || < flex-wrap >;
4.justify-content属性定义类项目在主轴方向上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
5.align-items属性定义了项目在交叉轴上的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch;
6.align-content属性定义了多根轴线的对齐方式，若只有一根轴线，则该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
82、css3中的制作动画的属性主要有哪些
1.变形(transform)
①rotate(< angle >)：2D旋转，负数为逆时针旋转； ②translate(x,y)：水平和垂直方向同时移动； ③scale(< number >, < number >)：水平和垂直方向同时2D缩放； ④skew(< angle >, < angle >)：水平和垂直方向上同时扭曲； ⑤matrix(< number >, < number >，< number >, < number >，< number >, < number >)： 以一个含有六个值的变换矩阵的形式指定一个2D变换。
2.转换(transition)
transition:property duration timing-function delay; transition-property: 指css属性的name，transition的效果； transition-duration：实现效果所需的时间； transition-timing-function：实现效果的转速曲线； transition-delay：定义效果开始的时间。
3.动画(animation)
animation： name keeping-time animate-function delay times iteration final； name：动画的名字； keeping-time：动画持续时间； animate-function：运动曲线； delay：动画延迟时间； times：动画循环执行的次数； iteration：动画循环的方式； final：动画到最后时的状态。
83、什么是弹性盒子？
弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
- 弹性盒子其实是由两部分组成：弹性容器(Flex container)和弹性子元素(Flex item)。 弹性容器：通过设置 display 属性的值为 flex 或 inline-flex 将其定义为弹性容器。 弹性子元素：弹性容器内包含了一个或多个弹性子元素。
- 弹性盒子的作用范围： 弹性盒子只定义了弹性子元素如何在弹性容器内布局。也就是说，弹性容器外及弹性子元素内都是 正常渲染的。
- ①css 列(CSS columns)在弹性盒子中不起作用。 ②float, clear and vertical-align 在flex项目中不起作用。
- 弹性盒子的属性： ①display: flex | inline-flex; ②flex-direction ③flex-wrap ④flex-flow ⑤justify-content ⑥align-items ⑦align-content ⑧flex-grow ⑨flex-basis ⑩flex
1、css清除浮动 2、position取值 3、z-index不生效的场景有哪些 4、不定宽高元素垂直水平居中 5、css实现一个占屏幕宽度50%的正方形 6、布局问题(三列布局、两列布局) 7、实现两列布局，第一列固定，第二列宽度自适应 8、css实现三角形 9、HSL色彩模型是什么，在CSS中如何使用 10、css居中正方形，flex居中，正方形用padding做 11、请使用CSS3实现一个长宽等于100px的div，1000ms后变成一个有阴影原型，并横向向右移动了50px的效果。加分：用画布实现以上效果
https://blog.csdn.net/liusheng95/article/details/51234089
- 两种盒模型
- 选择器优先级计算
- 有哪些伪类
- 纯css实现对话框带上小三角形
- 轮播图 js css
- 媒体查询
- 清楚浮动方式
- 完全置中
VUE
1、vue的有哪些常用的指令？自定义指令是什么？
指令是一种可以附加到DOM元素的微命令(tiny commands).。它们通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性。
v-if: 使用true或false来判断元素的现实或隐藏；
v-for：数据循环；
v-on：函数绑定；
v-bind：属性绑定；
v-model：数据的双向绑定。以上的是vue中一些内置的指令，但在实际项目开发中这些内置指令并不能完全满足开发需求，所以可以使用vue来创建全局指令，也就是自定义指令。 举一个简单的小栗子：加载DOM时直接让表单获取焦点。
// 和自定义过滤器一样,我们这里定义的是全局指令
Vue.directive('focus',{
inserted(el) {
el.focus()
}
})
<input type="text" v-focus placeholder="我有v-focus,所以,我获取了焦点">以上部分中：
①使用 Vue.directive() 来新建一个全局指令,(指令使用在HTML元素属性上的) ②Vue.directive(‘focus’) 第一个参数focus是指令名,指令名在声明的时候,不需要加 v- ③在使用指令的HTML元素上, 我们需要加上 v-. ④Vue.directive(‘focus’,{}) 第二个参数是一个对象,对象内部有个 inserted() 的函数,函数有 el 这个参数. ⑤el 这个参数表示了绑定这个指令的 DOM元素,在这里就是后面那个有 placeholder 的 input ⑥el 就等价于 document.getElementById(‘el.id’) ⑦可以利用 $(el) 无缝连接 jQuery
指令绑定到一个元素上时，指令内部的五个生命周期函数：
bind: 当指令绑定到 HTML 元素上时触发.只调用一次.
inserted: 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 div#app)，
但不保证，父元素已经插入了 DOM 文档.
updated: 所在组件的VNode更新时调用.
componentUpdate: 指令所在的组件的VNode以及其子VNode 全部更新后调用.
unbind: 指令和元素解绑的时候调用,只调用一次2、数据双向绑定的原理
vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获 取属性值(get)和设置属性值(set)的操作来实现的。
代码演示：
defineProperty的用法var obj = { };//第一个参数：定义属性的对象。
var name;//第二个参数：要定义或修改的属性的名称。
//第三个参数：将被定义或修改的属性描述符。
Object.defineProperty(obj, "data", {
//获取值
get: function () {
return name;
},
//设置值set: function (val) {
name = val;console.log(val)
}
})
//赋值调用
setobj.data = 'aaa';
//取值调用
getconsole.log(obj.data);
代码演示：
defineProperty的双向绑定var obj={};
Object.defineProperty(obj, 'val',{
set:function (newVal) {
document.getElementById("a").value=newVal==undefined?'':newVal;
document.getElementById("b").innerHTML=newVal==undefined?'':newVal;
}
});
document.getElementById("a").addEventListener("keyup",function (e) {
obj.val = e.target.value;
})
3、路由跳转时如何传递和接收参数
第一种params属性：
传递参数：params： {key: value} 接收参数：this.$route.params
第二种query属性：
传递参数：query：{key:value}
接收参数：this.$route.query四、$route 和 $router的区别
1、router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个 router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象 和属性。
举个栗子：history对象
$router.push({path:'home'}); //本质是向history栈中添加一个路由，在我们看来是切换路由,
但本质是在添加一个history记录
$router.replace({path:'home'}); //替换路由，没有历史记录2、route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以 获取对应的name,path,params,query等。
61、Vue.js组件Render函数的作用是什么？简述使用场景
62、Vue Virtual DOM的作用是什么？浅析其原理
63、Vue.js的keep-alive的作用是什么？简述使用场景
64、Vue mixins作用
65、vur-router实现原理
网络基础
11、http与https区别
12、http1.0、http1.1与http2.0
13、webpack基本配置
14、OSI七层模型及对应协议
15、其中一间公司有问到MySQL、linux相关知识(其他公司很少见)
16、SQL注入的预防
17、对CSRF与XSS的认识与预防
18、浏览器渲染引擎相关知识
19、是否使用过express，谈谈express中间件机制及实现原理
20、跨域相关知识
21、git rebase作用及原理
22、回流与重绘
23、xss与csrf攻击
24、函数节流
25、前端性能优化
26、vue生命周期
27、flex布局，flex取值
28、提交的两种实现(input + type=”submit”, button+点击事件)
29、get和post对比
30、不同浏览器的事件机制
31、JS跨域及解决方法
32、浏览器不同tab之间通信
33、浏览器缓存机制
34、异步机制
35、amd、cmd规范
36、vue-router的原理
37、url构成
38、cookie有哪些安全的设置
39、cookie和session的区别
40、cookie、sessionStorage、localStorage
41、同源策略的认识
42、css盒模型
43、跨域请求方式有哪些，怎么实现
44、如何获取元素相对浏览器的位置
45、拖拽事件
46、从事件的角度，说明点击一个a标签，控制台输出其href值的具体过程
47、什么是事件代理
48、事件冒泡、捕获
49、进程、线程，进程间通信
50、同源标签之间如何通信
51、window.onload和document.ready是否是同时执行，为什么
52、cors请求和普通的http请求有什么区别
53、vue双向数据绑定原理
54、http与https区别
55、严格模式混杂模式
56、argument
57、进程间通信
58、tcp协议三次握手四次挥手过程
59、tcp和udp区别
60、JavaScript执行机制，事件循环、微任务、宏任务
1、http工作原理
HTTP协议定义Web客户端如何从Web服务器请求Web页面，以及服务器如何把Web页面传送给客户端。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求报文，请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。下图表明了这种请求/响应模型。
以下是HTTP请求/响应的步骤： (1)客户端连接到Web服务器 一个HTTP客户端，通常是浏览器，与Web服务器的HTTP端口(默认为80)建立一个TCP套接字连接。例如，http://www.oakcms.cn。 (2)发送HTTP请求 通过TCP套接字，客户端向Web服务器发送一个文本的请求报文，一个请求报文由请求行、请求头部、空行和请求数据4部分组成。 (3)服务器接受请求并返回HTTP响应 Web服务器解析请求，定位请求资源。服务器将资源复本写到TCP套接字，由客户端读取。一个响应由状态行、响应头部、空行和响应数据4部分组成。 (4)释放连接TCP连接 Web服务器主动关闭TCP套接字，释放TCP连接；客户端被动关闭TCP套接字，释放TCP连接。 (5)客户端浏览器解析HTML内容 客户端浏览器首先解析状态行，查看表明请求是否成功的状态代码。然后解析每一个响应头，响应头告知以下为若干字节的HTML文档和文档的字符集。客户端浏览器读取响应数据HTML，根据HTML的语法对其进行格式化，并在浏览器窗口中显示。
2、http缓存机制
https://blog.csdn.net/WuLex/article/details/77767855 https://blog.csdn.net/jutal_ljt/article/details/80021545#commentBox
3、首页性能优化
https://blog.csdn.net/weixin_41697143/article/details/81049804 移动端
https://www.cnblogs.com/MarcoHan/p/5295398.html
https://www.cnblogs.com/doseoer/p/5879749.html4、vue双向数据绑定原理
5、vue依赖收集的实现
6、Promise实现原理
7、CDN缓存与客户端缓存
https://blog.csdn.net/weixin_41697143/article/details/827586308、get请求与post请求区别，优缺点
GET请求
GET /books/?sex=man&name=Professional HTTP/1.1Host: www.wrox.comUser-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)Gecko/20050225 Firefox/1.0.1Connection: Keep-Alive
注意最后一行是空行
POST请求
POST / HTTP/1.1Host: www.wrox.comUser-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)Gecko/20050225 Firefox/1.0.1Content-Type: application/x-www-form-urlencodedContent-Length: 40Connection: Keep-Alivename=Professional%20Ajax&publisher=Wiley
1、GET提交，请求的数据会附在URL之后(就是把数据放置在HTTP协议头中)，以?分割URL和传输数据，多个参数用&连接；例 如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0 %E5%A5%BD。如果数据是英文字母/数字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如： %E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII。
POST提交：把提交的数据放置在是HTTP包的包体中。上文示例中红色字体标明的就是实际的传输数据
因此，GET提交的数据会在地址栏中显示出来，而POST提交，地址栏不会改变
2、传输数据的大小：首先声明：HTTP协议没有对传输的数据大小进行限制，HTTP协议规范也没有对URL长度进行限制。
而在实际开发中存在的限制主要有：
GET:特定浏览器和服务器对URL长度有限制，例如 IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系 统的支持。
因此对于GET提交时，传输数据就会受到URL长度的 限制。
POST:由于不是通过URL传值，理论上数据不受 限。但实际各个WEB服务器会规定对post提交数据大小进行限制，Apache、IIS6都有各自的配置。
3、安全性
POST的安全性要比GET的安全性高。比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为(1)登录页面有可能被浏览器缓存；(2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了，除此之外，使用GET提交数据还可能会造成Cross-site request forgery攻击
4、Http get,post,soap协议都是在http上运行的
(1)get：请求参数是作为一个key/value对的序列(查询字符串)附加到URL上的
查询字符串的长度受到web浏览器和web服务器的限制(如IE最多支持2048个字符)，不适合传输大型数据集同时，它很不安全
(2)post：请求参数是在http标题的一个不同部分(名为entity body)传输的，这一部分用来传输表单信息，因此必须将Content-type设置为:application/x-www-form- urlencoded。post设计用来支持web窗体上的用户字段，其参数也是作为key/value对传输。
但是：它不支持复杂数据类型，因为post没有定义传输数据结构的语义和规则。
(3)soap：是http post的一个专用版本，遵循一种特殊的xml消息格式
Content-type设置为: text/xml 任何数据都可以xml化。
Http协议定义了很多与服务器交互的方法，最基本的有4种，分别是GET,POST,PUT,DELETE. 一个URL地址用于描述一个网络上的资源，而HTTP中的GET, POST, PUT, DELETE就对应着对这个资源的查，改，增，删4个操作。 我们最常见的就是GET和POST了。GET一般用于获取/查询资源信息，而POST一般用于更新资源信息.
我们看看GET和POST的区别
GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如EditPosts.aspx?name=test1&id=123456. POST方法是把提交的数据放在HTTP包的Body中.
GET提交的数据大小有限制(因为浏览器对URL的长度有限制)，而POST方法提交的数据没有限制.
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值。
GET方式提交数据，会带来安全问题，比如一个登录页面，通过GET方式提交数据时，用户名和密码将出现在URL上，如果页面可以被缓存或者其他人可以访问这台机器，就可以从历史记录获得该用户的账号和密码.9、进程与线程
操作系统面试题
1、进程和线程的区别？
解析：(1)进程是资源的分配和调度的一个独立单元，而线程是CPU调度的基本单元
(2)同一个进程中可以包括多个线程，并且线程共享整个进程的资源(寄存器、堆栈、上下文)，一个进行至少包括一个线程。
(3)进程的创建调用fork或者vfork，而线程的创建调用pthread_create，进程结束后它拥有的所有线程都将销毁，而线程的结束不会影响同个进程中的其他线程的结束
(4)线程是轻两级的进程，它的创建和销毁所需要的时间比进程小很多，所有操作系统中的执行功能都是创建线程去完成的
(5)线程中执行时一般都要进行同步和互斥，因为他们共享同一进程的所有资源
(6)线程有自己的私有属性TCB，线程id，寄存器、硬件上下文，而进程也有自己的私有属性进程控制块PCB，这些私有属性是不被共享的，用来标示一个进程或一个线程的标志
2、死锁？死锁产生的原因？死锁的必要条件？怎么处理死锁？
解析：(--)相互等待资源而产生的一种僵持状态，如果没有外力的干预将一直持续这个状态
(--)系统资源不足、相互竞争资源、请求资源顺序不当
(2)互斥、不可抢占、循环等待、请求与保持
(3)因为互斥是不可改变的，所以只能破坏其他三个条件中的一个来解除死锁，方法：剥夺资源、杀死其中一个线程
3、Windows内存管理方式：段存储、页存储、段页存储
解析：
4、进程的几种状态？
解析：(1)run(运行状态)：正在运行的进程或在等待队列中对待的进程，等待的进程只要以得到cpu就可以运行
(2)Sleep(可中断休眠状态)：相当于阻塞或在等待的状态
(3)D(不可中断休眠状态)：在磁盘上的进程
(4)T(停止状态)：这中状态无法直观的看见，因为是进程停止后就释放了资源，所以不会留在linux中
(5)Z(僵尸状态)：子进程先与父进程结束，但父进程没有调用wait或waitpid来回收子进程的资源，所以子进程就成了僵尸进程，如果父进程结束后任然没有回收子进程的资源，那么1号进程将回收
5、IPC通信方式？
解析：(1)管道(匿名管道(pipe亲缘关系的进程通信)、命名管道(mkfifo/mknod))
(2)消息队列：是基于消息的、用无亲缘关系的进程间通信，主要函数：msgget、msgsend、msgrecv、msgctl
(3)信号量：相当于一把互斥锁，通过p、v操作，主要函数：semget、semop、semctl
(4)共享内存：是进程间通信速度最快的，所以用经常是集合信号量或互斥锁来实现同步，shmget、shmat、shmdt、shmctl
6、什么是虚拟内存？
解析：是将进程部分装入内存中，从而能实现一个很大的程序能在一个比它小的内存中运行，它的主要实现是靠程序的换进换出来实现的，因为内存中0~3G是用户使用，3~4G才是内存使用，通过映射来实现来进行逻辑地址到物理地址的映射
7、虚拟地址、逻辑地址、线性地址、物理地址的区别？
解析： 分段机制把一个逻辑地址转换为线性地址；接着，分页机制把一个线性地址转换为物理地址。
(1)虚拟地址：虚拟内存映射出来的地址
(2)逻辑地址：程序的段加偏移量形成的，C/C++程序中取地址求出来的地址就是逻辑地址
(3)线性地址：是逻辑地址到物理地址的中间层，只有启动分页机制的时候才有线性地址，如果没有分页机制，那么线性地址就是物理地址
(4)物理地址：是内存中实实在在存在的硬件地址，
逻辑地址(启动分段)--》线性地址(启动分页)--》物理地址10、UDP与TCP，适用场景
1、TCP与UDP区别总结：1、TCP面向连接(如打电话要先拨号建立连接);UDP是无连接的，即发送数据之前不需要建立连接
2、TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付
Tcp通过校验和，重传控制，序号标识，滑动窗口、确认应答实现可靠传输。如丢包时的重发控制，还可以对次序乱掉的分包进行顺序控制。
3、UDP具有较好的实时性，工作效率比TCP高，适用于对高速传输和实时性有较高的通信或广播通信。
4.每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信
5、TCP对系统资源要求较多，UDP对系统资源要求较少。
2、为什么UDP有时比TCP更有优势?
UDP以其简单、传输快的优势，在越来越多场景下取代了TCP,如实时游戏。
(1)网速的提升给UDP的稳定性提供可靠网络保障，丢包率很低，如果使用应用层重传，能够确保传输的可靠性。
(2)TCP为了实现网络通信的可靠性，使用了复杂的拥塞控制算法，建立了繁琐的握手过程，由于TCP内置的系统协议栈中，极难对其进行改进。
采用TCP，一旦发生丢包，TCP会将后续的包缓存起来，等前面的包重传并接收到后再继续发送，延时会越来越大，基于UDP对实时性要求较为严格的情况下，采用自定义重传机制，能够把丢包产生的延迟降到最低，尽量减少网络问题对游戏性造成影响。
3、UDP和TCP编程步骤也有些不同，如下：
TCP: TCP编程的服务器端一般步骤是： 1、创建一个socket，用函数socket()； SOCKET SocketListen =socket(AF_INET,SOCK_STREAM,
IPPROTO_TCP); 2、设置socket属性，用函数setsockopt(); * 可选 3、绑定IP地址、端口等信息到socket上，用函数bind();
SOCKET_ERROR = bind(SocketListen,(const sockaddr*)&addr,sizeof(addr)) 4、开启监听，用函数listen()； SOCKET_ERROR
== listen(SocketListen,2) 5、接收客户端上来的连接，用函数accept()； SOCKET SocketWaiter
= accept(SocketListen,_Out_ struct
sockaddr *addr
_Inout_ int
*addrlen); 6、收发数据，用函数send()和recv()，或者read()和write(); 7、关闭网络连接； closesocket(SocketListen);closesocket(SocketWaiter); 8、关闭监听； SOCK_STREAM这种的特点是面向连接的，即每次收发数据之前必须通过connect建立连接，而SOCK_DGRAM这种是User
Datagram Protocol协议的网络通讯，它是无连接的，不可靠的。TCP编程的客户端一般步骤是： 1、创建一个socket，用函数socket()； 2、设置socket属性，用函数setsockopt();* 可选 3、绑定IP地址、端口等信息到socket上，用函数bind();* 可选 4、设置要连接的对方的IP地址和端口等属性； 5、连接服务器，用函数connect()； 6、收发数据，用函数send()和recv()，或者read()和write(); 7、关闭网络连接；
int send(
_In_ SOCKET s, //向哪个socket发送，accept返回的socket。
_In_ const char *buf,
_In_ int len,
_In_ int flags
); 由于
send(SocketClient,(const char *)&fh,sizeof(fh),0);
recv(SocketClient,szbuf,sizeof(szbuf),0);UDP:与之对应的UDP编程步骤要简单许多，分别如下： UDP编程的服务器端一般步骤是： 1、创建一个socket，用函数socket()； 2、设置socket属性，用函数setsockopt();* 可选 3、绑定IP地址、端口等信息到socket上，用函数bind(); 4、循环接收数据，用函数recvfrom(); 5、关闭网络连接； UDP编程的客户端一般步骤是： 1、创建一个socket，用函数socket()； 2、设置socket属性，用函数setsockopt();* 可选 3、绑定IP地址、端口等信息到socket上，用函数bind();* 可选 4、设置对方的IP地址和端口等属性; 5、发送数据，用函数sendto(); 6、关闭网络连接；
int recvfrom(
_In_ SOCKET s, //绑定的socket
_Out_ char *buf,
_In_ int len,
_In_ int flags,
_Out_ struct sockaddr *from, //用来接收对方的
_Inout_opt_ int *fromlen
);
int nres=recvfrom(pThis->m_socketListen,szBuf,sizeof(szBuf),0,(sockaddr*)&addrClient,&nSize);//0处标志位sendto(m_socketListen,szBuffer,nSize,0,(const sockaddr*)&addr,sizeof(sockaddr_in))TCP和UDP是OSI模型中的运输层中的协议。TCP提供可靠的通信传输，而UDP则常被用于让广播和细节控制交给应用的通信传输。
4、将socket设置为广播属性bool optval=true;setsockopt(m_socketListen,SOL_SOCKET,SO_BROADCAST,(const char *)&optval,sizeof(bool));
5、将Socket设置为非阻塞。//bool benable=true;//ioctlsocket(m_socketListen,FIONBIO,(u_long*)&benable);
6、Tcp头，20字节
7、UDP首部,8个字节
JS
1、递归
递归是一种重要的编程技术，用于让一个函数从其内部调用其自身(简单说就是自己调用自己)。 构成递归需具备的条件：
- 子问题须与原始问题为同样的事，且更为简单；
- 不能无限制地调用本身，须有个出口，化简为非递归状况处理。
2、冒泡排序和快速排序
1.冒泡排序的思想：
通过相邻两个元素之间的比较和交换，使较大的元素逐渐从前面移向后面(升 序)，就像水底下的气泡一样逐渐向上冒泡，所以被称为“冒泡”排序。冒泡排序的最坏时间复杂度 为O(n2)，平均时间复杂度为O(n2)。
var arr=[2,5,4,1,7,3,8,6,9,0];
function arrayMax(arr) {
var temp = null;
for (var i = 0;i<arr.length-1;i++){
for (var j = i+1;j<arr.length;j++){
//如果前面的数据比后面的大就交换
//两个数交换一定要声明一个变量,用来存储其中要被赋值的那个
if (arr[i]>arr[j]){
temp = arr[j];
arr[j] = arr[i];
arr[i] = temp;
}
}
}
return arr;
}
console.log(arrayMax(arr));
2.快速排序的思想：
元素的比较和交换是从两端向中间进行的，较大的元素一轮就能够交换到后面的位置，而较小的元素 一轮就能交换到前面的位置，元素每次移动的距离较远，所以比较次数和移动次数较少，速度较快， 故称为“快速排序”。
var times = 0;
function queryArrayMax(arr) {
//如果数组长度小于等于1无需判断直接返回即可
if (arr.length<=1){
return arr;
}
var arrIndex = Math.floor(arr.length/2);//获取中间值 这个是索引
var arrCenterVal = arr.splice(arrIndex,1);// 利用索引取出中间值 改变原始数组
var left= [],//存储小的
right = [];//存储大的
// 遍历数组 ,进行判断分配
for (var i = 0;i<arr.length;i++){
if (arr[i]<arrCenterVal){
left.push(arr[i])//比中间值小的放在左边数组
}else{
right.push(arr[i])//比中间值大的放在右边数组
}
console.log("第"+(++times)+"次排序后："+arr);
}
//递归执行以上操作,对左右两个数组进行操作，直到数组长度为<=1；
return queryArrayMax(left).concat(arrCenterVal,queryArrayMax(right))
}
console.log(queryArrayMax(arr));
3、同源策略是什么？
同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能会受到影响。所谓的同源就是指域名、协议和端口这三者一样。
解决办法：
①jsonp ②< script >标签中的src属性 ③CROS(跨域资源共享)
4、说一下同步和异步
同步：同步方法表明调用一旦开始，调用者必须等待方法执行完成，才能继续执行后续方法。
JavaScript的同步：如果在函数返回结果的时候，调用者能够拿到预期的结果(就是函数计算 的结果)，那么这个函数就是同步的.
异步：方法一旦开始，立即返回，调用者无需等待其中方法执行完成，就可以继续执行后续方法。
JavaScript的异步：如果在函数返回的时候，调用者还不能购得到预期结果，而是将来通过一定的 手段得到(例如回调函数)，这就是异步(例如ajax操作)。
如果函数是同步的，即使调用函数执行任务比较耗时，也会一致等待直到得到执行结果。
如果函数是异步的，发出调用之后，马上返回，但是不会马上返回预期结果。调用者不必主动等待，当被调用者得到结果之后会通过回调函数主动通知调用者。
5、ES6中的箭头函数和普通函数有什么区别？
箭头函数：
let fun = () => { console.log('lalalala'); }
普通函数：
function fun() { console.log('lalla'); }
① 箭头函数是匿名函数，不能作为构造函数，不能使用new ② 箭头函数不绑定arguments，取而代之用rest参数(…)解决 ③ 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值(重点) 代码演示：
箭头函数：
var obj = {
a: 10,
b: () => {
console.log(this.a); // undefined
console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close:
ƒ, frames: Window, …}
},
c: function() {
console.log(this.a); // 10
console.log(this); // {a: 10, b: ƒ, c: ƒ}
}
}
obj.b();
obj.c();
普通函数：
var obj = {
a: 10,
b: function(){
console.log(this.a); //10
},
c: function() {
return ()=>{
console.log(this.a); //10
}
}
}
obj.b();
obj.c()();
④ 箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响 ⑤ 箭头函数没有原型属性(prototype) ⑥ 箭头函数不能当做Generator函数,不能使用yield关键字
6、promise什么？怎么使用？
Promise是异步编程的一种解决方案，在ES6中Promise被列为了正式规范，统一了用法，原生提供了Promise对象。使用详情请查看文章：https://www.cnblogs.com/sweeeper/p/8442613.html
7、浏览器的内核
①IE浏览器内核：Trident内核，也是俗称的IE内核； ②Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核； ③Firefox浏览器内核：Gecko内核，俗称Firefox内核； ④Safari浏览器内核：Webkit内核； ⑤Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核； ⑥360浏览器、猎豹浏览器内核：IE+Chrome双内核； ⑦搜狗、遨游、QQ浏览器内核：Trident(兼容模式)+Webkit(高速模式)； ⑧百度浏览器、世界之窗内核：IE内核； ⑨2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；
什么是闭包？
闭包是指有权访问另一个函数作用域重点变量的函数。创建闭包的常见方式，就是在一个函数内部创建另外一 个函数。因为内部匿名函数的作用域链(一个栈结构)指向2：全局变量对象，1：包含函数变量对象，0:自己 的变量对象。所以虽然随着包含函数的执行结束，包含函数的作用域链销毁了，但是因为任然有函数的作用域 链指向包含函数的变量对象，所以不会触发回收机制。
JS如何实现类，继承？
通过prototype,Javascript 解析引擎在读取一个Object的属性的值时，会沿着prototype向上寻找， 如果最终没有找到，则该属性值为Undefined； 如果最终找到该属性的值，则返回结果。与这个过程不同的是， 当javascript解析引擎执行“给一个Object的某个属性赋值”的时候，如果当前Object存在该属性，则改写该属性的值， 如果当前的Object本身并不存在该属性，则赋值该属性的值。
什么是冒泡和捕获？
事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，Netscape的事件流是事件捕获流。 事件冒泡流：嵌套最深的结点最先接收事件。 事件捕获流：document对象最先接收事件。
JS有哪些数据类型？
boolean,null，Number,string,Undefined这5个基本数据类型，另外有一个复杂数据类型object(本质上由一组无序的名值对组成)
Null和Undefined的区别？
声明但未加初始化的则为Undefined,而null则表示一个空对象指针。但是两者用==返回为true
isNaN()的作用？
isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果，以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误，比如用 0 作除数的情况。
JS对象中的Array对象和String对象的各种方法
this关键字在不同环境下的指向
5种情况下的this指向
JS的作用域
作用域和命名空间 setTimeout和setInterval (setTimeout和setInterval的区别你真的了解吗?)[http://www.jb51.net/article/26679.htm]
js有哪些基本对象
JavaScript对象：Array，Boolean，Date，Math，Number，String，RegExp，Functions，Events browser对象：Window，Navigator，Screen，History，Location html对象：Document，Element，Attribute，Event
call、apply、callee 孰知应用
js apply详解 javascript中callee与caller的用法和应用场景 跨域实现方法 详解js跨域问题 事件监听、回调、发布订阅模式、promise实现 javascript实现异步的四种方法 设计模式之观察者模式 AMD CMD 模块化JS javascript模块化编程 内存泄露的原因和场景。 深入浅出JavaScript内存泄露 javascript内存泄露的几种情况 如何判断js类型 JavaScript中判断对象类型的种种方法 按值传递和按引用传递 JavaScript中值的访问与参数传递问题 重排和重绘 浏览器渲染页面的过程，以及重绘和重排 严格模式 是时候使用JavaScript严谨模式(Strict Mode)提升团队开发效率 简述document.write和 innerHTML的区别。 document.write只能重绘整个页面, innerHTML可以重绘页面的一部分。 extend extend 方法在js框架中的设计 相关知识 IE与firefox，chrome等浏览器的差别
事件： ie：attachEvent, window.event,window.event.srcElement chrome：addEventListener, event;event.target 其他：
- firefox不支持innerText，但是支持一个相似的textContent
- ie不支持getComputedStyle()这个方法，他支持currentStyle这个属性
- 盒模型不同
- 浏览器默认样式不同，利用*{margin：0，padding:0},统一
性能优化的方法
前端工程与性能优化 前端优化的手段都有哪些？ 毫秒必争，前端网页性能最佳实践
服务器
cdn，前后端不同域名(减少cookie)，gzip压缩文件，合并文件，雪碧图，304缓存，压缩代码，移除重复脚本，图像优化； 通过Keep-alive机制减少TCP连接。 避免跳转 跳转是使用301和302代码实现的
代码层面：
将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出； 减少重排和重绘，利用DocumentFragments，同时更改样式时尽量通过更改className可减少reflow, 减少dom数量； 事件代理， 减少dom的访问次数，如果需要多次访问某个DOM节点，请使用局部变量存储对它的引用。 重构HTML，把重要内容的优先级提高(圣杯布局)。 利用预加载优化资源。 利用LocalStorage合理缓存资源。 利用媒体查询请求不同大小的图片
http状态码
1XX表示请求接受成功，待进一步处理 2XX表示访问成功 3XX 访问重定向 4XX 客户端请求错误，包括语法、文件路径 5XX 服务器出现错误
200 OK //客户端请求成功 400 Bad Request //客户端请求有语法错误，不能被服务器所理解 401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报 //头域一起使用 403 Forbidden //服务器收到请求，但是拒绝提供服务 404 Not Found //请求资源不存在，eg：输入了错误的URL 500 Internal Server Error //服务器发生不可预期的错误 503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后,可能恢复正常
数据结构与算法
21、原生ajax、jsonp实现
22、判断一个单词是否是回文
23、统计一个字符串出现最多的字母
24、不借助临时变量，进行两个整数的交换
25、找出正数数组中的最大差值
26、随机生成指定长度的字符串
27、实现类似getElementByClassName的功能
28、js实现二叉查找树
29、原生js实现路由
30、原生js实现对象属性监听器
31、js继承的方式，不同继承方式的实现
32、基于Promise，原生js实现ajax
33、哈希表、平衡二叉树等数据结构
34、排序算法(冒泡排序、插入排序、快速排序等)
35、重载与多态，JS如何实现
36、JS阻止事件冒泡及默认事件，兼容IE
37、实现传入一个不定长度字符串，查找出重复次数前n名的字符并分别统计其次数。
38、a、b两个字符串，不借助其他变量，实现a与b交换
39、js实现测试接口请求耗时
40、实现一个简单的JQuery插件
41、写一个方法，实现随机生成长度为n的字符串，字符串取值[a-z][0-9]
42、给Array增加原生方法，hash方式实现数组去重
43、事件委托怎么写
44、手写一个闭包，根据此闭包问问题
45、事件冒泡、捕获
46、自己实现一个parseInt函数
47、写一个url解析函数，解析出查询参数
48、js实现对象深拷贝
49、原生ajax、jsonp实现
50、解析一个url，包括hash值
51、淘宝等网站倒计时效果如何实现
52、是否了解红黑树，谈谈你的理解
53、一个大文件里的整数需要排序，文件大小有10G，但机器内存只有2G，如何实现？(可使用熟悉的语言)
54、使用Node.js的fs模块，实现文件夹的深度优先遍历和广度优先遍历。输入文件夹的路径，输出所有文件的列表。
55、实现一个复制函数，可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。
56、通过代码形式描述 async/await使用方法
57、通过正则表达式的方式，如何获取在url上参数？请通过代码形式描述
1、自己实现一个parseInt函数
function _parseInt(str, radix) {
let str_type = typeof str;
let res = 0;
if (str_type !== 'string' && str_type !== 'number') {
// 如果类型不是 string 或 number 类型返回NaN
return NaN
}
// 字符串处理
str = String(str).trim().split('.')[0]
let length = str.length;
if (!length) {
// 如果为空则返回 NaN
return NaN
}
if (!radix) {
// 如果 radix 为0 null undefined
// 则转化为 10
radix = 10;
}
if (typeof radix !== 'number' || radix < 2 || radix > 36) {
return NaN
}
for (let i = 0; i < length; i++) {
let arr = str.split('').reverse().join('');
res += Math.floor(arr[i]) * Math.pow(radix, i)
}
return res;
}
2、解析一个url，包括hash值
一：URL举例
就以下面这个URL为例，介绍下普通URL的各部分组成
http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name
从上面的URL可以看出，一个完整的URL包括以下几部分：
1.协议部分：该URL的协议部分为“http：”，这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符
2.域名部分：该URL的域名部分为“www.aspxfans.com”。一个URL中，也可以使用IP地址作为域名使用
3.端口部分：跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口
4.虚拟目录部分：从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”
5.文件名部分：从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名
6.锚部分：从“#”开始到最后，都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分
7.参数部分：从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。本例中的参数部分为“boardID=5&ID=24618&page=1”。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。
二：URL通用格式
URL的语法：大多数URL语法都建立在9个部分构成的通用格式上，而其中最重要的是方案(scheme)、主机(host)和路径(path)
通用格式：方案://用户名:密码@主机名:端口/服务器上资源的路径;参数?查询#片段
1、方案：指访问服务器以获取资源时要使用哪种协议。比如，http、https和FTP等
2、主机和端口：指资源宿主服务器的主机名或IP地址。端口是指资源宿主服务器正在监听的端口，很多HTTP的默认端口号是80。比如，130.32.12.34:800，这里的IP地址是主机名，端口是800
3、用户名和密码：很多服务器都要求输入用户名和密码才会允许用户访问数据，如FTP服务器。
例子：joe是用户名、joepasswd是密码
ftp://joe:joepasswd@ftp.prep.edu/pub/name
4、路径：路径说明了资源位于服务器的什么地方。
例子：/cans/index.html就是URL中的路径
http://www.hda.com/cans/index.html
5、参数：为了向应用程序提供它们所需要的输入参数，以便正确地与服务器进行交互，URL中有个参数组件。由字符“;”将其与URL的其余部分分隔开来。
例子：;type=7;nam=true就是两个参数。
ftp://prep.mit.edu/pub;type=7;nam=true
6、查询：很多资源，比如数据库服务、搜索引擎，都可以通过提问题或进行查询来缩小请求资源的范围。由字符“?”将其与URL的其余部分分隔开来。
例子：查询组件有两个名/值对：name=csh和age=24
http://www.cheng.cn/si.html?name=csh&age=24
7、片段：#代表网页中的一个位置，其右面的字符就是该位置的标识符(一般情况下，锚链接会用到)
例子：下面的URL中，代表网页si.index的print位置，浏览器读取这个URL后，会自动将print位置滚动至可视区域。
http://www.cheng.cn/si.html#print
URL的分类：URL可以分为绝对URL和相对URL
绝对URL：绝对URL中包含了访问资源所需的全部信息。
案例：<a href=’http://cheng.com/si.html></a>
相对URL：相对URL包含的只是访问资源所需的部分信息。而要想得到访问资源的全部信息的话，就要和另一个被称为基础(base)的URL结合进行解析
案例：<script src="lib/sea.js"></script>
相对URL中的基础URL：转换相对URL的第一步就是找到基础URL
1、在资源中显式地指定基础URL。比如，HTML文档中可能会包含一个定义了基础URL的HTML标签<base>
2、封装资源的基础URL。在HTML中，基础URL可以从它们所属资源的基础URL中推导出来
三：URL特殊字符
有些符号在URL中是不能直接传递的，如果要在URL中传递这些特殊符号，那么就要使用他们的编码了。编码的格式为：%加字符的ASCII码，即一个百分号%，后面跟对应字符的ASCII(16进制)码值。例如 空格的编码值是"%20"。
下表中列出了一些URL特殊符号及编码
:替换为%3A
十六进制值
1.
+
URL 中+号表示空格
%2B
2.
空格
URL中的空格可以用+号或者编码
%20
3.
/
分隔目录和子目录
%2F
4.
?
分隔实际的 URL 和参数
%3F
5.
%
指定特殊字符
%25
6.
#
表示书签
%23
7.
&
URL 中指定的参数间的分隔符
%26
8.
=
URL 中指定参数的值
%3D
例：要传递字符串“this%is#te=st&o k?+/”作为参数t传给te.asp，则URL可以是:
te.asp?t=this%25is%23te%3Dst%26o%20k%3F%2B%2F 或者
te.asp?t=this%25is%23te%3Dst%26o+k%3F%2B%2F (空格可以用%20或+代替)
Java中URL
的编码和解码函数
java.NET.URLEncoder.encode(String
s)和java.Net.URLDecoder.decode(String
s);
在JavaScript 中URL
的编码和解码函数
escape(String s)和unescape(String s) ;
点的转义：. ==> u002E
美元符号的转义：$ ==> u0024
乘方符号的转义：^ ==> u005E
左大括号的转义：{ ==> u007B
左方括号的转义：[ ==> u005B
左圆括号的转义：( ==> u0028
竖线的转义：| ==> u007C
右圆括号的转义：) ==> u0029
星号的转义：* ==> u002A
加号的转义：+ ==> u002B
问号的转义：? ==> u003F
反斜杠的转义： ==> u005C
举例：
我们需要模拟的地址为：=1453725386008”>https://login.weixin.qq.com/jslogin?appid=wx782c26e4c19acffb&redirect_uri=https%3A%2F%2Fwx.qq.com%2Fcgi-bin%2Fmmwebwx-bin%2Fwebwxnewloginpage&fun=new&lang=en_US&=1453725386008 ，所以我们模拟的代码如下：3、写一个url解析函数，解析出查询参数
4、原生ajax、jsonp实现
5、编程获取一个二叉树的最大深度
/** * Definition for a binary tree node. * function TreeNode(val) { * this.val = val; * this.left = this.right = null; * } *//** * @param {TreeNode} root * @return {number} */
var maxDepth = function(root) {
if (root === null) {
return 0; }
else {
var leftDepth = maxDepth(root.left),
rightDepth = maxDepth(root.right);
var childDepth = leftDepth > rightDepth ? leftDepth : rightDepth;
return 1 + childDepth;
}
};
6、写一个对象的事件函数，考察es5和es6的区别
7、冒泡排序、插入排序
8、请使用数组的reduce方法实现数组的map方法
9、快速排序
10、请用至少两种方法判断一个对象是否是数组，如何将非数组转化为数组
11、实现节流去抖函数
12、实现bind函数
13、二分查找
14、无序数组n个数得到目标和，要求返回所有解
15、两栏布局，左边定宽，右边自适应
16、label关联对象属性，for
17、settimeout输出12345，闭包问题
18、js实现对象深拷贝
19、事件委托怎么写
20、数组去重
1)如何登录鉴权。面试问这个时候我听过太多有趣的回答，比如有次一个人说登录就是后台返回true或者false，如果true就跳转，false就提示错误呗。然后我说既然是管理系统，有几个角色，那怎么区分他有那些页面和接口权限呢？她就不知道了。还有碰到过一次，那人说请求任何接口前都要让他再登录一次，我至今没想明白这个怎么操作。
2)和后台如何数据交互。比如项目接口是否遵循restful接口规范？常用的请求方法都有什么。我曾听到过一个面试者回答，所有接口都用get。我说那新增，删除，编辑也是get？？他回答是的。更不需要问http那些了。
3)用了UI框架那些组件。是不是觉得这个很幼稚，其实就是。因为我们体量小，肯定不可能自己造轮子。简历筛选完都是react+antd+dva的，然后问他的管理系统项目里用了antd什么组件，他用手比划了半天，说就是上面那个点了可以换图片的......持续半分钟后我突然意识到他想表达的是轮播。我试探性问他：你说的可是轮播？他高兴回答到：对，就是轮播。然后我问那个管理系统还用了别的什么呢？他说没有啊，就用了轮播。
4)表单输入校验。因为我们公司业务就是很多很多复杂表单。所以每回都想问问。前面说到简历筛选来的都是用react+antd+dva的。随便问问问用怎么写表单输入校验，怎么自己实现校验。印象深刻有次一个人说用onChange，用户填了放到state里，提交时候看有没有......我问你用的是antd吗？他说当然啊。
5)状态管理redux。亲爱的朋友们，看到这您是不是笑出了声，我们毕竟很小很现实。我也看过redux和react-redux源码，对于复杂点的业务当然需要啊。有次遇到一个人，我问他你项目里是否用了redux。他突然正襟危坐，我一愣神，他开始背诵:redux有三大设计原则,1..。我当时打断了他，就说说你项目里怎么用的吧。他并不理会我，坚持背诵。我等他背诵完了再问他，那到底用了没呢？他又背诵了一遍。
6)项目搭建。其实这个可以放到第一个说，碰到绝大部分人都说不是自己搭建的。那其实也可以接受，然后再问问那了不了解呢？大致目录结构什么的。碰到过一些人这个时候就说那些都不管，只写一个页面，集成有人做。记得碰到过一个人说他只写页面上的路由组件，我问什么那具体是什么，他说就在屏幕左边，点了就跳到别人页面上，跳哪个页面他也不管，一个项目他只写这个。我寻思这得多大体量公司，一个切换路由的菜单栏就安排一个人弄。还碰见过只写一个列表的，别的什么都不管。
7) HTTP 请求包含哪几部分，每一部分可能有什么值分别举例说明一下。
leetcode挑几个easy的题目
lodash随便挑几个函数
map，reduce的用法(我了解到有培训班连这个都不讲)
随便写一段有语法错误的代码，问他会报什么错以及为什么，或者直接把报错信息给对方看，让对方解释
询问如何单步调试js代码
forEach与for循环一样吗？how？why？how？
问promise
问个进制转换以及不使用内置函数如何实现进制转换
问个补码，进一步可以再问问为什么
问他什么叫位运算
问tcp，udp，http甚至是websocket的通信模型(对，只问模型就可以了，不用问协议细节)
出一道最简单的递归题目
又想到一条：找段文档让他翻译
只要你们想听，这个表我可以列100条以上
你在你曾经的工作中遇到的最困难的问题是什么？如何解决的？
有回答性能的。有回答复杂动画的，css兼容的
培训班出来的一般，包括但不限于以下。
-
将swiper作为技术与js放入掌握技术栏。即熟练使用swiper。
-
同一公司，三年，同时做过超过三个以上的商城项目的移动端，pc端。一会儿卖衣服，一会儿卖幼儿产品，一会儿卖母乳品。遗憾的是大部分简历都是这种情况。
-
随意使用熟练掌握，和精通词语。精通js vue react不在少数。
-
项目复杂度堪忧，3到5年如果还是将业务开发作为主要内容放在简历上，一般经历都不完全真实。优化，监控只字未提。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
