web前端面试题总结

1、javascript主要的数据类型:String、Number、boolean、Object、Null、Undefined

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、反向代理也可以实现负载均衡的功能,而通过负载均衡构建的应用集群可以提高系统总体处理能力,进而改善网站高并发情况下的性能。

猜你喜欢

转载自www.cnblogs.com/hellowoeld/p/9924177.html