web前端面试大全

1. 浏览器缓存

    cookie的优点和缺点：高扩展性和可用性，但是每个域名下的数量有限制，长度也有限制，无法跨域使用

2. get和post

   

3. 浏览器内核

   ①主要分成两部分：渲染引擎和JS引擎

   ②渲染引擎：负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等)，以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。 JS引擎：解析和执行javascript来实现网页的动态效果。

   ③最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

   ④常见内核：

1. Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

2. Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

3. Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]

4. Webkit内核：Safari,Chrome等。 [ Chrome的：Blink(WebKit的分支)]

4. 一次完整的http请求即输入网址按下回车发生的事情：

    a. 域名解析

    b. 发起TCP的3次握手

    c. 建立TCP连接后发起http请求

    d. 服务器端响应http请求，浏览器得到html代码

    e. 浏览器解析html代码，并请求html代码中的资源

    f. 浏览器对页面进行渲染呈现给用户

5.前端性能优化

    a. 请求数量：合并脚本和样式表，减少http请求，减少 DOM 元素数量，CSS Sprites，拆分初始化负载，划分主域

    b. 请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体

    c. 缓存利用：使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存

    d. 页面结构：将css样式表放在顶部，将js脚本放在底部，尽早刷新文档的输出

    e. 代码校验：避免CSS表达式，避免重定向

6. 线程与进程的区别

    a. 一个程序至少有一个进程，一个进程至少有一个线程

    b. 线程的划分尺度小于进程，使得多线程程序的并发性高

    c. 进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率

    d. 每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，  由应用程序提供多个线程执行控制

    e. 多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配

7.JavaScript 的同源策略

  同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议

  解决跨域：

8. cache-control：

    每个资源都可以通过 Cache-Control HTTP 头来定义自己的缓存策略

    Cache-Control 指令控制谁在什么条件下可以缓存响应以及可以缓存多久

    Cache-Control 头在 HTTP/1.1 规范中定义，取代了之前用来定义响应缓存策略的头（例如 Expires）

9. 前端页面有哪三层构成，分别是什么？作用是什么？

    a. 结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。

    b. 表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。

    c. 行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题

10. 一次js请求一般情况下有哪些地方会有缓存处理？

    a. 浏览器端存储

    b. 浏览器端文件缓存

    c. HTTP缓存304

    d. 服务器端文件类型缓存

    e. 表现层&DOM缓存

11.  一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

    a. 图片懒加载，滚动到相应位置才加载图片。

    b. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。

    c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。

    d. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验

12. 浏览器是如何渲染页面的

     1.解析HTML文件，创建DOM树

         自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载，但会阻塞脚本的执行）。

     2.解析CSS：优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式。

     3.将CSS与DOM合并：构建渲染树（Render Tree）。

     4.布局和绘制：重绘（repaint）和回流（reflow）：回流所需的成本比重绘高的多，

• 重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘
• 回流是布局或者几何属性需要改变就称为回流

     

13. 优雅降级和渐进增强

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

14. use strict：

优点：消除JavaScript的一些不合理不严谨之处、减少怪异行为，保证代码安全性，提高编译器效率

缺点：经过js打包压缩后会出现在代码的中间，不在顶部了，所以也就不起作用，反而浪费了字节