web前端面试题总结

一、javascript主要的数据类型：String、Number、boolean、Object、Null、Undefined、symbol(es6)

二、css盒子模型属性包括：margin、border、padding、content

三、DOCTYPE 不存在或格式不正确会致使文档以混杂模式呈现

四、TCP是   传输控制 的协议，UDP是 用户数据报 的协议

五、css实现垂直水平居中？很多于3中方法。

垂直居中：
   一、line-height
        text-align: center;

   二、position: absolute;
        left: 50%;
        top: 50%;
        margin-left:-宽度/2
        margin-top:-高度/2

   三、父元素：display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-flex-direction: column;
            flex-direction: column;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-flex-direction: column;
            flex-direction: column;
    四、position: absolute;
         top: calc(50% - 高度一半);
         left: calc(50% - 宽度一半);
    五、position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%); 
    六、margin: 50% auto 0;
         tarnsform: translateY(-50%);

六、简述cookie、sessionStorage和localStorage 的区别

一、cookie数据始终在同源的http请求中携带（即便不须要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，能够限制cookie只属于某个路径下 
二、存储大小限制也不一样，cookie数据不能超过4K，同时由于每次http请求都会携带cookie、因此cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大 
三、数据有效期不一样，sessionStorage：仅在当前浏览器窗口关闭以前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，所以用做持久数据；cookie：只在设置的cookie过时时间以前有效，即便窗口关闭或浏览器关闭 
四、做用域不一样，sessionStorage不在不一样的浏览器窗口中共享，即便是同一个页面；localstorage在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的 

七、跨域请求资源的方法有哪些？

（1）JSONP（jsonp跨域get请求） 
     这种方式主要是经过动态建立一个script标签，浏览器对script的资源引用没有同源限制，同时资源加载到页面后会当即执行；（建立script标签向不一样域提交http请求的不会被拒绝的方法，jsonp标签的src属性是没有跨域限制的）
     实际项目中JSONP一般用来获取json格式数据，这时先后端一般约定一个参数callback，该参数的值，就是处理返回数据的函数名称；
缺点：这种方式没法发送post请求，另外要肯定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判断。
 
（2）proxy 代理
    这种方式首先将请求发送给后台服务器，经过服务器来发送请求，而后将请求的结果传递给前端；
须要注意的是若是你代理的是https协议的请求，那么你的proxy首先须要信任该证书或者忽略证书检查，不然你的请求没法成功。
 
（3）cors
    当你使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求头origin，后台进行一系列处理，若是肯定接受请求则在返回结果加入一个响应头Access-Control-Allow-Origin；
浏览器判断该响应头中是否包含Origin的值，若是有则浏览器会处理响应，咱们就能够拿到响应数据，若是不包含浏览器直接驳回，这时咱们没法拿到响应数据； 
 
post请求的content-type不是常规的三个：application/x-www-form-urlencoded（使用HTTP的post方式提交表单）、multipart/form-data（同上，但主要用于表单提交时伴随文件上传的场合）、text/plain（纯文本）
 
post请求的payload为text/html 
payload指在http中，应该是post请求时所携带的有效数据；
 
有一种跨域须要特别注意就是https协议下发送https请求，除了使用proxy代理外其余方法都无解，会被浏览器直接block掉。

八、一个页面从输入URL到页面加载显示完成，这个过程当中发生了什么？

一、浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
二、服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
三、浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，创建相应的内部数据结构（如HTML的DOM）；
四、载入解析到的资源文件，渲染页面，完成

九、对于网站优化，有哪些方法？

一、html语义化
二、减小重复代码，压缩css，js代码大小
三、背景图片大小及数量
四、减小http请求，合理设置缓存
五、图片懒加载
六、减小cookie传输
七、js中减小DOM操做，避免使用eval和 Function，减小做用域链查找
八、CDN加速
九、反向代理
    一、传统代理服务器位于浏览器一侧，代理浏览器将http请求发送到互联网上，而反向代理服务器位于网站机房一侧，代理网站web服务器接收http请求。
　　 二、反向代理也能够实现负载均衡的功能，而经过负载均衡构建的应用集群能够提升系统整体处理能力，进而改善网站高并发状况下的性能。

 十、常见的浏览器内核有哪些？以及对浏览器内核的理解

    浏览器内核又能够分红两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，
而后会输出至显示器或打印机。浏览器的内核的不一样对于网页的语法解释会有不一样，因此渲染的效果也不相同。全部网页浏览器、电子邮件客户端以及其它须要编辑、显示网络内容的应用程序都须要内核。
JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。最开始渲染引擎和 JS 引擎并无区分的很明确，后来 JS 引擎愈来愈独立，内核就倾向于只指渲染引擎。
有一个网页标准计划小组制做了一个 ACID 来测试引擎的兼容性和性能。内核的种类不少，如加上没什么人使用的非商业的免费内核，可能会有 10 多种，可是常见的浏览器内核能够分这四种：Trident、Gecko、Blink、Webkit。

1、IE浏览器内核：Trident内核，也是俗称的IE内核；

2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，之前是Webkit内核，如今是Blink内核；

3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；

4、Safari浏览器内核：Webkit内核；

5、Opera浏览器内核：最初是本身的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；

六、360浏览器、猎豹浏览器内核：IE+Chrome双内核；

七、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

8、百度浏览器、世界之窗内核：IE内核；

九、2345浏览器内核：好像之前是IE内核，如今也是IE+Chrome双内核了；

十、UC浏览器内核：这个众口不一，UC说是他们本身研发的U3内核，但好像仍是基于Webkit和Trident，还有说是基于火狐内核。。

十一、简述行内样式与行外样式的区别

（1）行内元素有：a b span img input select strong

（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）常见的空元素： <br> <hr> <img> <input> <link> <meta>

不为人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

块级元素的先后都会自动换行，如同存在换行符同样，默认状况下，块级元素会独占一行

行内元素能够与其余行内元素位于同一行，在浏览器中显示时不会换行，对其不能设置高度和宽度。

还有一种称为行内块级元素，好比<img>、<input>等，能够和其余行内元素位于一行，且设置其高度和宽度

十二、H5为何只写<!DOCTYPE html>

HTML5 不基于 SGML，所以不须要对DTD进行引用，可是须要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；

而HTML4.01基于SGML,因此须要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

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

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（一般通过加密）。

cookie数据始终在同源的http请求中携带（即便不须要），记会在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小： cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。

有期时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage 数据在当前浏览器窗口关闭后自动删除。 cookie 设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭。

 1四、什么是闭包和闭包的优缺点

闭包就是可以读取其余函数内部变量的函数
优势：1、可以读取其余函数内部变量 
     2、使变量的值始终保持在内存中
缺点：1、闭包使函数中的变量都被保存在内存中，消耗内存，在IE中可能会形成内存泄漏