常见面试题

谈一下你对浏览器内核的理解？常见的浏览器内核？

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

html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？

新增功能：

  • 绘画canvas
  • 用于媒介回放的video和audio元素
  • 本地离线存储localStorage长期存储数据，浏览器关闭不丢失数据
  • sessionStorage的数据在浏览器关闭后自动删除
  • 语义化更好的内容元素（article、footer、header、nav等）以及表单元素（calendar、date、time、email、url、search）
  • 新技术WebWorker、WebSocket

兼容性处理：

  • 为了支持html5新标签，IE8/7/6支持通过document.createElement方法产生新标签，并添加默认样式
  • 使用成熟框架html5shim
<!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn
    /trunk/html5.js"</script>
 <![endif]-->

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

  • 用正确的标签做正确的事
  • html语义化让页面的内容结构化，结构更清晰，便于浏览器、搜索引擎解析，利于seo
  • 即使在没有CSS的情况下也以一种文档格式显示，并且容易阅读
  • 使阅读源代码的人便于对网站进行阅读理解维护

对BFC规范(块级格式化上下文：block formatting context)的理解？

一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

  • 一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
  • 较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
  • 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
    它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
  • 常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
  • 在布局上有了比以前更加灵活的空间。

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧。

  1. png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8。
  2. 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
  3. IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性;解决方法:统一通过getAttribute()获取自定义属性。
  4. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示，可通过加入 CSS 属性 -webkit-text-size-adjust: none;解决。

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

  • 在线的情况下，浏览器发现Html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器会根据manifest文件的内容下载相应的资源并进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么会重新下载文件中的资源并进行离线存储。
  • 离线的情况下，浏览器会直接使用离线资源。

如何解决跨域问题?

jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

什么是Ajax？创建一个Ajax的过程是怎么样的？

概念：
异步请求，向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。
过程：

  1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象；

  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息；

  3. 设置响应HTTP请求状态变化的函数；

  4. 发送HTTP请求；

  5. 获取异步调用返回的数据；

  6. 使用JavaScript和DOM实现局部刷新；

你有用过哪些前端性能优化的方法？

  1. 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

  2. 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数.

  3. 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

  4. 当需要设置的样式很多时设置className而不是直接操作style。

  5. 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

  6. 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

  7. 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳

  8. 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的.

http状态码有那些？分别代表是什么意思？

  • 100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

  • 200 OK 正常返回信息

  • 201 Created 请求成功并且服务器创建了新的资源

  • 202 Accepted 服务器已接受请求，但尚未处理

  • 301 Moved Permanently 请求的网页已永久移动到新位置。

  • 302 Found 临时性重定向。

  • 303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。

  • 304 Not Modified 自从上次请求后，请求的网页未修改过。

  • 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。

  • 401 Unauthorized 请求未授权。

  • 403 Forbidden 禁止访问。

  • 404 Not Found 找不到如何与 URI 相匹配的资源。

  • 500 Internal Server Error 最常见的服务器端错误。

  • 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

注：这题胜在区分度高，知识点覆盖广，再不懂的人，也能答出几句，而高手可以根据自己擅长的领域自由发挥，从URL规范、HTTP协议、DNS、CDN、数据库查询、 到浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等

详细版：

  • 1、浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;

  • 2、调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;

  • 3、通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;

  • 4、进行HTTP协议会话，客户端发送报头(请求报头);

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

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

  • 7、处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;

  • 8、浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;

  • 9、文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;

  • 10、页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等，页面显示完成。

简洁版：

  • 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
  • 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
  • 浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
  • 载入解析到的资源文件，渲染页面，完成

谈谈你对浏览器本地缓存的理解？

概念：本地缓存是指浏览器请求资源时命中了浏览器本地的缓存资源，浏览器并不会发送真正的请求给服务器了。
优点：

  • 减少了冗余的网络传输，省钱了
  • 减少了服务器的压力
  • Web缓存能够减少延迟和网络阻塞，进而减少显示某个资源所用的时间
  • 加快客户端加载网页的速度

执行过程：

  • 第一次浏览器发送请求给服务器，此时浏览器还没有本地缓存副本，服务器返回资源给浏览器，响应码是200 OK，浏览器接受到资源后，把资源和对应的响应头一起缓存下来。
  • 第二次浏览器准备发送请求给服务器时，浏览器会先检查上一次服务器返回的响应头信息中Cache-Control，他的值是一个相对值，单位为秒，表示资源在客户端缓存的最大有效期限，计算过期时间后对比当前时间，如果本地缓存未过期，那么命中缓存，不再请求服务器。缓存是否过期判断依据Cache-Control、Expires。
  • 若没有命中，浏览器就会把请求发送到服务器，进入缓存协商阶段。
  • 浏览器与服务器进行缓存协商的过程中，会询问浏览器中的资源是否为最新资源，是否需要更新，此时服务器做出判断，如果缓存和服务器端资源的最新版本一致，则不更新该资源，服务器端返回304 Not Modified 状态码，如果浏览器端资源已经是旧版本了，服务器端则返回最新资源，状态码就是200 OK。判断资源是否最新：Last-Modified/If-Modified-Since 与 ETag/If-None-Match。

简述JavaScript原型、原型链概念及其特点。

  • 每个对象都会在其内部初始化一个属性，就是prototype（原型），当我们访问一个对象属性时，如果这个对象的内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，就会一直找下去，这就是原型链。
  • 关系：instance.constructor.prototype = instance.proto。
  • 特点：JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
  • 当我们需要一个属性时，JavaScript引擎会先看当前对象中是否有该属性，如果没有的话，就会查找他的prototype对象中是否有该属性，如此递推，一直检索到Object内建对象。

Javascript如何实现继承？如何判断对象是否是继承过来？

继承方式：构造继承、原型继承、实例继承、拷贝继承
常用继承方式：构造函数与原型混合方式

function Parent(){
    this.name = 'wang';
}
function Child(){
    this.age = 28;
}
Child.prototype = new Parent(); // 继承了Parent，通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name); // 得到被继承的属性

JavaScript中hasOwnProperty函数方法是返回一个布尔值，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。object.hasOwnProperty(proName)

new操作符具体干了什么呢?

  • 创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。
  • 属性和方法都被加入到this引用的对象中了。
  • 新创建的对象由this所引用，并且隐式的返回this。
var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

谈谈对this对象的理解。

  • this总是指向函数的直接调用者（而非间接调用者）；
  • 如果有new关键字，this指向new出来的那个对象；
  • 在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。

Javascript作用链域？

  • 全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。
  • 当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，直至全局函数，这种组织形式就是作用域链。

什么是闭包？为什么要用它？ 它的特性？

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
特性：

  • 函数内再嵌套函数内部函数
  • 可以引用外层的参数和变量
  • 参数和变量不会被垃圾回收机制回收

Vue是如何实现双向绑定的？

Object.defineProperty（vue）：劫持数据的 getter 和 setter。

如何理解Vue的Virtual DOM？使用Virtual DOM的必要性？

  • 虚拟节点类，将真实 DOM 节点用 js 对象的形式进行展示，并提供 render 方法，将虚拟节点渲染成真实 DOM。
  • 节点 diff 比较：对虚拟节点进行 js 层面的计算，并将不同的操作都记录到 patch 对象。
  • re-render：解析 patch 对象，进行 re-render

必要性：

  • 创建真实DOM的代价高：真实的 DOM 节点 node 实现的属性很多，而 vnode 仅仅实现一些必要的属性，相比起来，创建一个 vnode 的成本比较低。
  • 触发多次浏览器重绘及回流：使用 vnode ，相当于加了一个缓冲，让一次数据变动所带来的所有 node 变化，先在 vnode 中进行修改，然后 diff 之后对所有产生差异的节点集中一次对 DOM tree 进行修改，以减少浏览器的重绘及回流。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容