前端开发工程师面试题之综合篇

温馨提示：以下系列的面试题是通过整合网上各位大牛的文章而成，站在巨人的肩膀上，能够让我们更进一步。

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

1. 输入域名地址
2. 发送域名地址至DNS服务器并获得对应WEB服务器IP地址
3. 与WEB服务器建立TCP连接
4. 服务器的永久重定向响应（从http://example.com到http://example.com）
5. 浏览器跟踪重定向地址
6. 服务器处理请求
7. 服务器返回一个HTTP响应
8. 浏览器显示HTML
9. 浏览器发送请求获取的资源（如图片、音频、视频、CSS、JS等等）
10. 浏览器发送异步请求

 2、浏览器工作原理

1. 用户界面
2. 网络
3. UI后端
4. 数据存储
5. 浏览器引擎
6. 渲染引擎
7. js解释器

3、浏览器解析过程

流程：解析html以构建DOM树 -> 构建render树 -> 布局render树 -> 绘制render树

4.浏览器内核的理解

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

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等）、以及计算网页的显示方式，然后会输出至显示器或打印机。

浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核

JS引擎：解析和执行javascript来实现网页的动态效果

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

5.常见的浏览器内核有哪些

1. Trident内核：IE浏览器
2. Gecko内核： Netscape6
3. Presto内核： Opera7以上
4. Webkit内核： Safari,Chrome等

 6.请描述一下cookies,sessionStorage和localStorage的区别

cookie是网站为了标示用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密），数据会在浏览器和服务器间来回传递。

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

存储数据大小：

　　cookie：数据大小不能超过4k。

　　sessionStorage和localStorage：虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

存储有效时间：

　　localStorage:：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

　　sessionStorage： 数据在当前浏览器窗口关闭后自动删除。

　　cookie： 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

 7.请大概描述下页面访问cookie的限制条件

跨域问题，设置了HttpOnly

8.如何实现浏览器内多个标签页之间的通信

调用localStorage、cookies等本地存储方式

9.页面可见性（Page Visibility API）可以有哪些用途

通过visibilityState的值检测页面当前是否可见，以及打开网页的时间等；

在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放

10.网页验证码是做什么的，是为了解决什么安全问题

含义：区分用户是计算机还是人的公共全自动程序。

安全问题：防止恶意破解密码、刷票、论坛灌水；有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试。

11.性能优化？

1. 使用CDN
2. 图片懒加载
3. 使用外部Javascript和css
4. 压缩JavaScript、css、字体、图片等等
5. 优化CSS Sprite
6. 减少HTTP请求数
7. 减少DNS查询
8. 减少DOM操作
9. 减少DOM元素数量
10. 把脚本放在页面底部