前端开发面试题-问答

Posted 2021-06-04 Leatitia

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中不能包好分号、逗号以及空格符（一般使用编码解决：encodeURIComponent 、decodeURIComponent）；

• 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.你常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？