css相关1.万能居中1.margin:0auto;水平2.text-align:center;horizo??ntal3.lineheight,vertical4.table,center,middle;水平和垂直5.显示：table-cell；analogtable，全部6.绝对定位，50%减去自身的宽高7.绝对定位，上下左右全为0，margin:auto8.绝对定位加上相对定位。不需要知道宽高9.IE6、IE7：给父元素设置一个font-size:height/1.14,vertical-align:middle2。BFC优化块格式化上下文，特性：防止BFC内部的浮动元素乱跑；浮动元素产生边框。3、盒子模型有哪两种模式？有什么不同？如何设置标准模式：box-sizing:content-box;宽高不包括padding和borderWeirdmode:box-sizing:border-box4.常用的清除浮动的方法，不清除浮动会怎样？当父元素不给高度时，内部元素不浮动时会被拉伸，浮动时父元素变成一条线，造成塌陷。额外标签的方法（在最后一个浮动标签后添加一个新的标签，给它设置clear:both;）（不推荐）在父元素上添加overflow:hidden；（触发BFC）使用after伪元素清除浮动（推荐）使用before和after双伪元素清除浮动5.antd等网格去除原理行的row和col分为24个部分，cols个数占多少个部分，底层按百分比实现；结合媒体查询，响应式6.CSS选择器有哪些？(1)id选择器(#myid)(2)类选择器(.myclassname)(3)标签选择器(div,h1,p)(4)后代选择器(h1p)(5)相邻后代选择器(child)选择器(ul>li)(6)兄弟选择器(li~a)(7)相邻兄弟选择器(li+a)(8)属性选择器(a[rel="external"])(9)伪类选择器(a:hover,li:nth-child)(10)伪元素选择器(::before,::after)7.伪类和伪元素的区别css引入伪类和伪元素的概念是为了格式化信息在文档树之外。即伪类和伪元素用于修饰不在文档树中的部分，例如句子的第一个字母，或列表的第一个元素。伪类用于在现有元素处于某种状态时为其添加相应的样式，该状态会根据用户行为动态变化。例如，当用户悬停在指定元素上时，我们可以使用:hover来描述这个元素的状态。伪元素用于创建和设置不在文档树中的元素的样式。它们允许我们为元素的某些部分设置样式。例如，我们可以使用::before在元素之前添加一些文本并为文本添加样式。虽然用户可以看到文本，但文本实际上并不在文档树中。有时您会发现使用两个冒号(::)而不是一个冒号(:)的伪元素。这是CSS3的一部分，试图区分伪类和伪元素。大多数浏览器都支持这两个值。按照规则，您应该使用(::)而不是(:)来区分伪类和伪元素。但是，由于旧版本的W3C规范并没有做特别的区分，目前大部分浏览器都支持使用这两种方式来表示伪元素。8.CSS中哪些属性是可以继承的？无论属性是否在定义中被继承，每个属性都被赋予。当没有指定值时，继承的属性将使用父元素的相同属性的值作为它自己的值。一般继承的属性包括字体相关的属性，font-size和font-weight等。文本相关的属性，如color和text-align等。表格的一些布局属性，列表属性如list-style，等等。还有游标属性cursor，元素visibility可见性。当一个属性不是继承的属性时，我们也可以通过设置它的值为inherit使其从父元素继承。9.CSS优先级算法是如何计算的？在判断优先级的时候，我们会先判断一个属性声明是否有权重，即声明后是否加了!important。如果一个语句被加权，它的优先级最高，前提是它之后没有出现其他具有相同权重的语句。如果权重相同，则需要比较匹配规则的特异性。一条匹配规则一般由多个选择器组成，一条规则的特异性是由其选择器的特异性累积而成的。选择器的特异性分为四级，第一级为内联样式，为1000，第二级为id选择器，为0100，第三级为类选择器、伪类选择器和属性选择器为0010，第四层为元素选择器和伪元素选择器，为0001。每当一个选择器出现在规则中时，它的特殊性就会被叠加。这种叠加仅限于对应层级的叠加，不会产生进位。选择器特异性值的比较是从左到右排序的，即以1开头的特异性值大于所有以0开头的特异性值。例如，一个特异性值为1000的规则有一个优先级高于特异性值为0999的规则。如果两个规则具有相同的特异性值，则根据它们引入的顺序，较晚出现的规则优先。10、显示值有哪些？解释他们的作用。块块类型。默认宽度是父元素的宽度，宽度和高度可以设置，并且会换行显示。none元素不显示并从文档流中删除。inline内联元素类型。默认宽度为内容宽度，宽度和高度不能设置，会平行显示。inline-block默认宽度为内容宽度，可以设置宽度和高度平行显示。list-item显示为块类型元素，添加了样式列表标记。table该元素将显示为块级表格。inherit指定display属性的值应该从父元素继承。JavaScript相关1.介绍js的基本数据类型。js一共有六种基本数据类型，分别是Undefined、Null、Boolean、Number、String，以及ES6中新增的Symbol类型，表示创建后唯一且不可变的数据类型。我认为它的出现主要是为了解决可能的全局变量冲突问题。2、JavaScript有几种类型的值？你能画出它们的内存映射吗？js的值分为两种，一种是基本数据类型，一种是复杂数据类型。复杂数据类型指的是Object类型，Array、Date等所有其他数据类型都可以理解为Object类型的子类。两种类型之间的主要区别是它们的存储位置不同。基本数据类型的值直接存放在栈中，而复杂数据类型的值存放在堆中。通过使用存储在栈中的对应指针来获取堆中的值。3.什么是内部属性[[Class]]？所有typeof返回“object”的对象（比如数组）都包含一个内部属性[[Class]]（我们可以认为是内部类，而不是传统面向对象意义上的类）。该属性不能直接访问，一般通过Object.prototype.toString(..)查看。例如：Object.prototype.toString.call([1,2,3]);//"[objectArray]"Object.prototype.toString.call(/regex-literal/i);//"[objectRegExp]“4.介绍一下js有哪些内置对象？js中的内置对象主要是指js定义的一些在程序执行前就存在于全局范围内的全局值属性、函数和构造函数对象。一般我们经常使用诸如全局变量值NaN、undefined、全局函数如parseInt()、parseFloat()构造函数用于实例化Date、Object等对象，以及提供数学运算的单个内置对象计算，例如Math对象。5.undefined和undeclared有什么区别？已在范围内声明但尚未分配值的变量是未定义的。相反，未在范围内声明的变量是未声明的。对于未声明变量的引用，浏览器会报引用错误，比如ReferenceError:bisnotdefined。但是我们可以利用typeof的安全机制来避免报错，因为对于未声明（或未定义）的变量，typeof会返回“undefined”。6.null和undefined有什么区别？首先，Undefined和Null都是基本数据类型，这两种基本数据类型都只有一个值，就是undefined和null。undefined的意思是未定义，null的意思是一个空对象。一般当一个变量被声明但还没有定义时，会返回undefined，null主要用于赋值给一些可能返回对象的变量作为初始化。undefined在js中不是保留字，也就是说我们可以把undefined作为变量名，这是非常危险的，会影响我们对undefined取值的判断。但是我们可以通过一些方法得到一个安全的undefined值，比如void0。当我们使用typeof判断两种类型时，Null类型会返回“object”，这是一个历史问题。当我们使用双等号比较两种类型的值时它返回真，当我们使用三等号时它返回假。7.如何获取安全的未定义值？因为undefined是一个标识符，所以可以作为一个变量来使用和赋值，但是这样会影响undefined的正常判断。表达式void_没有返回值，所以返回结果是未定义的。void不会改变表达式的结果，它只是让表达式不返回任何值。按照惯例，我们使用void0来表示未定义。8.告诉我一些编写JavaScript的基本规则？在正常的项目开发中，我们遵守一些基本规范，例如：(1)一个函数作用域内的所有变量声明尽可能引用函数头，使用一个var声明，不允许连续声明两个var，如果变量在声明的时候没有值，那么应该给变量赋值对应类型的初值，这样别人读代码的时候，一眼就能知道变量对应的类型值。(2)当代码中出现地址、时间等字符串时，需要用常量代替。(3)比较时，尽量用'==='、'!=='代替'=='、'!='。(4)不要在内置对象的原型上添加方法，如Array、Date。(5)switch语句必须有默认分支。(6)for循环中必须使用大括号。(7)if语句必须使用大括号。9.JavaScript原型，原型链？有什么特点？在js中，我们使用构造函数来创建一个新的对象。每个构造函数内部都有一个原型属性值。这个属性值是一个对象，它包含了构造函数的所有实例可以共享的属性和属性。方法。当我们使用构造函数创建一个新对象时，该对象会包含一个指针，该指针指向构造函数的原型属性对应的值。在ES5中，这个指针被称为对象的原型。一般来说，我们应该是获取不到这个值的，但是现在浏览器已经实现了proto属性，让我们可以访问到这个属性，但是我们最好不要使用这个属性，因为规范中并没有规定。ES5中新增了Object.getPrototypeOf()方法，通过该方法我们可以获取对象的原型。当我们访问一个对象的属性时，如果这个属性在对象内部不存在，那么它就会去它的原型对象中寻找这个属性，而这个原型对象会有自己的原型，所以就一直这样，并且这就是原型链的概念。原型链的末端一般是Object.prototype所以这就是为什么我们新建的对象可以使用toString()等方法。特点：JavaScript对象是通过引用传递的，我们创建的每一个新的对象实体都没有自己的原型副本。当我们修改原型时，与之相关的对象也会继承这种变化。10.js中整数的安全范围是多少？安全整数是指这个范围内的整数转换为二进制存储时，不会有精度损失。可以“安全”呈现的最大整数是2^53-1，即9007199254740991，在ES6中定义为Number.MAX_SAFE_INTEGER。最小的整数是-9007199254740991，在ES6中定义为Number.MIN_SAFE_INTEGER。如果计算结果产生的值超出JavaScript的数值范围，该值会自动转换为特殊的Infinity值。如果计算返回正或负无穷大值，则该值不能用于下一次计算。判断一个数是否有限，可以使用isFinite函数来判断。浏览器网络相关1.回流（reflow）和重绘（repaint）优化浏览器渲染流程：DOM树、CSS树-->渲染树-->PaintDOM树根节点是从浏览器左上角到html渲染右下角第一次打开页面至少会触发一次重绘和重排。当宽高等结构发生变化时，触发reflow回流；当背景颜色等非结构发生变化时，会触发repaint重绘。两者都会造成体验不佳2.如何减少reflowDrawing和reflow？通过classname或者cssText一次性修改样式，而不是一个一个的改离线模式：clone要操作的节点，操作完再和原节点交换，类似虚拟DOM避免频繁直接访问计算样式，而是先保存信息。DOM的绝对布局不会造成大量回流。嵌套不要太深，不要超过六层。浏览器将请求的URL提交给DNS域名解析，找到真实IP，向服务器发起请求；服务器后台处理完成后返回数据，浏览器收到文件（HTML、JS、CSS、图片等）；解析加载的资源（HTML、JS、CSS等），建立相应的内部数据结构（如HTMLDOMTree）；加载解析后的资源文件，渲染页面，完成。4、localStorage和sessionStorage的区别和cookies总结共同点：都是存储在浏览器端，同源localStorage和sessionStorage统称为webStorage，存储在浏览器，不参与服务器通信.sessionStorage的当前会话可以手动清除。作用域不同：不同的浏览器不共享local和session，不同的session不共享sessionCookie：有效期至设定的过期时间，大小为4K。有数量限制，每个浏览器都不一样。一般为20个。携带在HTTP头中，过多会造成性能问题。可以自己封装，也可以使用native5.浏览器如何防止事件传播，防止默认行为阻止事件传播（冒泡）：e.stopPropagation()防止默认行为：e.preventDefault()6.什么是虚拟DOM方案相对于原生DOM操作的优势，实现原理是什么？VirtualDOM可以提高性能，不需要整体重新渲染，而是局部刷新。JS对象，diff算法7.在浏览器的事件机制中，事件触发三个阶段事件捕获阶段：从dom树节点向下找到目标节点，不会触发Function事件目标处理函数：到达目标节点事件冒泡:最终从目标节点传递到顶层元素，通常函数在这个阶段执行。addEventListener的第三个参数默认为false（在冒泡阶段执行），true（在捕获阶段执行）。看上面的方法防止冒泡。8、什么是跨域？为什么浏览器使用同源策略？你有多少种方法可以解决跨域问题？知道预检请求吗？跨域是指一个域下的文档或脚本试图请求另一个域下的资源，以防止XSS、CSFR等攻击，协议+域名+端口是不同的jsonp；跨域资源共享（CORS）（访问控制）；serverforwardPreflightrequestssuchasproxies：需要preflight的请求必须先使用OPTIONS方法向服务器发起preflight请求，以了解服务器是否允许实际请求。使用“preflightrequest”可以避免跨域请求对服务器端用户数据的意外影响。9、你了解浏览器的缓存机制吗？浏览器缓存是存储已请求资源的副本。下次需要该资源时，浏览器会根据缓存机制决定是直接使用缓存的资源还是再次向服务器发送请求。来自内存缓存；fromdiskcache作用：减少网络传输损失，减轻服务器压力。优先级：强制缓存>协商缓存；cache-control>Expires>Etag>Last-modified10。为什么DOM的运行很慢？DOM本身就是一个js对象，这个对象本身的运行速度并不慢，但是运行之后会触发浏览器的行为。重绘和回流等浏览器行为变慢11.什么会阻塞渲染？js脚本同步执行css和图片虽然是异步加载，但是js文件的执行依赖css，所以css也会阻塞渲染
