最近有个小师妹要参加前端实习生的面试，正巧最近比较闲，就给她整理、总结了一些前端面试中需要记住的知识点。

什么是浏览器内核，常用的浏览器的内核有哪些？

• 简单来说浏览器可以分为两部分，shell+内核。其中shell的种类相对比较多，内核则比较少。Shell是指浏览器的外壳：例如菜单，工具栏 等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。也有一些 浏览器并不区分外壳和内核。从Mozilla将Gecko独立出来后，才有了外壳和内核的明确划分。目前主流的浏览器有IE、Mozilla、FireFox、Opera、Safari、Chrome等。

• 浏览器内核又可以分成两部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至 显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内 容的应用程序都需要内核。JS引擎则是解析Javascript语言，执行javascript语言来实现网页的动态效果。最开始渲染引 擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个ACID来测试引擎的兼容性和性 能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、 Presto、Webkit。

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

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

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

  • Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

行内元素和块级元素有哪些？

• 首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

• 区别：

  • （1）块级元素会独占一行，其宽度自动填满其父元素宽度 ；行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化。

  • （2）块级元素可以设置 width, height属性，行内元素设置width, height无效 【注意：块级元素即使设置了宽度，仍然是独占一行的】

  • （3）块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

• 常见的行内元素以及块级元素可以参考 这儿

简述一下你对HTML语义化的理解？

• 用正确的标签做正确的事情。

• html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

• 即使在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的;

• 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

什么是SEO

• 搜索引擎优化， 是以网页为载体，在不影响用户体验的前提下最大化让网站符合搜索引擎的排名规则的所有手段集合。

• 常用的SEO方法：

  • 1、TDK规则（合理设置html的head中的title、description、keywords）

  • 2、描述性的标签加上title属性

  • 3、每个页面都需要有个h1标签，合理使用h2-h6标签

  • 4、页面进行服务端渲染，不要使用js渲染页面（搜索引擎不会执行js）

  • 5、页面中合理地进行关键词植入

你能描述一下渐进增强和优雅降级之间的不同吗?

• 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

• 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

请描述一下cookies，sessionStorage和localStorage的区别？

• cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。

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

• 存储大小：

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

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

• 有期时间：

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

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

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

什么利用多个域名来存储网站资源会更有效？

• CDN缓存更方便

• 突破浏览器并发限制

• 节约cookie带宽

• 节约主域名的连接数，优化页面响应速度

• 防止不必要的安全问题

页面优化的方法

• 雅虎35条

• 重点：

  • （1）尽量减少HTTP请求次数

  • （2） 减少DNS查找次数

  • （3） 减少DOM元素数量

  • （4） 为文件头指定Expires或Cache-Control

  • （5） Gzip压缩文件内容

  • （6） 把样式表置于顶部、 把脚本置于页面底部

  • （7） 避免使用CSS表达式（Expression）

  • （8） 使用外部JavaScript和CSS

  • （9） 减少DOM访问

从地址栏输入URL到页面加载完成发生了什么？

• 对于网址栏的URL不同的操作方式有不同的加载资源、获取数据的方式，下面的详细过程针对”在地址栏输入URL，按enter(回车)键加载资源”此种操作方式做解析，其它的方式的过程大同小异，差异会在后面再做分析。

  • （1）浏览器开启一个线程来处理这个请求，对URL判断如果是http协议就按照web方式处理；

  • （2）浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容（此时没有向服务端发请求）。若没有，则进行下一步操作（后面需要向服务端发送请求）；

  • （3）通过DNS解析获取网址的IP地址;

  • （4）向真实IP地址服务器发起tcp连接，与浏览器建立tcp三次握手。

  • （5）握手成功后，进行HTTP协议会话，浏览器发送报头(请求报头);

  • （6）进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;

  • （7）进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;

  • （8）处理结束回馈报头，将数据返回至浏览器;

  • （9）浏览器开始下载html文档(响应报头，状态码200)，同时设置缓存;

  • （10）之后浏览器对整个 HTML 结构进行解析，形成 DOM 树；与此同时，它还需要对相应的 CSS 文件进行解析，形成 CSS 树（CSSOM）。

• 接下来，需要结合 DOM + CSSOM，形成一个绘制树（Render Tree）;

  • （11）得到绘制树之后，需要计算每个结点在页面中的位置，这一个过程称为layout ；

  • （12）layout的过程是在一个连续的二维平面上进行的，接下来，需要将这些结果栅格化，映射到屏幕的离散二维平面上，这一过程称为 paint ; 现代浏览器为提升性能，将页面划分多个 layer，各自进行 paint 然后组合成一个页面（composite layers）。