前端面试题

最新推荐文章于 2024-08-02 11:49:35 发布
最新推荐文章于 2024-08-02 11:49:35 发布
阅读量99 收藏
点赞数
文章标签： 面试 javascript 网络 ViewUI
原文链接：https://juejin.im/post/5bab5f625188255c600423b7
版权

HTML面试问题

  1. Doctype作用？标准模式和兼容模式有什么区别？

    1. doctype写在html第一行，doctype规定了浏览器的解析器用什么标准去解析文档，doctype缺失或者或者格式不正确,会导致文档以兼容模式呈现。
    2. 标准模式的排版和js运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，浏览器以较宽松的向后兼容的方式显示，以确保能在旧版本的浏览器上也能运行。

  2. html5为什么只需要写？

    1. html5不是基于SGML的，不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。
    2. html4是基于SGML的，需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

  3. 行内元素有哪些？块级元素有哪些？空元素有哪些？

    1. 行内元素：input、span、img、a
    2. 块级元素：div、p、h1
    3. 空元素：input、img

  4. 页面导入样式时，使用link和@import有什么区别？

    1. link属于xhtml标签，不仅能引入css,还能引入RSS,定义rel连接属性等作用。@import是css提供的，只能用来引入css。
    2. 引入的时间点不一样：link是在页面加载时同时加载，@import引入的css是等页面加载完再加载的。
    3. imprt是css2.1提出的，只有在ie5以上的浏览器支持，link是xhtml标签，无兼容问题。
    4. link支持使用js控制DOM去改变样式，而@import不支持。

  5. 介绍一下你对浏览器内核的理解？

    主要分为渲染引擎和js引擎。

    渲染引擎：负责取得网页的内容,引入css,计算网页的显示方式，输出到显示器。

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

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

    1. Trident：IE、360、搜狗
    2. Gecko：Netscape6及以上，FireFox
    3. Presto：Opera7及以上(原为Presto,现为Blink)
    4. Webkit内核：Safari，Chrome(Chrome:Blink是Webkit的分支)

  7. html5有哪些新特性，移除了哪些元素？如何处理html5新标签的浏览器兼容问题？如何区分HTML和HTML5?

    1. 新增了语义化标签和其他一些标签例如canvas、video、audio,新增了localStorage、sessionStorage、Geolocation、WebSocket
    2. 去除了一些纯表现元素big、center 和对可用性产生负面影响的元素frame
    3. 通过doctype区分

  8. 简述一下你对html语义化的理解？

    1. 用正确的标签做正确的事。
    2. 页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析。
    3. 没有css的情况下，也以文档格式显示，容易阅读。
    4. 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字权重，有利于seo
    5. 使阅读源代码的人对网站更容易的分块，便于阅读维护。

  9. html5的离线存储怎么使用，工作原理能不能解释一下？

    1. 在html标签上添加上manifest="cache.manifest"

    2. 在cache.manifest文件中配置

      #CACHE MANIFEST
#v0.11

CACHE:
js/app.js
css/style.css

NETWORK:
net.png

FALLBACK:
//offline.html
复制代码

    3. 工作原理：

      1. 在线情况下，浏览器会发现html上有manifest属性，它会请求manifest文件，第一次进入app时,浏览器会根据manifest配置文件的内容下载相应的资源并进行离线存储。如果已经访问过app并且资源已经离线存储，那么浏览器就会使用离线的资源进行加载页面，浏览器会对比新旧manifest文件，如果文件有改变，那么就会重新下载所有的资源文件并进行离线存储。
      2. 离线状态下，直接使用离线下载好的资源文件。

    4. 会出现的问题：

      1. 如果有一个资源文件下载失败，那么所有的资源文件还是会用原先旧的资源文件
      2. 如果manifest没有更新，那么还是会使用旧的资源文件
      3. manifest更新了，但是http的缓存规则告诉浏览器本地缓存的manifest文件没有过期，这种情况下还是会使用旧的manifest文件，所以不会下载新的资源文件，还是使用旧的资源文件。
      4. 更新资源之后，只有下次打开才生效，如果要马上生效，可以使用window.applicationCache.swapCache()方法来使之生效。浏览器会先使用离线存储的资源，然后再会去检查manifest文件有没有更新，所以需要到下次打开页面才能生效。

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

  11. cookie数据始终在同源的http请求中携带，在客户端和终端之间来回传递的，一般会加密，是用来验证身份的。sessionStorage和localStorage仅保存在客户端。

  12. 存储量大小：cookie不超过4kb；其他2个在5M或者更大。

  13. 何时销毁：cookie会设置有效期，过了有效期就过期了；sessionStorage窗口关闭就销毁了；localStorage窗口除非手动删除，不然一直会保存在浏览器中。

  14. iframe有哪些缺点？

  15. label的作用是什么？是怎么用的？

    label的作用是当用户选择标签时，浏览器会将焦点自动指向label所指向的表单控件。

  16. html5的form如何关闭自动完成功能？

    给form或者需要关闭自动完成功能的标签添加autocomplete=off。

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

    1. 使用localStorage、事件监听。
    2. 使用cookie、setInterval。
    3. ShareWorker（同源）
    4. WebSocker（长链接）

  18. webSocket如何兼容低浏览器？

  19. 页面可见性(Page Visibility API)可以有哪些用途？

  20. 如何在页面上实现一个圆形的可点击区域？

    1. border-radius
    2. js获取坐标点
    3. map+area或者svg

  21. 实现不使用border画出1px高的线，在不同浏览器的标准模式和怪异模式下都能保持一样的效果。

    .line{
  height:1px;
  overflow:hidden;
  background:red;
}
复制代码

  22. 网页验证码是干嘛的，是为了解决什么问题。

    1. 为了区分是计算机还是人的公共全自动程序，防止破解密码，刷票、论坛灌水。
    2. 有效防止黑客对某一特定的注册用户用特定程序暴力破解方式进行不断的登录尝试。

  23. title与h1的区别，b与strong的区别，i与em的区别

css面试题

  1. 介绍一下标准的css盒子模型？

    1. css盒子模型：IE盒模型和w3c标准盒模型。
    2. 盒模型：content+padding+border+margin。
    3. IE盒模型，content+padding+border;w3c标准盒模型，content。

  2. css选择符有哪些？哪些属性可以继承？

    1. id选择器、类选择器、标签选择器、后代选择器、子选择器、相邻选择器、通配符选择器、属性选择器、伪类选择器
    2. 可继承的样式：font-size、color、font-family
    3. 不可继承的样式：border、padding、margin、width、height

  3. css优先级算法如何计算？

    同权重：标签内部>style标签中>外部样式表

    ​ ！important>id>class>tag

    ​ ！important比内联优先级高

  4. css新增伪类有哪些？

    after、before、enabled、disabled、checked、first-type-of

  5. 如何居中div？

    1. 水平居中：
      1. 行内元素：text-align:center;
      2. margin:0 auto;
    2. 水平垂直居中：
      1. flex布局：justify-content:center;+align-items:center;
      2. absolute+margin（子元素宽高的一半的负值）
      3. absolute+margin:auto;
      4. absolute+translate
      5. display:table-cell;+text-align:center;+vertical-align:middle;+父元素有具体的宽高

  6. display有哪些值？说明他们的作用。

    1. none：不显示，并从文档流中移除。
    2. block：块级元素类型，默认宽度是父元素的宽度，可以设置宽高，前后要换行。
    3. inline：行内元素类型，默认宽度是内容宽度，不可以设置宽高，同行显示。
    4. inline-block：默认宽度是内容宽度，可以设置宽高，同行显示。
    5. list-item：像块元素类型一样显示，并添加样式列表标记。
    6. table：此元素会作为块级表格来显示。
    7. inherit：继承父元素属性的值。

  7. position的值relative和absolute定位原点是？

    1. absolute：生成绝对定位元素，相对于position不是static的第一个父元素进行定位。
    2. relative：生成相对定位元素，相对正常位置进行定位。
    3. fixed：生成绝对定位元素，相对于浏览器窗口进行定位。（老IE不支持）
    4. static：默认值，没有定位。元素出现在正常的流中。（忽略top/bottom/left/right/z-index）
    5. inherit：从父元素继承position的值。

  8. css3有哪些新特性？

    1. 新增了很多选择器
    2. transition过渡、animation动画、transform形状转换
    3. 边框：border-radius、box-shadow、border-image
    4. 背景：background-clip、background-origin、background-size、background-break
    5. 文字效果：word-wrap、text-overflow、text-shadow、text-decoration
    6. 渐变：线性渐变、径向渐变、圆锥渐变。
    7. 字体：@font-face
    8. 用户界面：盒模型、resize、outline-offset
    9. 反射
    10. 颜色
    11. 混合模式
    12. 媒体查询
    13. 布局：flex布局、grid布局、多列布局

  9. 请解释一下css3的flex布局，以及适用场景。

    1. ​

  10. 用纯css创建一个三角形的原理是什么？

利用border，三个面的border-color设置为transparent

  1. 一个满屏“品”字布局如何设计？

  2. css多列等高如何实现？

  3. 经常遇到的浏览器的兼容性问题有哪些？原因，解决方法？常用的hack技巧？

    1. 浏览器默认的margin/padding不同。统一设置*{margin:0;padding:0;}
    2. Chrome浏览器中文界面下会将小于12px的字体强制按照12px显示。-webkit-text-size-adjust:none;
    3. IE下event对象有x/y属性，但是没有pageX/pageY属性。firefox下则反之。用条件注释的方式解决。

  4. li和li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

  5. 为什么要初始化css样式？

    因为浏览器兼容问题，不同浏览器之间的标签默认属性值不同。

  6. absolute的containing block(容器块)计算方式跟正常流有什么不同？

  7. css里的visibility属性有个collapse属性值是干嘛用的?在不同浏览器下有什么区别？

  8. position跟display、margin、overflow、float这些特性相互叠加后会怎么样？

  9. 对BFC规范(块级格式化上下文)的理解？

    Block Formatting Context,BFC外部元素和内部元素互不影响。

  10. css定义的权重。

  11. 请解释一下为什么需要清除浮动？清除浮动的方式。

    1. 是为了清除使用浮动元素之后产生的影响，不影响其他元素的布局。浮动的元素，高度会坍塌，高度的坍塌会使页面后面的布局不能正常显示。
    2. 清除浮动的方式：overflow:hidden; clear:both;

  12. 什么是外边距合并？

    2个相邻块级元素的垂直外边距会合并。合并的原则是取两者边距的最大值。

  13. zoom:1的清除浮动原理？

  14. 移动端的布局用过媒体查询吗？

  15. 使用css预处理器吗？喜欢哪个？

  16. css优化、提高性能的方法有哪些？

  17. 浏览器是怎么样解析css选择器的？

  18. 在网页中应该使用奇数还是偶数字体？为什么？

  19. margin和padding分别适合什么场景使用？

  20. 抽离样式模块怎么写

  21. 元素竖向的百分比设定是相对于容器的高度吗？

  22. 全屏滚动的原理是什么?用到了css的哪些属性？

  23. 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的ie?

  24. 视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动再次出现，和只出现一次分别怎么做？）

  25. ::before和:after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

  26. 如何修改chrome记住密码后自动填充表单的黄色背景?

  27. 对line-height的理解。

  28. 设置元素浮动后，该元素的display值是多少？

  29. 怎么让chrome支持小于12px的文字。

  30. 让页面的字体变清晰，变细，用css怎么做？

  31. font-style属性可以让它赋值为“oblique”,oblique是什么意思？

  32. position:fixed;在android、ios下无效怎么处理？

    fixed元素是相对于整个页面固定位置的，移动端当页面滚动时，滚动的是viewport。

    在html头部添加viewport的设置。

  33. 如果需要手动写动画，你认为最小时间间隔是多久？为什么？

    多数显示器的频率是60hz，也就是1秒钟60帧，1000/60=16.67ms。

  34. display:inline-block什么时候会显示间隙？

  35. overflow:scroll不能平滑滚动的问题怎么处理？

  36. 有一个高度自适应的div，里面有2个div,1个高度100px,希望另外一个填满剩下的高度。

  37. png、jpg、gif这些图片格式解释一下，分别什么时候用。有没有了解过webp?

  38. 什么是cookie隔离？

  39. style标签写在body后与body前有什么区别？

  40. 什么是css预处理器/后处理器？

  41. rem布局的优缺点？

  42. rem和em有什么区别？

    rem是根据根元素的font-size大小定的；em是根据父元素的font-size大小定的。

javascript面试题

  1. 介绍js的基本数据类型。

    1. number
    2. string
    3. boolean
    4. undefined
    5. null
    6. ECMAScript2015新增了Symbol(创建后独一无二且不可变的数据类型)

  2. 介绍js有哪些内置对象？

    Object是javascript中所有对象的父对象。

    数据封装类对象：Object、Number、String、Boolean、Array

    其他对象：Function、Arguments、Math、Date、RegExp、Error

  3. 说几条javascript的基本规范？

  4. javascript有几种类型的值？你能画一下他们的内存图吗？

    1. 基本数据类型:number、string、boolean、undefined、null、symbol，在栈内存中
    2. 引用类型:Object、Function，在堆内存中

  5. 如何将字符串转化为数字，例如‘12.3b’?

  6. 如何实现数组的随机排序？

    1. sort
    2. 冒泡排序：遍历数组中的元素，一次比较2个，如果顺序错误，就交换位置。
    3. 快速排序：将数组分为2部分，一部分是大于某个值，另一部分是小于此值。(需要递归，这个值是数组中的值)
    4. 插入排序：
    5. 希尔排序：

  7. javascript创建对象的几种方式？

    1. 对象字面量：
    2. new
    3. Object.create()

  8. eval是做什么的？

  9. 什么是window对象？什么是document对象？

    1. window对象，全局对象。
    2. document对象，代表整个html文档，可以用来访问页面中的所有元素。

  10. null、undefined的区别？

null 表示一个对象是“没有值”的对象，也就是值为“空”。

undefined 表示一个变量声明了，没有赋值。

  1. 写一个通用的事件侦听器函数。

  2. ["1","2","3"].map(parseInt)答案是什么？

  3. 什么是闭包？为什么要用它？

    1. 闭包就是将函数内部和函数外部连接起来的一座桥梁。
    2. 闭包的作用：
      1. 在函数外部读取函数内部的变量
      2. 将创建的变量的值始终保存在内存中，以供本地环境使用。

  4. javascript代码中的“use strict”;是什么意思？使用它的区别是什么？

    1. 是一种ECMAScript5添加的严格运行模式，这种模式使得javascript在更严格的条件下运行，能够提高编译器效率，增加运行速度。也为未来新版本的Javascript标准化做铺垫。
    2. 使js编码更加规范化的模式，消除javascript语法的一些不合理、不严谨之处，减少一些怪异行为。默认之处的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值；全局变量的显式声明，函数必须声明在顶层，不允许在非函数代码块中声明函数，arguments.call也不允许使用；消除代码运行的一些不安全之处，保证代码运行的安全，限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同。

  5. 如何判断一个对象是否属于某个类？

    if(a instanceOf Person){
  alert("yes");
} 
复制代码

  6. new操作符具体干了什么？

  7. javascript,有一个函数，执行时对象查找时，永远不会去查找原型。

    hasOwnProperty。

  8. 对json的了解。

    json是轻量级的数据交换格式。它是javascript的一个子集，数据格式简单，易于读写，占用带宽小。

  9. ajax是什么？如何创建一个ajax?

    1. ajax全称，Asynchronous Javascript And Xml
    2. 创建XMLHttpRequest对象，也就是创建一个异步调用对象。
    3. 创建一个新的http请求，并指定请求地址，请求方法。
    4. 设置响应Http请求状态变化的函数
    5. 发送http请求
    6. 获取异步调用返回的数据
    7. 使用js和dom实现局部刷新

  10. ajax解决浏览器缓存问题？

    1. 在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modifier-Since","0");
    2. anyAjaxObj.setRequestHeader("Cache-Control","no-cache");
    3. url后添加随机数
    4. url后添加时间戳
    5. jquery的话$.ajaxSetup({cache:false})

  11. 同步和异步的区别？

    同步，全部在一个线程上完成，不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.

  12. 如何解决跨域问题看这

    1. 设置document.domain
    2. 有src的标签
    3. JSONP
    4. navigation ie6/7
    5. 跨域资源共享(CORS) Access-Control-Allow-Origin
    6. window.postMessage()

  13. 页面编码和被请求的资源编码不一致怎么处理？

  14. 服务器代理转发时，如何处理cookie?

  15. 模块化开发怎么做？AMD、CMD规范区别？requireJS核心原理是什么？（如何动态加载的？如何避免多次加载？如何缓存的？）

    1. CommonJS,用在服务器端规范，node.js用的就是CommonJS
    2. AMD，Asynchronous Module Definition,异步模块定义，推崇依赖前置，RequireJs加载模块后会缓存，多次加载后得到同一个对象。
    3. CMD，Common Module Definition,通用模块定义，推崇依赖就近，SeaJs

  16. JS模块加载器的轮子怎么造，如何实现一个模块加载器？

  17. 谈谈你对ECMAScript6的了解。

    1. 参数设置默认值
    2. 模板对象
    3. 多行字符串
    4. 解构赋值
    5. 箭头函数
    6. Promise
    7. let和const let限制块级作用域 var限制函数作用域 const限制块级作用域+定义常量
    8. Class
    9. Module export import

  18. Promise的理解？

    Promise对象有2个特点：

    1. 对象的状态不受外界影响，有3种状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)。
    2. 一旦状态改变，就不会再变。

    Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由javascript引擎提供，不用自己部署。

    const promise = new Promise(function(resolve,reject){
  //somecode
  if(/**异步操作成功*/){
     return resolve();
  }else{
  	return reject();
  }
})
复制代码

    Promise实例生成后，可以使用then方法分别指定resolved状态和rejected状态的回调函数。

    promise.then(function(value){
  
},function(error){
  
})
复制代码

  19. 异步加载JS方式有哪些？

    1. script标签添加async="async"，异步加载
    2. script标签添加defer="defer"，延时加载
    3. 动态创建script标签
    4. 使用jquery:$document.ready(function(){})

  20. document.write和innerHTML的区别。

    1. document.write会重绘整个页面。
    2. innerHTML只会重绘部分页面

  21. DOM操作——怎样添加、移除、替换、插入、复制、创建和查找节点？

    1. 添加节点：appendChild()
    2. 移除节点：removeChild()
    3. 替换节点：replaceChild()
    4. 插入节点：insertBefore()
    5. 复制节点：importNode()
    6. 创建节点：createElement()、createTextNode()
    7. 查找节点：getElementById()、getElementsByClassName()、getElementsByTagName()、getElementsByName()、querySelector()、querySelectorAll()

  22. 什么是伪数组？怎么转换成数组？

    1. 伪数组是一个含有length属性的json对象，它是按照索引的方式存储数据，它并不具有数组的一些方法。
    2. 通过 var 数组= Array.prototype.slice.call(伪数组); 转换成真正的数组。

  23. call()和apply()的区别？还有bind()？

    1. 三者都是用来改变this对象的指向。
    2. 第一个参数都是this要指向的对象。
    3. 三者都可以利用后续参数传参。
    4. call()和apply()对函数直接调用,立即执行；bind()返回的是函数，回调执行。
    5. call()的第二个参数开始后续参数是一一对应的，apply()第二个参数是一个数组，数组中的值和后续参数一一对应。因此当参数不确定数量时，使用apply();

  24. 数组和对象有哪些原生方法？

    1. 数组

      方法描述
      concat()连接2个或更多的数组，并返回结果
      join()把数组的所有元素放入字符串，并用指向的分隔符分隔
      pop()删除并返回数组的最后一个元素
      push()向数组末尾添加一个或更多的元素，并返回新的长度
      reverse()将数组反转
      shift()删除并返回数组的第一个元素
      slice()从某个已有的数组返回选定的元素
      sort()数组排序
      splice()删除元素，并向数组添加新元素
      unshift()向数组开头添加一个或更多元素，并返回新的数组长度
      toString()把数组转换为字符串，并返回
      toLocaleString()把数组转换为本地数组，并返回结果
      toSource()返回该对象的源代码
      valueOf()返回数组对象的原始值

    2. Object对象实例方法

      方法描述
      valueOf()返回当前对象对应的值。
      toString()返回当前对象对应的字符串形式。
      toLocaleString()返回当前对象对应的本地字符串形式。
      hasOwnProperty()判断某个属性是否为当前对象自身的属性，还是继承自原型对象的属性。
      isPrototypeOf()判断当前对象是否为另一个对象的原型。
      propertyIsEnumerable()判断某个属性是否可枚举。

  25. ECMAScript6怎么写class,为什么会出现class这东西？

    class Cat{
  constructor(name){
    this.name=name;
  }
  makeSound(){
    alert("喵喵喵");
  }
}
//一定要new
const cat = new Cat("猫");
cat.makeSound();

//表达式
const Cat = class{
  makeSound(){
    alert("喵喵喵");
  }
}

//不存在变量提升,与继承有关 
new Foo(); //ReferenceError
class Foo{}

//静态方法 静态方法中的this指向的是类，不是类的实例
//静态属性和和实例属性  还没有静态属性 提案中
复制代码

  26. JS怎么实现一个类？怎么实例化这个类？看这

    1. 构造函数法

      function Cat(){
  this.name="猫";
}

//类的属性和方法可以定义在构造函数的prototype对象上
//为什么不用this.makeSound?
//如果用this.makeSound每次创建对象都会复制makeSound到这个对象上，开销大
Cat.prototype.makeSound = function(){
   alert("喵喵喵");
}

var cat = new Cat();
alert(cat.name)；
cat.makeSound();
复制代码

    2. Object.create()法 变量声明法

      var Cat = {
  name:"猫",
  makeSound:function(){
    alert('喵喵喵');
  }
}

var cat = Object.create(Cat);
alert(cat.name);
cat.makeSound();

//不兼容的老浏览器
if(!Object.create()){
  Object.create = function(o){
    function F(){
    }
    F.prototype = o;
    return new F();
  }   
}
复制代码

    3. 极简主义法

             var Cat = {
         createNew:function(){
           var cat = {};
           cat.name="猫";
           car.makeSound=function(){
             alert("喵喵喵");
           }
           return cat； 
         }
       }
    
       var cat1 = Cat.createNew();
       alert(cat1.name);
       cat1.makeSound();
复制代码

  27. 继承？

    var Animal = {
  createNew:function(){
    var animal = {};
    animal.sleep = function(){
      alert("睡觉");
    }
    return animal;
  }
}

var Cat = {
  sound:'喵喵喵',//静态属性 共享
  createNew:function(){
    var cat = Animal.createNew();
    var name = "猫";//私有属性
    cat.name= name;
    cat.makeSound = function(){
      alert(Cat.sound);
    };
    cat.changeSound = function(x){
      Cat.sound = x;
    };
    return cat;
  }
}

var cat1 = Cat.createNew();
var cat2 = Cat.createNew();
cat1.sleep();
cat1.makeSound();
cat2.makeSound();
cat1.changeSound("汪汪汪");
cat1.makeSound();
cat2.makeSound();
复制代码

  28. javascript原型、原型链？有什么特点。

    每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。
关系：instance.constructor.prototype = instance.__proto__

特点：
JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

 当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，
 就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。
	function Func(){}
	Func.prototype.name = "Sean";
	Func.prototype.getInfo = function() {
	  return this.name;
	}
	var person = new Func();//现在可以参考var person = Object.create(oldObject);
	console.log(person.getInfo());//它拥有了Func的属性和方法
	//"Sean"
	console.log(Func.prototype);
	// Func { name="Sean", getInfo=function()}
复制代码

  29. javascript作用域链？

    当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从父级(词法层面上的父级)执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。

  30. javascript中的作用域与变量声明提升?

    全局作用域和局部作用域。

    变量声明提升，变量会先声明，在任意代码执行前先声明。

  31. 谈谈对this的理解。

    1. this,指向函数的直接调用者。
    2. 如果有new关键字，this指向new出来的那个对象
    3. 在事件中，this指向触发这个事件的对象，在IE的attachEvent中this总是指向全局对象。
    4. 在箭头函数中，没有自己的this,它使用执行上下文（函数或全局）的this值。
    5. apply/call/bind，this指向传递的第一个参数，如果第一个参数不传或者为null/undefined，则指向全局对象。
    6. html中，this指向html元素。

  32. 如何编写高性能的javascript？

    1. 避免循环引用，防止内存泄漏
    2. 尽量不要使用for...in，使用for
    3. 建议对象缓存处理，特别是DOM访问
    4. 不要在函数内进行过深的嵌套判断
    5. 建议避免在函数内部返回一个未声明的变量，会污染外部变量
    6. var声明变量，建议写在多行。

  33. 哪些操作会造成内存泄漏？

    内存泄漏指的是由于疏忽或错误造成程序未能释放已经不再使用的内存。

    垃圾回收机制2种方式：标记清除和引用计数。

    意外的全局变量引起的内存泄漏、闭包的使用不当、没有清理DOM元素的引用、被遗忘的定时器或回调、子元素存在引用父元素删除引起的内存泄漏、循环、控制台日志、EventListener

  34. What is a Polyfill?

    polyfill是一个js库，是为了抚平不同浏览器内核之间对js实现的差异。

  35. 我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？

    会执行2次事件，先执行捕获事件，再执行冒泡事件。

  36. 什么是事件？IE与火狐的事件机制有什么区别？

    IE事件对象只有x、y,没有pageX、pageY。

    火狐反之。

  37. 冒泡事件和捕获事件。

    1. 事件捕获是从上至下触发事件。
    2. 事件冒泡是从下至上触发事件。
    3. 绑定事件方法的第三个参数是否为事件捕获。默认为false,事件冒泡。
    4. event.stopPropagation()会阻止冒泡

  38. 什么是JS的函数节流和函数防抖？

    1. 函数节流指的是js函数一定时间内只跑一次。应用场景：页面滚动
    2. 函数防抖，频繁触发的情况下，只有足够的空闲时间，才执行代码一次。应用场景：用户注册时手机号验证和邮箱验证。

ECMAScript6相关

  1. Object.is()与原来的比较操作符“===”、“==”的区别？
  2. ES6是如何编译成ES5的？
  3. css-loader的原理？

前端框架

  1. angular2+中的编译模式？有什么区别？

    1. jit编译模式

      1. 使用typescript开发angular应用
      2. 使用tsc来编译这个应用的typescript代码
      3. 打包
      4. 压缩
      5. 部署
      6. 浏览器端下载所有代码
      7. angular启动
      8. angular在浏览器中开始jit编译过程，例如生成app中各个组件的js代码
      9. 应用页面渲染

    2. aot编译模式

      1. 使用typescript开发angular应用
      2. 使用ngc来编译应用
        1. 使用angular编译器对模板进行编译，生成typescript代码
        2. typescript代码编译成js代码
      3. 打包
      4. 压缩
      5. 部署
      6. 浏览器端下载所有代码
      7. angular启动
      8. 应用页面渲染

      两者的区别在于：

      1. 编译过程发生的时机
      2. jit生成的是js代码，aot生成的是ts代码。这是因为jit在浏览器中编译，没有必要生成ts代码，而是直接生成js代码。

其他问题

  1. Webpack热更新实现原理？
  2. Node.js的适用场景？

转载于:https://juejin.im/post/5bab5f625188255c600423b7

weixin_34326558
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2023最新前端面试题总结
05-30
"前端面试题总结" 以下是根据给定文件信息生成的相关知识点： 浏览器兼容性 在前端开发中，浏览器兼容性是一个非常重要的问题。不同的浏览器对 HTML、CSS、JavaScript 的解析和执行方式不同，这导致了同一个页面...
前端面试总结二
我是谁的博客
10-18 452
1.关于同步加载、异步加载、延迟加载、预加载（form和ajax之间的区别） 同步加载： <script src="http://yourdomain.com/script.js"></script> （阻塞模式）会阻止浏览器的后续处理，停止对后续文件的解析、执行，如图像的渲染。浏览器之所以会采用同步模式，是因为加载的js文件中对dom的操作、重定向、输出documen...
前端面试题：前端框架面试题大全
06-21
前端面试题：前端框架面试题大全； 前端面试题：前端框架面试题大全； 前端面试题：前端框架面试题大全； 前端面试题：前端框架面试题大全； 前端面试题：前端框架面试题大全； 前端面试题：前端框架面试题大全； ...
100道前端面试题.pdf
07-08
整理了100道前端面试官必问的面试题，避免内卷，走上高薪之路
前端面试题汇总.pdf
01-25
前端面试题汇总主要涵盖HTML和CSS相关的重要知识点，旨在考察面试者对于网页构建的基础知识、浏览器兼容性、页面性能优化以及SEO策略等的理解。以下是对这些面试题的详细解析： 1. **浏览器测试**：面试者应熟悉...
程序员找工作之数据结构面试题总结分析
学无止境，止于至善
08-02 447
栈简述什么是栈？栈的内存是怎么分配的？栈溢出的原因以及解决方法？栈的两个应用：括号匹配是怎么应用的？简述栈和队列的区别？链表简述什么是链表？简述链表的分类？链表与数组的区别？链表类型有哪些？如何使用队列实现堆栈？队列简述什么是队列？简述队列的使用场景？树简述什么是二叉树？简述什么是满二叉树？简述什么是完全二叉树？简述什么是平衡二叉树（AVL Tree）？简述什么是排序二叉树？简述什么是红黑树？简述什么是B-TREE？
【Story】《程序员面试的“八股文”辩论：技术基础与实际能力的博弈》
EleganceJiaBao的博客
07-30 1181
“八股文”在程序员面试中扮演了重要的角色，但它并不是评价一个程序员能力的唯一标准。面试过程应结合理论知识、实际编程能力、项目经验和解决问题的能力等多个方面，综合评估候选人的综合素质。通过合理的面试考察方式，能够确保招聘到的程序员具备扎实的技术基础和实际工作能力，满足企业的技术需求。
前端面试：项目细节重难点问题分享（十四）
weixin_49062485的博客
08-02 529
更多详情：爱米的前端小笔记（csdn~xitujuejin~zhiHu~Baidu~小红shu）同步更新，等你来看！都是利用下班时间整理的，整理不易，大家多多👍💛➕🤔哦！你们的支持才是我不断更新的动力！
Java 面试常见问题之——为什么重写equals时必须重写hashCode方法
一名资深Java工程师的技术分享
08-01 324
重写 equals 方法时重写 hashCode 方法可以保证对象在哈希相关的数据结构中的行为符合预期，保持一致性，并提高性能。
【前端面试】五、框架
weixin_49015558的博客
07-31 551
1 Vue2 2 Vue3 3 React 4 Angular
Python面试整理-Web开发
不务正业的猿
07-30 267
Tornado 是一个Python Web框架和异步网络库，通过使用非阻塞网络I/O，它可以扩展到数万个开放的连接，适用于长连接、WebSockets 和其他需要与每个用户保持长时间连接的应用。Django 是一个高级的Web框架，它鼓励快速开发和干净、实用的设计。Flask 是一个轻量级的Web应用框架，它非常灵活，适用于小型到中型项目，或作为构建微服务的基础。Pyramid 是一个灵活的Python Web框架，它的设计理念是能够适用于多种项目大小，从简单的Web应用到大型复杂的系统都行。
“八股文“在现代编程面试中的角色重塑：助力、阻力还是桥梁？
最新发布
Zwq的博客
08-02 1280
在科技日新月异的今天，编程已成为推动社会进步的重要力量。而在程序员招聘的舞台上，“八股文”——即一系列标准化、模式化的面试问题和技术知识点，成为了不可或缺的一环。它如同一把双刃剑，既为招聘者提供了快速筛选候选人的工具，也让部分程序员对其产生了“形式主义”的质疑。本文旨在深入探讨“八股文”在程序员面试及日常工作中的实际作用，并提出改进其学习和评估方法的建议。
【前端面试3+1】20 css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理、【二叉树的中序遍历】
qq_61798306的博客
07-30 749
本文包含八股文：css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理，算法【二叉树的中序遍历】
【简历】湘南某二本学院：前端简历指导，秋招面试通过率低
shuize123的博客
07-31 397
搜索和防抖之间有的区分，如果是有的话，可以去做一个处理，但是一般来说，这两个之间没什么太大关系，搜索和防抖，没有什么相关度，因为我们调后端接口都是异步调用，所以他不会出现卡顿现象，他的卡顿在什么地方，我觉得这个描述不太对，另外呢使用图片转载，这都是一个最小的一个事情，他就是一个基本的功能，就是可以说是都会的功能，所以亮点不够，至少这几个描述亮点还是有的，但是不够，挂号系统就没好讲了，这个依然是一个重度很高的项目。，其他的什么英语阅读，四级能力，这个不要去写了，没什么用。，又是登录，那登录这事太简单了，
前端面试宝典【设计模式】【2】
BDawn的专栏
07-31 241
工厂模式是一种创建型设计模式，它提供了一种创建对象的机制，而不暴露创建逻辑，将对象的实例化推迟到子类。工厂模式的主要目的是封装对象的创建过程，使其能够独立于客户端代码，从而提高系统的可扩展性和灵活性。工厂模式通常分为三种类型：简单工厂模式、工厂方法模式和抽象工厂模式。 模块模式是一种在 JavaScript 中实现封装和私有成员的常用设计模式。它允许你创建具有私有变量和公共方法的对象，从而避免全局命名空间的污染，并提供更好的代码组织和可维护性。模块模式通常使用立即执行的函数表达式来创建私有作用域。
Spring面试资料大全
Hello World
08-02 399
Spring是一个轻量级Java开发框架，最早有创建，目的是为了解决企业级应用开发的业务逻辑层和其他各层的耦合问题。它是一个分层的JavaSE/JavaEE full-stack（一站式）轻量级开源框架，为开发Java应用程序提供全面的基础架构支持。Spring负责基础架构，因此Java开发者可以专注于应用程序的开发。Spring最根本的使命是解决企业级应用开发的复杂性，即简化Java开发。Spring可以做很多事情，它为企业级开发提供给了丰富的功能，但是这些功能的底层都依赖于它的两个核心特性，也就是。
我们的网站被狗爬了！
努力做最接地气的编程干货分享，感谢关注
07-31 9706
最近有几只程序员博主公开 **直播教别人** 怎么爬我们的面试鸭网站，这属实是有点过分了吧？
6万字嵌入式最全八股文面试题大全及参考答案（持续更新）
大模型大数据攻城狮的专栏
07-31 194
进程上下文定义：进程上下文包含了进程执行时所需的所有信息，包括 CPU 寄存器的值、内核栈、任务控制块（TCB）等。作用：当进程被切换时，需要保存当前进程的上下文，并恢复下一个将要运行进程的上下文。中断上下文定义：中断上下文是指处理中断时 CPU 所处的状态，包括中断发生时的寄存器值等。作用：当中断发生时，CPU 会自动保存当前的上下文信息，并跳转到相应的中断处理程序。示例表格上下文描述进程上下文包含进程执行时的所有相关信息中断上下文处理中断时 CPU 所处的状态线程同步定义。
2024 前端面试题
03-26
2024年前端面试题的具体内容我无法预测，因为技术的发展是非常迅速的，未来几年前端领域可能会有新的技术和框架出现。但是，我可以给你介绍一些目前比较常见的前端面试题，供你参考： 1. HTML/CSS基础：包括HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值