前端开发面试题-问答

Posted Leatitia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发面试题-问答相关的知识,希望对你有一定的参考价值。

1、谈谈你对前端性能优化的理解(减少页面加载方法)

  • 请求数量:合并脚本和样式表、css sprites、拆分初始化负载;
  • 请求宽带:精简javascript、移除重复脚本、图像优化;
  • 缓存理由:使用CDN、使用外部JavaScript和css、天价Expires头、皮遏制ETag,使Ajax可缓存;
  • 页面结构:将样式表放置顶部,将脚本放置底部,尽可能快速刷新文档的输出;
  • 代码校验:避免css表达式、避免重定向

2、对盒模型的理解

盒模型分为IE6盒模型以及W3C盒模型(标准盒模型)。
页面文档的每个元素其实都是一个盒子,有四个边界:margin、padding、border、content。可通过css3中的box-siziing属性控制盒子的计算方式。

  • content-box:width = content
  • box-box:width = content + padding + border

3、margin 塌陷问题(外边距合并)

定义:块的上下margin有时候会被组合为单个外边距,其大小是组合到其中的最大外边距;(相邻兄弟元素、父子元素)其中,父子元素的外边距合并,实在不存在上边框、padding-top、inline content、清除浮动着四个属性的情况下才会存在合并哦;
解决办法:触发盒子的BFC模型(块级格式化上下文);

  • 在最外层div中加入:overflow:hidden;zoom:1;
  • 在最外层div加入:padding:1px;
  • 在最外层加入:border:1px solid;

触发BFC(清除浮动、解决外边距合并、布局)

  • body根元素
  • 浮动元素
  • 绝对定位元素
  • display属性:inline-block、table-cells、scroll
  • overflow属性:hidden、auto、scroll

4、cookie(浏览器缓存)

在客户访问某个地址时,会将请求交到服务器进行处理,在发送请求的时候,浏览器会将页面的头部信息一并交到服务器进行处理。在处理过程中,cookie会在服务器端生成,在服务器端处理完成后,跟随HTTP响应,在响应头加上cookie信息,浏览器接到响应,会在客户端建立响应的cookie,在下次客户进行请求的时候,HTTP请求头便会附带相应的cookie信息以便Serve追中用户。浏览器将cookie的信息以name-value的形式存储在本地

使用:document.cookie;以;拼接的值

对cookie的使用基本是设置cookie的name、value以及过期时间(expire)。其中,cookie的name-value中不能包好分号、逗号以及空格符(一般使用编码解决:encodeURIComponentdecodeURIComponent);

  • expires:cookie的存储时间:浏览器当前会话期间。当用户退出浏览器后销毁。可通过设置expires属性设置。当前使用max-age属性设置,单位为秒。max-age为正数,cookie会被写到对应的cookie文件中,持久化处理;max-age为负数,则被处理为临时cookie,保存在浏览器内存中。关闭窗口或者达到相应的设置时间立即失效。max-age设置为0,击删除cookie。(ie6的cookie在浏览器中,在当前窗口跳转或者新开一个页面,无法共有cookie。其它浏览器能共享
  • domain:domain属性可以使多个web服务器共享cookie。(不能讲一个cookie的域设置成服务器所在的域之外的域);
  • secure:布尔值,指定字网络上如何传输cookie,默认false(即普通的http请求);
  • HttpOnly:限制cookie对HTTP 请求的作用范围。特别的,该属性指示用户代理忽略那些通过“非HTTP”方式对cookie的访问(例如浏览器暴露给js的接口);

5、cookie的弊端

  • 每个特定域名下最多生成的cookie个数有限制;
  • ie会清理近期最少使用的cookie,Firefox会随机清理;
  • cookie大小有限制,为了兼容性一把不超过4095字节;
  • 安全性问题:cookie被拦截,就会被获取所有的session信息。

6、浏览器的本地存储:localStorage、sessionStorage

  • sessionStorage:会话级别的存储,当前会话结束后数据也随之销毁;
  • localStorage:持久化的本地存储。除非主动删除数据,否则永远不会过期。

7、web storage和cookie的区别
web storage是为了更大存储容量设计的。但是cookie也是不可或缺的:cookie是作为HTTP规范的一部分而存在的,与服务器进行交互,而web storage仅仅是为了在本地存储数据而生

  • cookie大小受限制;
  • cookie跟随每一次HTTP请求,作为HTTP规范的一部分存在浪费带宽;而web storage仅仅作为本地“存储”数据而存在;
  • cookie有指定作用域,不可以跨域使用;
  • web storage有setItem、getItem方法,cookie只能通过自己封装;
    cookie和session的区别
  • cookie数据存放在客户的浏览器上,session数据放在服务器上;
  • 考虑到安全性用session存放登录信息等重要信息;
  • session会在一定时间内保存在服务器上。访问增多则会比较占用内存;

8、线程和进程

  • 一个程序至少有一个进程,一个进程至少有个线程;
  • 线程的划分尺度小于进程,使得多线程程序的并发性高;
  • 进程在执行过程中拥有独立的内存单元,而多个线程共享内存,能极大提高程序运行效率;
  • 线程不能独立执行,需要依存在应用程序中;
  • 多线程的意义在于一个应用程序中,多个执行部分可以同时执行;

9、WEB应用从服务器主动推送Data到客户端有什么方式?

  • html5 websoket
  • WebSocket 通过flash
  • XHR长时间连接
  • XHR Multipart Streaming

10、同源策略、跨域

同源策略:协议、域名、端口相同。同源策略即一种安全协议。即一段脚本只能读取来自同一来源的窗口和文档属性。
跨域解决方法

  • 设置document.domain 解决无法读取非同源网页的cookie;
  • JSONP:简单实用、兼容性好,但仅支持get请求;
//jq
$.ajax({
    url: 'http://www.test.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

//vue
this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})
  • CORS:跨域资源分享。普通跨域请求:只需要服务器设置Access-Cotroll-Allow-Origin;待cookie跨域请求:前后端共同配置:
var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
 
// 前端设置是否带cookie
xhr.withCredentials = true;

其它:Cookie携带只区分域名,不区分端口;ajax跨域请求下,ajax添加自定义或者原装的请求头,请求会发送两次,第一次预检查请求,第二次正常请求
*post(或GET)跨域请求时,分为简单请求和复杂请求,跨域携带自定义或者原装请求头头时是复杂请求。

复杂请求会先发送一个method 为option的请求,目的是试探服务器是否接受发起的请求. 如果服务器说可以,再进行post(或GET)请求。*

11、一次js请求一般情况下有哪些地方会有缓存处理

  • 浏览器端存储、浏览器端文件缓存
  • HTTP缓存304
  • 服务器端文件类型缓存
  • 变现成&DOM层

cache-control:每个资源都可以通过cache-control头来定义自己的缓存策略

12、浏览器内核
IE:Trident
Mozilla:Gecko
Chrome:Blink
Opera:Blink

13、网站重构
简化结构、添加可读性、;

  • 兼容处理
  • SEO优化
  • 减少代码耦合
  • 压缩、合并JS、css等资源

其它:link方式的样式的权重 高于@import的权重.

14.你都使用哪些工具来测试代码的性能?

15.你遇到过比较难的技术问题是?你是如何解决的?
【设计一个策略和方法,实现在https的前端项目里进行http请求】- 未解决

16.你常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?

以上是关于前端开发面试题-问答的主要内容,如果未能解决你的问题,请参考以下文章

前端开发面试题-问答

前端开发面试题-问答

前端开发面试题-问答

前端开发面试题-问答

前端开发面试题-问答

前端开发面试题-问答