web前端面试题总结

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

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

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

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

5、css实现垂直水平居中？不少于3中方法。

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

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

   3、父元素：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;
    4、position: absolute;
         top: calc(50% - 高度一半);
         left: calc(50% - 宽度一半);
    5、position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%); 
    6、margin: 50% auto 0;
         tarnsform: translateY(-50%);

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

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

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

（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掉。

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

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

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

1、html语义化
2、减少重复代码，压缩css，js代码大小
3、背景图片大小及数量
4、减少http请求，合理设置缓存
5、图片懒加载
6、减少cookie传输
7、js中减少DOM操作，避免使用eval和 Function，减少作用域链查找
8、CDN加速
9、反向代理
    1、传统代理服务器位于浏览器一侧，代理浏览器将http请求发送到互联网上，而反向代理服务器位于网站机房一侧，代理网站web服务器接收http请求。
　　 2、反向代理也可以实现负载均衡的功能，而通过负载均衡构建的应用集群可以提高系统总体处理能力，进而改善网站高并发情况下的性能。

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

    浏览器内核又可以分成两部分：渲染引擎(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内核；

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

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

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

9、2345浏览器内核：好像以前是IE内核，现在也是IE+Chrome双内核了；

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

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

（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>等，可以和其他行内元素位于一行，且设置其高度和宽度

12、H5为什么只写<!DOCTYPE html>

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

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

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

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

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

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

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

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

 14、什么是闭包和闭包的优缺点

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