前端面试题

第二章 面试题基础篇 2.1 HTML面试题 面试题：行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 面试题：页面导入样式时，使用link和@import有什么区别？ 面试题：title与h1的区别、b与strong的区别、i与em的区别？ 面试题：img标签的title和alt有什么区别？ 面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？ 2.2 CSS面试题 面试题：css背景纹路 面试题：介绍一下CSS的盒子模型 面试题：CSS选择符有哪些？哪些属性可以继承？ 面试题：CSS优先级算法如何计算？ 面试题：用CSS画一个三角形 面试题：一个盒子不给宽度和高度如何水平垂直居中？ 面试题：display有哪些值？说明他们的作用。 面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？ 面试题：清除浮动有哪些方式？ 面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？ 面试题：写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。 面试题：什么是CSS reset？ 面试题：css sprite是什么,有什么优缺点 面试题：display: none;与visibility: hidden;的区别 面试题：position有哪些值?有什么作用? 【特别多公司问】 面试题：line-height和height有什么区别？ 面试题：opacity 和 rgba区别 2.3 JavaScript基础面试题 面试题：延迟加载JS有哪些方式？ 面试题：JS数据类型有哪些？ 面试题：null和undefined的区别 面试题：JS数据类型考题 面试题：==和===有什么不同 面试题：JS微任务和宏任务 面试题：JS作用域考题 面试题：JS对象考题 面试题：JS作用域+this指向+原型 考题 面试题：JS判断变量是不是数组，你能写出哪些方法？ 面试题：slice是干嘛的、splice是否会改变原数组 面试题：JS数组去重 面试题：找出多维数组最大值 面试题：给字符串新增方法实现功能 面试题：找出字符串出现最多次数的字符以及次数 2.4 真正移动端 —— H5/C3面试题 面试题：什么是语义化标签 面试题：::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。 面试题：如何关闭iOS键盘首字母自动大写 面试题：怎么让Chrome支持小于12px 的文字？ 面试题：rem和em有什么样区别 面试题：ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 面试题：webkit表单输入框placeholder的颜色值能改变吗？ 面试题：禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片 面试题：禁止ios和android用户选中文字 面试题：自适应 [淘宝无线适配] 面试题：响应式 第三章 面试题进阶篇 3.1 JavaScript进阶面试题 面试题：new操作符具体做了什么 面试题：闭包 【必须会】 面试题：原型链 【必须会】 面试题： JS继承有哪些方式 面试题：说一下call、apply、bind区别 面试题：sort背后原理是什么？ 面试题：深拷贝和浅拷贝 面试题：localstorage、sessionstorage、cookie的区别 3.2 ES6面试题 面试题：var、let、const区别 面试题：作用域考题 面试题：将下列对象进行合并 面试题：箭头函数和普通函数有什么区别？ 面试题：Promise有几种状态 面试题：find和filter的区别 【大厂】 面试题：some和every的区别 【大厂】 3.3 webpack面试题 面试题：webpack插件 3.4 Git面试题 面试题：git常用命令 面试题：解决冲突 面试题：GitFlow 第四章 面试题框架篇 4.1 区分初中高级的 —— Vue面试题 面试题：Vue2.x 生命周期有哪些？ 1.系统自带八个 2.当一旦进入到某个组件会执行哪些生命周期 3.$el和$data在哪个阶段有 4.如果使用keep-alive会多俩个生命周期 5.如果加入keep-alive第一次进入组件会执行哪些生命周期 6.如果加入keep-alive第二次或者第N进入该组件会执行哪些生命周期 面试题：谈谈你对keep-alive的了解 面试题：v-if和v-show区别 面试题：v-if和v-for优先级 2.x 面试题：ref是什么？ 面试题：nextTick是什么？ 面试题：Vue中如何做样式穿透 面试题：scoped原理 面试题：Vuex是单向数据流还是双向数据流？ 面试题：讲一下MVVM 面试题：双向绑定原理 面试题：什么是虚拟DOM 面试题：key是干什么？ 面试题：diff算法 面试题：Vue组件传值 面试题：props和data优先级谁高？ 面试题：computed、methods、watch有什么区别？ 面试题：Vuex 面试题：Vue路由 面试题：Vue项目打包后出现空白页 4.2 微信小程序面试题 面试题：如何自定义头部？ 面试题：如何自定义底部？ 4.3 uni-app面试题 面试题：生命周期 面试题：条件编译 第五章 面试题性能优化篇

我感觉人家问你的是html与xml，xhtml的区别吧？

举个例子：普通B/S模式（同步）AJAX技术（异步） 同步：提交请求 >> 等待服务器处理 >> 处理完毕返回，这个期间浏览器不能干任何事。 异步：请求通过事件触发 >> 服务器处理（这时浏览器仍然可以运作其它事情） >> 处理完毕 普通B/S模式：浏览器/服务器模式。 Ajax技术：大概意思浏览器可以发出HTTP请求与接收HTTP响应 同步是阻塞模式，异步是非阻塞模式。 我的理解： 同步是指两个线程的运行是相关的，其中一个线程要阻塞等待另一个线程的运行。 异步是两个线程毫无相关，自己运行自己的。 同步：发送方付出数据后，等待接收方响应后才发下一个数据包的通讯方式。 异步：发送方发出数据后，不等的接收方的响应，接着发送下一个数据包的通讯方式。 我的理解 同步： 对讲机 。A和B通话，A等待B的回应，A再继续说。 A：“呼叫B哥，呼叫B哥... 听到请回答？” B：“收到！收到！完毕” A：“你妈妈喊你回家吃饭，完毕。” B：“... 收到。通话结束” 异步：我用qq或者微信跟朋友聊天 发消息 聊天。 参考： http://blog.chinaunix.net/uid-21411227-id-1826898.html

举个例子：普通B/S模式（同步）AJAX技术（异步） 同步：提交请求 >> 等待服务器处理 >> 处理完毕返回，这个期间浏览器不能干任何事。 异步：请求通过事件触发 >> 服务器处理（这时浏览器仍然可以运作其它事情） >> 处理完毕 普通B/S模式：浏览器/服务器模式。 Ajax技术：大概意思浏览器可以发出HTTP请求与接收HTTP响应 同步是阻塞模式，异步是非阻塞模式。 我的理解： 同步是指两个线程的运行是相关的，其中一个线程要阻塞等待另一个线程的运行。 异步是两个线程毫无相关，自己运行自己的。 同步：发送方付出数据后，等待接收方响应后才发下一个数据包的通讯方式。 异步：发送方发出数据后，不等的接收方的响应，接着发送下一个数据包的通讯方式。 我的理解 同步： 对讲机 。A和B通话，A等待B的回应，A再继续说。 A：“呼叫B哥，呼叫B哥... 听到请回答？” B：“收到！收到！完毕” A：“你妈妈喊你回家吃饭，完毕。” B：“... 收到。通话结束” 异步：我用qq或者微信跟朋友聊天 发消息 聊天。 参考： http://blog.chinaunix.net/uid-21411227-id-1826898.html

cookie和session有着千丝万缕的联系，本文将详细介绍2者的区别。 cookie的数据信息存放在客户端浏览器上。 session的数据信息存放在服务器上。 单个cookie保存的数据<=4KB，一个站点最多保存20个Cookie。 对于session来说并没有上限，但出于对服务器端的性能考虑，session内不要存放过多的东西，并且设置session删除机制。 cookie中只能保管ASCII字符串，并需要通过编码方式存储为Unicode字符或者二进制数据。 session中能够存储任何类型的数据，包括且不限于string，integer，list，map等。 cookie对客户端是可见的，别有用心的人可以分析存放在本地的cookie并进行cookie欺骗，所以它是不安全的。 session存储在服务器上，对客户端是透明对，不存在敏感信息泄漏的风险。 开发可以通过设置cookie的属性，达到使cookie长期有效的效果。 session依赖于名为JSESSIONID的cookie，而cookie JSESSIONID的过期时间默认为-1，只需关闭窗口该session就会失效，因而session不能达到长期有效的效果。 cookie保管在客户端，不占用服务器资源。对于并发用户十分多的网站，cookie是很好的选择。 session是保管在服务器端的，每个用户都会产生一个session。假如并发访问的用户十分多，会产生十分多的session，耗费大量的内存。 假如客户端浏览器不支持cookie： cookie是需要客户端浏览器支持的，假如客户端禁用了cookie，或者不支持cookie，则会话跟踪会失效。关于WAP上的应用，常规的cookie就派不上用场了。 运用session需要使用URL地址重写的方式。一切用到session程序的URL都要进行URL地址重写，否则session会话跟踪还会失效。 假如客户端支持cookie： cookie既能够设为本浏览器窗口以及子窗口内有效，也能够设为一切窗口内有效。 session只能在本窗口以及子窗口内有效。 cookie支持跨域名访问。 session不支持跨域名访问。

1、get是从服务器获取数据 -----"取" post是向服务器提交数据 -----“发”2、form表单默认的method为"GET"3、get将数据按照variable = value 的形式，加上URL的后面，中间用"?"连接，各个变量之间用"&"连接 post将数据不像get方式那样4、参数上面3的数据传输方式，可以得出：post安全性比get方式要高 5、URL不存在参数上限的问题，HTTP协议没有对URL长度进行限制，限制的是部分浏览器和服务器的限制。 IE对URL长度的限制为2083KB get方式是通过URL传输的数据的，数据量一般在2KB左右，但是执行效率比post高 理论上post方式没有大小限制，HTTP协议规范也没进行大小限制。post数据没有限制，限制的是服务器处理程序的能力

1加2在前端面试中是指一个简单的加法计算题。1加2在前端面试中是指一个简单的加法计算题，其目的是考察面试者对JavaScript基本语法和运算符的掌握程度。面试者需要使用JavaScript代码计算出1+2的结果并输出。JavaScript是一个程序语言。JavaScript语法JavaScript是一个脚本语言，它是一个轻量级，但功能强大的编程语言。

响应式网页设计优点：跨平台和终端且不需要分配子域。兼容当前及未来设备。节约成本。一个域名，一套网页。缺点：兼容性 不兼容低版本浏览器。移动带宽增多。加载事件长、无用代码太多。内存大。

实习生的前端面试题比平时的面试题简单。前端实习生主要是做一些基本的辅助工作，和平时招聘的正式员工不同，不涉及核心技术代码，面试题也会相对简单，所以实习生的前端面试题比平时的面试题简单。

标准就是规范、规则比如，在HTML中规定了大部分标签需要结束标记，像<div></div>;小部分标签，像<link><meta>是不需要写结束标记；另外像JS中变量的命名区分大小，类似这些规定就是w3c的标准。有时会因为一点规范的问题导致整段代码执行不了，只有更好按标准写代码，避免出现这种不必要的错误。

这个区别就是她们的遍历过程不一样

前端面试题，js事件机制是什么，这个回答是工作机制

从以下五个方面做，可以轻松面对前端面试：一、基本知识DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。DOM操作——怎样添加、移除、移动、复制、创建和查找节点。事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。盒模型——外边距、内边距和边框之间的关系，IE8以下版本的浏览器中的盒模型有什么不同。块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。二、少量提问现在有一个正显示着Yahoo!股票价格的页面。页面上有一个按钮，你可以单击它来刷新价格，但不会重新加载页面。请你描述一下实现这个功能的过程，假设服务器会负责准备好正确的股票价格数据。这个问题牵扯到一组我想要考察的基本知识点：DOM结构、DOM操作、事件处理、XHR和JSON。如果我要求你对换一种处理股票价格的方式，或者 让你在页面中显示其他信息，就可以把更多的知识点包括进来。对于经验比较丰富应聘者，我也可以自如地扩展要考察的知识范围，最简单像JOSN与XML的区别、安全问题、容量问题等等。我还希望应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的代码，你就当页面中没有包含任何库。你说你对哪个库了解多少多少，但我不能把关于库的知识作为评判能力的因素，因为库是会随时间变化的。三、解决问题做为一名前端工程师，最值得高兴的事莫过于解决同一个问题会有很多种不同的方法，而你要做的就是找出最合适的方法来。我在提问的时候，经常会在应聘者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说，假设你的这个方法由于种种原因被否决了，那么你还能不能给出另一种方法。这样做可以达到 两个目的。首先，可以测试出他们是否在毫无意义地复述书本中的东西。不能不承认，某些人确实有过目不忘的天赋，听他们在那里滔滔不绝地讲，你会觉得他们什么都明白。可是，只要一跟这些人谈到怎么查找方案无效的原因，以及能否拿出一个新方案来，他们往往就傻眼了。这时候，如果我听到“我不明白这个方案为什么不够 好”之类的反问，心里立刻就明白我的问题已经超出了他们的能力范围，而他们只是想拿自己死记硬背的结论来蒙混过关。其次，可以测试出他们已经掌握的(还是那句话，“想都不用想”)浏览器技术知识。如果他们对浏览器平台的核心知识有较好的理解，想出解决同一问题的不同方案根本没有那么难。注意：所有问题都与浏览器技术相关。我不相信出几道抽象的逻辑题，就能够考出某人解决Web技术问题的能力。在我看来，这无异于让素描大师画肖像，没有意义，也得不到任何有价值的信息。四、有激情要成为一名优秀的前端工程师，最重要的莫过于对自己做的事要有激情。我们技能都不是从学校中或者从研讨会上学来的，因此前端工程师必须具备自学能力。浏览器技术的变化可谓日新月异，所以也只有不断提升自己的技能才做得到与时俱进。我虽然不能强迫谁必须多看博客、不断学习，但想应聘前端工程师的人恐怕还是必须这么做的。你怎么知道谁对这种工作有没有激情?实际上非常简单。我只问一个简单的问题：“目前你对什么Web技术最感兴趣?”这个问题永远不会过期，而且也几乎不可能出错……除非你答不上来。就眼下来说，我希望你对这个问题给出的技术中包括WebSocket、HTML、WebGL、客户端数据库，等等。只有 对Web开发充满激情的人，才会坚持不懈地学习新知识、掌握新技能;五、最后一点计算机科学或者Web设计方面的知识当然也有用，但那都是基本知识之外的东西。只要基本知识在那儿了，一切就都有了基础，想扩充知识面也不难。可是，如果等到正式上班以后，还得从头学习基本技能，那种难度是不可同日而语的。

浏览器兼容性涉及的内容有很多，特别是针对IE浏览器，以下整理出五种常见的浏览器兼容性解决方法。 一、样式初始化 由于各大浏览器会有自身的默认样式，并且不尽相同，所以为了尽可能的保证样式的统一性，前端在开发项目之前都会先进行样式格式化，最常见的分为以下几个方面。 1.pandding 值和 margin 值均设置为 0 将html、body、a、li、ol、input、textarea、select、button 等标签的 padding 值和 margin 值设置为 0。 2.html 标签 设置统一的字体，如果使用 rem 单位，则 html 需要设置合适的字号。 3.a 标签 设置统一的颜色，将 text-decoration 属性设置为 none。 4.ol 和 li 标签 list-style 统一设置为 none。 5.input、textarea、select、button 等标签初始化 border 设置为 none； 根据需要设置颜色和背景色。 二、使用不同类型的浏览器内核前缀 1.Chrome（谷歌浏览器） 与 Safari（苹果浏览器） 内核：Webkit （中译无） 前缀：-webkit- 2.IE （IE浏览器） 内核：Trident （中译三叉戟） 前缀：-ms- 3.Firefox （火狐浏览器） 内核：Gecko（中译壁虎） 前缀：-moz- 4.Opera （欧朋浏览器） 内核：Presto（中译迅速） 前缀：-o- 例： -webkit-border-radius: 10px; / 谷歌浏览器 / -ms-border-radius: 10px; / IE浏览器 / -moz-border-radius: 10px; / 火狐浏览器 / -o-border-radius: 10px; / 欧朋浏览器 / border-radius: 10px; 1 2 3 4 5 三、针对IE浏览器不同版本的解决方案 1.对于低版本的 IE 浏览器使用 CSS hack（ 即给特点前缀） 注：以下符号是写在属性名前面。 兼容 IE6 的 hack 符号：- 或 _ 兼容 IE6 、7 的 hack 符号：` ~ ! @ # $ % ^ & * ( ) + = [ ] | < > , . 任意一个符号 兼容 IE6、7、8 的 hack 符号：. 注：以下符号是写在属性值与分号直接，中间不留空格。 兼容 IE8 的 hack 符号：/ 兼容 IE8、9、10 的 hack 符号： 兼容 IE6、7、8、9、10 的 hack 符号：9 例： / hack符号在前 / _border-radius: 10px; / IE6 / +border-radius: 10px; / IE67 / .border-radius: 10px; / IE678 / / hack符号在后 / border-radius: 10px/; / IE8 / border-radius: 10px; / IE8910 / border-radius: 10px9; / IE678910 / 1 2 3 4 5 6 7 8 9 2.为不同的版本编写独立的样式，其他浏览器识别不到。 例：大于 IE9 的浏览器使用这个单独的 style9.css 样式 1 2 3 例：只有 IE6 浏览器使用的 style6.css 样式 1 2 3 四、其他特殊样式 1.cursor 属性的 hand 值和 pointer 值 问题：firefox 浏览器不支持 hand 值，但其他浏览器均支持 pointer 值。 解决: 统一使用 cursor 属性的 pointer 值。 2.水平居中 问题：IE8 及IE8 以下版本浏览器不可通过设置 margin:0 auto 实现水平居中。 解决: 可通过设置父级 text-align:center 实现。 3.属性值 “inherit” 问题：IE8 及IE8 以下版本浏览器不支持属性值 “inherit”。 解决：谨慎使用属性值 “inherit”。 五、JS兼容性 1.ES6语法 问题：IE11 不支持箭头函数、class 语法等（报 SCRIPT1002: 语法错误），不支持 Set 和 Map 数据结构（不报错）及 Promise 对象，支持 let 和 const，IE10 及以下不支持任何 ES6 语法。 解决：如果要兼容IE浏览器的项目请使用 ES5 语法或者使用 Babel 进行转换。 2.操作 tr 标签 问题：IE9 及 IE9 以下版本浏览器，不能操作 tr 标签的 innerHTML 属性。 解决：可以操作 td 标签的 innerHTML 属性。 3.Ajax 问题：IE9 及 IE9 以下版本浏览器无法使用 Ajax 获取接口数据。 解决：在使用 Ajax 请求之前设置 jQuery.support.cors=true。 4.event 对象的 srcElement 属性 问题：IE8 及 IE8 以下版本浏览器 event 对象只有 srcElement 属性，没有 target 属性。 解决：obj = event.target?event.target:event.srcElement。 5.DOM 事件绑定 问题：IE8 及 IE8 以下版本浏览器是用 attachEvent() 方法，而其他浏览器是 addEventListener() 方法。 解决：判断 IE 浏览器版本，如果是 IE8 及以下 事件绑定则使用 attachEvent() 方法，注意 attachEvent() 方法的用法，第一个参数为“onclick” 而不是“click”。并且没有第三个参数。

参考链接： juejin.im/post/5e8d52… animation、transition、transform、translate 这几个属性要搞清楚： 水平居中： 垂直居中 BFC 是块级格式上下文，IFC 是行内格式上下文： 不会，因为 BFC 是页面中一个独立的隔离容器，其内部的元素不会与外部的元素相互影响，比如两个 div，上面的 div 设置了 float，那么如果下面的元素不是 BFC，也没有设置 float，会形成对上面的元素进行包裹内容的情况，如果设置了下面元素为 overflow：hidden；属性那么就能够实现经典的两列布局，左边内容固定宽度，右边因为是 BFC 所以会进行自适应。 box-sizing 属性可以被用来调整这些表现: BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 五种： BFC 的特性： CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 外边距（margin） 、 边框（border） 、 内边距（padding） 、 实际内容（content） 四个属性。 CSS盒模型： 标准模型 + IE模型 标准盒子模型：宽度=内容的宽度（content）+ border + padding 低版本IE盒子模型：宽度=内容宽度（content+border+padding），如何设置成 IE 盒子模型: static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。 sticky：具体是类似 relative 和 fixed，在 viewport 视口滚动到阈值之前应用 relative，滚动到阈值之后应用 fixed 布局，由 top 决定。 问：为什么会有这种现象？你能解释一下吗 是由块级格式上下文决定的，BFC，元素在 BFC 中会进行上下排列，然后垂直距离由 margin 决定，并且会发生重叠，具体表现为同正取最大的，同负取绝对值最大的，一正一负，相加 BFC 是页面中一个独立的隔离容器，内部的子元素不会影响到外部的元素。 不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷） 了解更多加入我们前端学习圈

您好：您这样说太乱了有没有感觉？有是速度慢，又是标签不对，又是图片路径等等。你就算把所有问题都讲完，面试的人也不一定能感觉你出彩。你要懂得分类。你可以这样说：您好，我刚才大体看了下网站。我个人感觉有以下几类问题。1.网站整体风格，结合公司的性质来说。2.网站用户体验性，SEO优化问题，包括：html布局，title标签，网站关键词keyword等等。3.网站性能，通过浏览器的性能分析工具来看看就行。F12。...这样不仅让面试官能清楚的认识到你的逻辑条理性，并且能展示你的专业水平。

防抖 节流 误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。 实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下面几点: 补充补充一个get和post在缓存方面的区别： 可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、 vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中（建议先了解一下diff算法过程）。在交叉对比中，当新节点跟旧节点 头尾交叉对比 没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。vue部分源码如下： 创建map函数 遍历寻找 在React中， 如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state 。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。 **原因：**在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是， 有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state 。 虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。 具体实现步骤如下： 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。 结构：display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击 继承：display: none：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。 性能：displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ：修改元素会造成重绘，性能消耗较少 联系：它们都能让元素不可见 常用的一般为三种 .clearfix , clear:both , overflow:hidden ; 比较好是 .clearfix ,伪元素万金油版本,后两者有局限性. clear:both :若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了, 比如相邻容器的包裹层元素塌陷 overflow:hidden :这种若是用在同个容器内,可以形成 BFC 避免浮动造成的元素塌陷 概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。 优点： 缺点： block 元素特点： 1.处于常规流中时，如果 width 没有设置，会自动填充满父容器 2.可以应用 margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略 vertical-align inline 元素特点 1.水平方向上根据 direction 依次布局 2.不会在元素前后进行换行 3.受 white-space 控制 4. margin/padding 在竖直方向上无效，水平方向上有效 5. width/height 属性对非替换行内元素无效，宽度由元素内容决定 6.非替换行内元素的行框高由 line-height 确定，替换行内元素的行框高由 height , margin , padding , border 决定 7.浮动或绝对定位时会转换为 block 8. vertical-align 属性生效 GIF : JPEG ： PNG ： 七种数据类型 (ES6之前)其中5种为基本类型: string , number , boolean , null , undefined , ES6出来的 Symbol 也是原始数据类型 ，表示独一无二的值 Object 为引用类型(范围挺大),也包括数组、函数, 输出结果是： 工厂模式 简单的工厂模式可以理解为解决多个相似的问题; 单例模式 只能被实例化(构造函数给实例添加属性与方法)一次 沙箱模式 将一些函数放到自执行函数里面,但要用闭包暴露接口,用变量接收暴露的接口,再调用里面的值,否则无法使用里面的值 1.字面量 2.Object构造函数创建 3.使用工厂模式创建对象 4.使用构造函数创建对象 HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。 什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。 addEventListener ： addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。 IE只支持事件冒泡 。 获取一个对象的原型，在chrome中可以通过__proto__的形式，或者在ES6中可以通过Object.getPrototypeOf的形式。 那么Function.proto是什么么？也就是说Function由什么对象继承而来，我们来做如下判别。 我们发现Function的原型也是Function。 我们用图可以来明确这个关系： 这里来举个栗子，以 Object 为例，我们常用的 Object 便是一个构造函数，因此我们可以通过它构建实例。 则此时， 实例为instance , 构造函数为Object ，我们知道，构造函数拥有一个 prototype 的属性指向原型，因此原型为: 这里我们可以来看出三者的关系: 在 JS 中，继承通常指的便是 原型链继承 ，也就是通过指定原型，并可以通过原型链继承原型上的属性或者方法。 在函数式编程中，函数是一等公民。那么函数柯里化是怎样的呢？ 函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收余下参数且返回结果的新函数的技术。 函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行。 在一个函数中，首先填充几个参数，然后再返回一个新的函数的技术，称为函数的柯里化。通常可用于在不侵入函数的前提下，为函数 预置通用参数 ，供多次重复调用。 call 和 apply 都是为了解决改变 this 的指向。作用都是相同的，只是传参的方式不同。 除了第一个参数外， call 可以接收一个参数列表， apply 只接受一个参数数组。 bind 和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过 bind 实现柯里化。 如何实现一个 bind 函数 对于实现以下几个函数，可以从几个方面思考 如何实现一个call函数 如何实现一个apply函数 箭头函数其实是没有 this 的，这个函数中的 this 只取决于他外面的第一个不是箭头函数的函数的 this 。在这个例子中，因为调用 a 符合前面代码中的第一个情况，所以 this 是 window 。并且 this 一旦绑定了上下文，就不会被任何代码改变。 关于 let 的是否存在变量提升，我们何以用下面的例子来验证： let 变量如果不存在变量提升， console.log(name) 就会输出 ConardLi ，结果却抛出了 ReferenceError ，那么这很好的说明了， let 也存在变量提升，但是它存在一个“暂时死区”，在变量未初始化或赋值前不允许访问。 变量的赋值可以分为三个阶段： 关于 let 、 var 和 function ： 依次输出：undefined -> 10 -> 20 答案: D colorChange 方法是静态的。静态方法仅在创建它们的构造函数中存在，并且不能传递给任何子级。由于 freddie 是一个子级对象，函数不会传递，所以在 freddie 实例上不存在 freddie 方法：抛出 TypeError 。 1.使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=1 2.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1 3.使用console.log输出的时候，因为obj具有 length 属性和 splice 方法，故将其作为数组进行打印 4.打印时因为数组未设置下标为 0 1 处的值，故打印为empty，主动 obj[0] 获取为 undefined undefined {n:2} 首先，a和b同时引用了{n:2}对象，接着执行到a.x = a = {n：2}语句，尽管赋值是从右到左的没错，但是.的优先级比=要高，所以这里首先执行a.x，相当于为a（或者b）所指向的{n:1}对象新增了一个属性x，即此时对象将变为{n:1;x:undefined}。之后按正常情况，从右到左进行赋值，此时执行a ={n:2}的时候，a的引用改变，指向了新对象{n：2},而b依然指向的是旧对象。之后执行a.x = {n：2}的时候，并不会重新解析一遍a，而是沿用最初解析a.x时候的a，也即旧对象，故此时旧对象的x的值为{n：2}，旧对象为 {n:1;x:{n：2}}，它被b引用着。后面输出a.x的时候，又要解析a了，此时的a是指向新对象的a，而这个新对象是没有x属性的，故访问时输出undefined；而访问b.x的时候，将输出旧对象的x的值，即{n:2}。 在比较相等性，原始类型通过它们的值进行比较，而对象通过它们的引用进行比较。 JavaScript 检查对象是否具有对内存中相同位置的引用。 我们作为参数传递的对象和我们用于检查相等性的对象在内存中位于不同位置，所以它们的引用是不同的。 这就是为什么 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 返回 false 的原因。 所有对象键（不包括 Symbols ）都会被存储为字符串，即使你没有给定字符串类型的键。这就是为什么 obj.hasOwnProperty（"1"） 也返回 true 。 上面的说法不适用于 Set 。在我们的 Set 中没有 “1” ： set.has（"1"） 返回 false 。它有数字类型 1 ， set.has（1） 返回 true 。 这题考察的是对象的键名的转换。 catch 块接收参数 x 。当我们传递参数时，这与变量的 x 不同。这个变量 x 是属于 catch 作用域的。 之后，我们将这个块级作用域的变量设置为 1 ，并设置变量 y 的值。现在，我们打印块级作用域的变量 x ，它等于 1 。 在 catch 块之外， x 仍然是 undefined ，而 y 是 2 。当我们想在 catch 块之外的 console.log(x) 时，它返回 undefined ，而 y 返回 2 。

我最开始接触是在Vue的官网上，开始是作为一个小节出现，现在已经是个专门的大章节来专门讲Vue服务端渲染的内容。 服务端渲染 简单来说就是在服务器上把数据和模板拼接好以后发送给客户端显示。 回顾下前端的 历史 ，最开始的站点是简单的静态网站。后端大哥把.html文件推送给用户，用户浏览器解析这些字符串进行显示。那个时候就是 服务端渲染 。可是后来由于网站内容越来越复杂、特效越来越炫酷，这种‘兼职"状态已经不能满足需求，细分之下的前端出现了。 随后为了方便的开发，开始提倡 前后端分离，大家各做各的，彼此之间通过基于HTTP的各种API协作，变成了数据动态生成的新一代站点。 再后来出现了Vue等三大MV*框架，网站做成了SPA应用，解决了很多问题的同时也带来了新问题，其中最突出的两个：难以SEO和首屏加载缓慢。 想要了解更多关于前端技术内容欢迎关注尚硅谷教育！ 前端安全相关面试题 前端JS高阶面试题 前端设计模式-面试题 web前端渲染优化 web前端之二叉搜索树

这个你可以去网上搜一下一大堆，牛客网里就有不少面试题你可以去看看，我感觉是不错的，你也可以试试。

前端不缺，缺的是好前端

网页分成三个层次，即：结构层、表示层、行为层。结构层（structural layer）由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”表示层（presentation layer）由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

(1)链接标记target属性的_self、_top、_parent、_blank、main、left、top各有何用处? target属性的_self、_top、_parent都是针对框架的。比如你写了这样一个网页page，网页page分成frame1、frame2，frame1又分成frame1-1、frame1-2，frame1-1又分成frame1-1-1，frame1-1-2。 假如你在frame1-1-1中放了一个链接。 如果这个链接的target="_self"，那么链接会在frame1-1-1中打开。 如果target="_parent"，那么链接会在frame1-1中打开。 如果target="_top"，那么链接会在page中打开。 如果target="_blank"，浏览器会另开一个新窗口显示page文档。未经验证，根据说法应该是这个意思。 (2)链接标记target属性的main、left、top各有何用处? main、left、top是由Adobe Dreamweaver生成的主、左、上框架集的框架默认名。 (3)什么是Bom什么是Dom?你如何理解Dom? DOM和BOM是JS的三大组成部分之一，下面讲解BOM与DOM以及两者的关系 DOM讲解DOM即文档对象模型，通过创建节点树来表示文档，是HTML和XML的应用程序接口（API），描述了处理网页内容的方法和接口，从而使开发者对文档的内容和结构具有空前的控制力，用DOM API可以轻松地删除、添加和替换节点以及设置文档中标签的属性。将一个html文档用DOM树表示如下图所示 。HTML的DOM树节点包括: 1. 元素节点：上图中<html>、<body>、<p>都是元素节点即标签2. 文本节点：向用户展示的内容，如<li>...</li>中的javascript、Dom、CSS等文本。 3. 属性节点：元素属性，如<a>标签的链接属性 BOM讲解 BOM是browser object model的缩写，简称浏览器对象模型。简单说即是javascript访问，操作浏览器的一个中介。 BOM主要用于管理浏览器窗口之间的通讯，由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。通过BOM我们可以学到与浏览器窗口交互的一些对象，可以移动，调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等。因此它的核心对象是window。Window对象是BOM中所有对象的核心，是BOM中所有对象的父对象。所以，尽管frame ,history……都是window的子对象，我们只要知道BOM操作的是对象是浏览器窗口（window），那么这些对象就可以直接使用，无需通过“window.”来访问 BOM和DOM的关系 要想操作网页，需要DOM来进行访问，但是仅仅只是网页内容。浏览器除了有显示的内容，还有一个重要的部分就是一个载体，它承载我们看到的内容。好比是一个框架，而操作这个载体的对象我们把它叫做BOM。所以这样的结构，使得BOM，DOM各司其职，BOM负责跟浏览器框架打交道，DOM负责浏览器内容Document打交道。从上图中能更好的理解两者的关系。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。 采用flex布局的元素，成为flex容器。它的所有子元素自动成为容器成员，称为flex项目。常用的，设置到容器上的属性有： 设置到项目上的属性： (Block Formatting Context)块级格式化上下文。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此.并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 上述方法都可以创建BFC，但是会带来一些负面影响： ::before是css3的写法，:before是css2的写法，用来设置对象前的内容 :before的兼容性要比::before好 更准确的说法 1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；　　　　 2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；　　　　 3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；　　　　 4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧； 常规方法 不需要使用transform属性时 webkit内核 参考链接： CSS实现不换行/自动换行/文本超出隐藏显示省略号 object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能 @import规则一定要先于除了@charset的其他任何CSS规则。 不推荐使用@import: 因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。 伪元素和伪类的区别总结 css继承指的是被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性。 相关链接： CSS 继承，哪些属性能继承，哪些不能 z-index可以改变元素层叠顺序，z-index较大的会叠加在z-index较小的元素上方。z-index值相同时，则按照文档流顺序，后面的覆盖前边的。 px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。注意css中的1px并不一定是物理像素的一个像素块，需要根据DPR计算，对应多少物理像素块 设备像素比：dpr = 物理像素 / 逻辑像素(px)，例如，iPhone6的dpr为2，物理像素750（x轴）,则它的逻辑像素为375 参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。 css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。 1英寸（inch）=2.54厘米（cm） 手机对角线的长度换算成英寸 屏幕横向和纵向的像素点 1px即代表一个物理像素点/像素块 PPI，是每英寸可以显示的像素点的英文缩写。如果说上面分辨率是一个质量总量的概念，那么，ppi就是密度的概念。我们可以通过屏幕的像素总量除以屏幕大小来计算屏幕的PPI，公式如下： a：横向像素数量，b：纵向像素数量，c：屏幕尺寸（英寸） 1px与多少厘米之间是不能直接划等号的，需要看分辨率。 一般电脑的像素分辨率是72ppi，计算公式： (((1**2 + 1**2)**0.5)/72)*2.54 ，此时1px=0.0498cm，1cm=25px； 很多手机是300ppi，计算公式： (((1**2 + 1**2)**0.5)/300)*2.54 ，此时1px=0.0119cm。 参考链接： 画一条0.5px的线 在继承性上： 一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。 一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较 大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例，优雅降级的写法如下。 渐进增强，开发时间长，成本高，优雅降级，节约成本，开发周期短。

过完年需要跳槽的小伙伴还是挺多的，又要开始刷前端面试题了！会不会有一种错觉，看着这道面试题很熟，但是不知道该如何做？或者有答案又不知道是否正确？或者使用编辑器可以运行出来正确的答案，但是不知道怎么得来的，这些你都中招了吗？ JavaScript 语言是一门弱类型语言，存在许多类型错误，因此 ES6 引入了严格模式概念。 如果不加 ‘use strict" 常规模式下就是属于非严格模式。 严格模式 在 js 文件顶部添加 ‘use strict" 就属于严格模式，严格模式也可以指定在函数内部。 严格模式，是为 js 定义来了一种不同的解析与执行模型，在严格模式下，ECMAScipt 3 中一些不解和不确定的行为将得到处理，而且会对不安全的操作会抛出异常。‘use strict" 会告诉浏览器引擎可以切换到严格模式执行。 严格模式与非严格模式区别 常见笔试题： 试试这道笔试题你会做吗？ 要说 js 的深浅拷贝，就不得不提 js 的两大数据类型：基本数据类型和引用类型。 基本数据类型的变量名和值都存储在栈中，对于引用类型的变量名存储在栈中，而值存储在堆中。由于存储方式不同，所以导致了他们复制的时候方式不同。 赋值 基本数据类型赋值的时候，创建的基本数据类型会在内存中开辟一个新空间把值复制过来，而引用类型采用的是地址存储，如果直接把一个引用数据直接赋值给另外一个数据，就相当于直接把自己存储值的地址给了另外一个变量，所以改变一个的值，也会改变另外一个的值。 深浅拷贝是如何定义的？ 假设有 p 和 copyP 两个变量，如果copyP 是拷贝了 p 的，我们通过修改 copyP 来观察 p 是否发生改变，如果跟着改变，就是浅拷贝，如果是不改变，就说明是深拷贝。 基本类型复制的时候会开辟新的内存空间，所以两个值是相互独立的，引用类型复制的时候就要看是复制的内存地址还是复制一个新的堆。所以深拷贝主要针对的是引用类型的数据。 浅拷贝的常见的方式： 1、直接赋值 2、Object.assign 深拷贝的常见方式： 引用数据类型最常用的就是 Object 和 Array ，引用数据内部的数据也可以是多样化的，进行深拷贝时，也要适当地根据数据结构进行合适的复制方式，具体的深拷贝方法分别有： 1、数组中只包含基本数据类型 2、对象中只包含基本数据类型 3、对象或数组里含有一层或多层引用数据类型时 深浅拷贝的常见应用主要是数据的增删改操作。 大厂笔试题： 这是一道关于 this 指向的面试题，接下来我们就说说 this 是如何指向的？ this 对象是运行时基于函数的执行环境绑定的： 看完上述 this 指向解释，你就可以做上边的那道面试题了。 如何改变 this 的指向？ call 、bind 和 apply 这三个函数都是用来改变 this 指向的，就是改变函数执行时的上下文。 修改上述面试题： call 、bind 和 apply 改变 this 指向，最大作用就是实现代码复用。 至于 call、bind 和 apply 的区别，可以自行去了解下。 有了上边那个表，事情就变得简单了！ 关系运算符进行运算时，不同类型的值会自动转化为相同类型值，然后进行 1、两边有一个是字符串一个是是数字时，字符串调用 Number 方法，将字符串转为数字，所以： 2、如果两边都是字符串时，按照字符串的 unicode 编码来转换的，所以： 3、字符串进项比较时，先比较第一位，如果不相等直接得出结果，如果第一项相等，会继续使用第二项进行比较。 4、转为布尔值都为 false 的类型分别有：undefined 、null 、0、NaN、false、‘" 5、NaN表示的是非数字，但是这个非数字也是不同的，因此 NaN 不等于 NaN，两个NaN永远不可能相等。 6、关系运算有一个数值，将另外一个值也转为 number 类型。 7、有逻辑运算的，将其他数据类型转为 boolean 值。 8、直接使用两个空数组比较，数组地址不同，所以不相等。 评论区可以留下最近你想学习的知识点，或面试题类型！

摘要 ：本篇分享了10道面试题——Web性能优化方案、JS严格模式、五道算法题、自定义JS事件系统、输入URL到浏览器渲染的全过程、HTTP和HTTPS相关。 需求：所谓扁平化，就是将一个嵌套多层的数组，转换为只有一层的数组。示例如下： 需求：给定 n 个非负整数，用来表示柱状图中各个柱子的高度。每个柱子彼此相邻，且宽度为 1 。求在该柱状图中，能够勾勒出来的矩形的最大面积。 从 HTTP 协议栈层面来看，我们可以在 TCP 和 HTTP 之间插入一个安全层，所有经过安全层的数据都会被加密或者解密（如下图所示）。 本周结束，下周继续！！！

篇幅有限，我建议你去掘金上搜搜你这个问题，上面有好多总结不错的文章，多看些，vue相关面试题你也就知道的差不多了。

（水仙花数也被称为超完全数字不变数、自恋数、自幂数、阿姆斯特朗数。水仙花数是指一个3位数，它的每个位上的数字的3次幂之和等于它本身 例如： 1~3 + 5~3 + 3~3 =153） (质数就是在大于1的自然数中，除了1和它本身以外不在有其他因数的自然数) a:11,b:10 A [] B [""] C [undefined] D [null] A ["false"] B [false] C[0] D[] A null B undefined C “hello” D“world” A "llowo" B "llow" C "llo" D null A "llowo" B "llow" C "llo" D null A getYear（） B getMonth（） C getDay（） DgetDate（） A 基于对象 B 移动端优先 C 事件驱动 D 跨平台 A String B Float C Number D Null A 任意单个字符 B 任意单个字母 C 任意单个字母、数字、下划线 D 任意单个字母、数学、下划线、$符号 A <javascript> B <script> C <scripting> D <js> A var s = "heloe" B var n = 20 C var x = document.getElementsByTagName("box") D var y = document.querySelectorAll("ul li") A document.createElement B document.createTextNode C document.getElementById B document.querySelector A ele.innerText B ele.innerHTML C ele.textContent D ele.htmlContent 插入排序的算法描述的是一种简单直观的排序算法，它的工作原理是通过构建有序序列，对于未排序的数据，在已排序序列中从后向前扫描，找到对应位置并插入 A.对数组里数据的排序可以用sort函数，如果排序效果非预期，可以给sort函数加一个排序的参数 B.reverse用于对数组数据的倒序排列 C.向数组的最后位置加一个新元素，可以用pop方法 D.unshift方法用于向数组删除第一个元素 A.window.status = "已经选中该文本框" B.document.status = "已经选中该文本框" C.window.screen = "已经选中该文本框" D.document.screen = "已经选中该文本框" A <input type="button" value="new" onclick="open("new.html","_blank")" /> B. <input type="button" value="new" onclick="window.location = "new.html"" /> C.<input type="button" value="new " onclick = "location.assign("new.html)"> D. <form target = "_blank" action="new.html"> <input type="submit" value="new" /> </form> A.<script type="text/javascript">document.write(<h1>hello</h1>)</script> B.<script type="text/javascript">document.write("<h1>hello</h1>")</script> C.<script type="text/javascript"><h1>hello</h1></script> D.<h1><script type="text/javascript">document.write("hello")</script></h1> 以下说法中正确的是（AD） A.在页面的第二个文本框中输入内容后，当目标离开第二个文本框时，第一个文本框的内容不变 B.在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，将在第二个文本框中复制第一个文本框的内容 C.在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时候，将在第一个文本框中复制第二个文本框的内容 D.在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，第二个文本框的内容不变

function A(x, y, z) { this.x = x; this.y = y; this.z = z;} function B () {}B.prototype = { method1: function () { return this.x + this.y + this.z; }}/*实例化一个对象c，要求c.method1() === 6c.hasOwnProperty("method1") === false、c.hasOwnProperty(“x") === true、c.hasOwnProperty(“y") === true、c.hasOwnProperty(“z") === true*/A.prototype = new B();let c = new A(1, 2, 3);console.log(c.method1()) // 6console.log(c.hasOwnProperty("method1")) // falseconsole.log(c.hasOwnProperty("x")) // trueconsole.log(c.hasOwnProperty("y")) // trueconsole.log(c.hasOwnProperty("z")) // true这是一个原型继承的问题，首先我们让构造函数A的原型执行 构造函数B的实例化对象，这样在实例化构造函数A后 对象c的原型链上就存在了method1方法，而x y z 这三个属性 是属于对象c的私有属性，而method1是在原型链上的，并不是c的私有方法，所以当hasOwnProperty 的时候 检测 method1的时候 是 false ，x y z 都是 true

已知高度和宽度的元素： 设置父元素为相对定位relative，给子元素设置绝对定位absoluted，top: 0; right: 0; bottom: 0; left: 0; margin: auto; 设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px; 未知高度和宽度的元素： 设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translate(-50%，-50%); 设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform:translate(-50%，-50%); 组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data ，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data ，就会造成一个变了全都会变的结果。 for of： 支持 return ，并且是值 of 数组（不能遍历对象） 1. 可以避免所有 for-in 循环的陷阱 2. 不同于 forEach()，可以使用 break, continue 和 return 3. for-of 循环不仅仅支持数组的遍历。同样适用于很多类似数组的对象 4. 它也支持字符串的遍历 5. for-of 并不适用于处理原有的原生对象 for in： forEach： assets文件夹里是静态资源；components是放组件；router是定义路由相关的配置；view视图；app.vue是一个应用主组件；main.js是入口文件 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。 生命周期函数： activated（ 组件激活时调用 ）、deactivated（ 组件停用时调用 ） 常见的使用场景可以分为三类: 当频繁执行条件时，不适合使用 v-if ,用 v-show ; 反之执行条件的次数很少，使用 v-if 即可。 v-if 和 v-for ,不推荐两者一起使用在同一个元素上，虽然也能运行，但是编辑器会报警告；两者一起使用时，v-for比v-if具有更高的优先级，

今天小编要跟大家分享的文章是关于2020年Web前端面试题汇总。由于内容较多小编分开为大家介绍，今天首先来和小编一起看一看第一部分的内容，希望这些面试题能够对正准备找Web前端相关工作的小伙伴们有所帮助。1.说几条写JavaScript的基本规范?1)不要在同一行声明多个变量;2)请使用===/!==来比较true/false或者数值;3)使用对象字面量替代newObject这种形式;4)减少使用全局函数,全局变量;5)switch语句必须带有default分支;6)if语句必须使用大括号;7)for-in循环中的变量;应该使用var关键字明确限定作用域;从而避免作用域全局污染。2.说说平衡二叉树?平衡二叉搜索树(Self-balancingbinarysearchtree)又被称为AVL树。具有以下性质：1)它是一棵空树或它的左右两个子树的高度差的绝对值不超过1，并且左右两个子树都是一棵平衡二叉树。2)平衡二叉树必定是二叉搜索树，反之则不一定。3)平衡二叉树的常用实现方法有红黑树、AVL、替罪羊树、Treap、伸展树等。最小二叉平衡树的节点的公式如下：F(n)=F(n-1)+F(n-2)+1备注：1是根节点，F(n-1)是左子树的节点数量，F(n-2)是右子树的节点数量。3.清除浮动和解决垂直外边距重叠的解决方案?问题描述:1)父元素没有设置宽高，尺寸由子元素撑起;子元素一旦浮动，父元素高度会发生塌陷。2)子元素设置margin-top会作用的父元素的margin-top;此时会造成垂直外边距重叠。.clearfix::after,.clearfix::before{content:"";display:table;clear:both;}4.sessionStorage、localStorage和cookie?相同点:都用于浏览器端存储的缓存数据;不同点:1)存储内容是否发送到服务器端当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费;xxxstorage则会将数据保存到本地，不会造成宽带浪费;2)数据存储大小不同Cookie数据不能超过4K，适用于会话标识;xxxstorage数据存储可以达到5M;3)数据存储的有效期限不同cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器;sessionStorage,仅在关闭浏览器之前有效;localStorage,数据存储永久有效;4)作用域不同cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面;5.判断一个单词是否是回文?回文是指把相同的词汇或句子，在下文中调换位置或颠倒过来，产生首尾回环的情景，叫做回文，也叫回环。比如cacac，redivider。letcheckPalindrom=(str)=>{returnstr===str.split("").reverse().join("");}6.不借助临时变量，进行两个整数的交换?输入a=3,b=1,输出a=1,b=3letswap=(a,b)=>{b=b-a;a=a+b;b=a-b;return[a,b];}7.请写出至少5个html5新增的标签，并说明其语义和应用场景?section：定义文档中的一个章节;nav：定义只包含导航链接的章节;header：定义页面或章节的头部;它经常包含logo、页面标题和导航性的目录。footer：定义页面或章节的尾部;它经常包含版权信息、法律信息链接和反馈建议用的地址。aside：定义和页面内容关联度较低的内容，如果被删除，剩下的内容仍然很合理。8.get和post请求在缓存方面的区别?get请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。post不同，post做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此get请求适合于请求缓存。9.如何解决异步回调地狱?promise、generator、async/await10.图片的懒加载和预加载?预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。11.bind，apply，call的区别?通过apply和call改变函数的this指向，这两个函数的第一个参数都是一样的，表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1,arg2...这种形式。通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。12.js怎么控制一次加载一张图片，加载完后再加载下一张?方法一:varobj=newImage();obj.src="#/21.jpg";obj.onload=function(){document.getElementById("pic").innnerHTML="";}加载中

1、 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)答：行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。兼容性：display:inline-block;*display:inline;*zoom:1。2、box-sizing常用的属性有哪些?分别有什么作用?答：box-sizing: content-box|border-box|inherit。content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。3、Doctype作用?标准模式与兼容模式各有什么区别?答：告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。4、html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?答：HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。(1)绘画 canvas;(2)用于媒介回放的 video 和 audio 元素;(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;(4)sessionStorage 的数据在浏览器关闭后自动删除;(5)语意化更好的内容元素，比如 article、footer、header、nav、section;(6)表单控件，calendar、date、time、email、url、search;(7)新的技术webworker, websocket, Geolocation;IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim。以上就是环球青藤小编关于web前端面试题的相关分享，希望对大家有所帮助，想要了解更多相关内容，请及时关注本平台并进行查看!

解析： 第 41题 比如 sleep(1000) 意味着等待1000毫秒，可从 Promise、Generator、Async/Await 等角度实现 解析： 第 42 题 解析： 第 43 题 1、客户端使用https的url访问web服务器,要求与服务器建立ssl连接 2、web服务器收到客户端请求后, 会将网站的证书(包含公钥)传送一份给客户端 3、客户端收到网站证书后会检查证书的颁发机构以及过期时间, 如果没有问题就随机产生一个秘钥 4、客户端利用公钥将会话秘钥加密, 并传送给服务端, 服务端利用自己的私钥解密出会话秘钥 5、之后服务器与客户端使用秘钥加密传输 解析： 第 44 题 解析： 第 45 题 1.使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=1 2.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1 3.使用console.log输出的时候，因为obj具有 length 属性和 splice 方法，故将其作为数组进行打印 4.打印时因为数组未设置下标为 0 1 处的值，故打印为empty，主动 obj[0] 获取为 undefined 解析： 第 46 题 解析： 第 47 题 1、Function.prototype.apply和Function.prototype.call 的作用是一样的，区别在于传入参数的不同； 2、第一个参数都是，指定函数体内this的指向； 3、第二个参数开始不同，apply是传入带下标的集合，数组或者类数组，apply把它传给函数作为参数，call从第二个开始传入的参数是不固定的，都会传给函数作为参数。 4、call比apply的性能要好，平常可以多用call, call传入参数的格式正是内部所需要的格式 解析： 第 48 题 解析： 第 49 题 解析： 第 50 题 为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？ 解析： 第 51 题 解析： 第 52 题 解析： 第 53 题 解析： 第 54 题 如下：{1:222, 2:123, 5:888}，请把数据处理为如下结构：[222, 123, null, null, 888, null, null, null, null, null, null, null]。 解析： 第 55 题 解析： 第 56 题 解析： 第 57 题 解析： 第 58 题 解析： 第 59 题 解析： 第 60 题 解析： 第 61 题 解析： 第 62 题 解析： 第 63 题 解析： 第 64 题 解析： 第 65 题 解析： 第 66 题 随机生成一个长度为 10 的整数类型的数组，例如 [2, 10, 3, 4, 5, 11, 10, 11, 20] ，将其排列成一个新数组，要求新数组形式如下，例如 [[2, 3, 4, 5], [10, 11], [20]] 。 解析： 第 67 题 解析： 第 68 题 解析： 第 69 题 解析： 第 70 题 解析： 第 71 题 [图片上传失败...(image-2eeb30-1575446538468)] <figcaption></figcaption> 解析： 第 72 题 解析： 第 73 题 解析： 第 74 题 解析： 第 75 题 解析： 第 76 题 示例 1： 示例 2： 解析： 第 77 题 解析： 第 78 题 解析： 第 79 题 解析： 第 80 题 解析： 第 81 题 解析： 第 82 题 解析： 第 83 题 习题： https://blog.csdn.net/qq_37024887/article/details/106784068 解析： 第 84 题 解析： 第 85 题 给定一个整数数组和一个目标值，找出数组中和为目标值的两个数。 你可以假设每个输入只对应一种答案，且同样的元素不能被重复利用。 示例： 解析： 第 86 题 解析： 第 87 题 以下数据结构中，id 代表部门编号，name 是部门名称，parentId 是父部门编号，为 0 代表一级部门，现在要求实现一个 convert 方法，把原始 list 转换成树形结构，parentId 为多少就挂载在该 id 的属性 children 数组下，结构如下： 解析： 第 88 题 解析： 第 89 题 [图片上传失败...(image-aea64e-1575446538470)] 解析： 第 90 题 解析： 第 91 题 [图片上传失败...(image-21d53f-1575446538470)] 解析： 第 92 题 示例 1： 中位数是 2.0 示例 2： 中位数是(2 + 3) / 2 = 2.5 解析： 第 93 题 解析： 第 94 题 解析： 第 95 题 解析： 第 96 题 解析： 第 97 题 解析： 第 98 题 解析： 第 99 题 解析：[第 100 题]( https://github.com/Advanced-Frontend/Daily-

大家好，我是王我。 随着春节的结束，各个行业也普遍开始了上班的节奏， 不过本人17号才上班。为什么？因为长得帅的都上班比较晚。 当然，每到新年结束，又迎来了一批招聘者与面试者，我来说说作为一年工作经验应该知道的面试题。 HTML篇 1.doctype是什么？有哪些类型？ 2.input有哪些新类型？简要说明其8用法。 3.HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？ 4.bootstrap响应式的原理是什么？ 5.多移动终端页面适配是如何实现的？ CSS篇 1.如何实现两列布局，左边自适应，右边固定宽度？ 2.用CSS画一个三角形 3.CSS实现字体大写 4.display有哪些常用的属性值？分别是什么意思？ 5.position为absolute，relative，fixed的定点位置 6.用三种方法清除浮动 7.请介绍一下margin塌陷问题 js篇 1.什么是事件冒泡和捕获？如何阻止事件冒泡？(分别用原生和jquery实现) 2.js创建对象，至少使用三种方法 3.简述一下事件穿透以及解决办法 4.用三种方式判断变量类型是否是数组 5.如何实现对象的拷贝？ 6.什么是闭包？闭包的优缺点。 7.简述一下ajax请求的过程。 8.简述一下new一个人构造函数的人过程。 9.为什么会有跨域？是怎么解决跨域问题的？简述一下原理。 10.js原始数据类型有哪些？ 11.学一个函数，判断一个变量是否是字符串 12.typeof有哪些结果？ 13.剪头函数和普通函数有什么区别？ 14.请用三种方法实现数组去重 15.href和src有什么区别？ jquery篇 1.attr()和prop()有什么区别？ 2.on和bind有什么区别？js动态添加的dom元素是通过on还是bind？ 3.touch和click有什么区别？ 4.window.onload和jquery的ready有什么区别？ vue篇 1.简述一下vue的生命周期及其特点 2.vue双向绑定的原理是什么？ 3.vue的特点有哪些？和jquery有什么区别？ 4.父子组件之间传递数据的方法 5.子组件如何共享数据？ 6.一般有什么工具进行数据交互？ 7.webpack的原理是什么？ 8.简述一下$nextTick的用法 浏览器篇 1.cookie、sessionStorage、localStorage的区别是什么？ 2.有用过浏览器缓存吗？简述一下基本的缓存机制 网络篇 1.http和https之间的区别 2.从服务器的安全考虑，是使用get请求还是post请求？ 3.URL请求的过程有哪些？ 项目经验篇 1.项目中遇到的最大挑战以及解决办法 2.常见的网页优化有哪些？ 作为一个面试一年以内工作经验的前端程序员来说，以上的问题能够倒答如流月薪6k应该不成问题啦。这些面试题也是我在很多面试中感觉经常被问到的题目。 希望大家年后找工作能够顺顺利利， 千万不要跟我一样哦，只有帅气就一无所有了。 大家好，我是王我，中国最帅的前端程序员。 前几次都是各种培训公司，各种忽悠就不提了，说说后面4次面试的经历。 第一次是面一个小公司，不过他们好像没有厉害的前端，来面我的是个后端，一来没有问我关于js的知识，直接问我以前做过什么，有没有经验，我本人不会吹牛，简历也没怎么包装，就是自己把自学的知识和做的几个小demo弄在上面，也用github挂在页面上了，不过他根本不点开看，也不问，问我会不会vue，我当时对框架还不了解，他就说他们需要能直接上手开始写的，所以我第一个就直接挂了。 第二次面试是一个国企，这个问了很多问题，都很基础，js数据类型，数组操作，事件，大概就是高程的前面几章看看就差不多都能答到，然后因为他们主要用jq，所以问了很多jq的操作，关于节点的，动画的，我看锋利的jq大概看了3遍，也练过多次，所以我答的很熟。然后问了些布局方面的，bootstrap我了解过，又看过css3，所以这方面也没啥问题，最后在现场做了个题目，主要就是布局然后通过ajax呈现数据。后面听介绍我面试的说面试官比较满意，说我jq很熟，一面就过了。可惜后面电话面试不知怎么回事可能表现的不够自信，虽然没问技术，但是我没啥自信，把没项目经验什么的也不知怎么就一五一十交代了，估计因为这个挂掉了。 第三次没问问题，直接就是一套题开做，我在那做了一个多小时。题目就是按照要求一步一步做一个页面出来，我也搞忘了我当时卡在哪个地方了，坐在那得时候就是做不出来，没有设计图，要根据他的描述自己找个设计图然后做，我第一次遇到这个有点懵，虽然当时没做出来，不过回来我自己花了几个小时把它做了。所以这个也是凉了。 第四个问的比较多，数据类型，数组操作，跨域，ajax，闭包，原型链，继承，深拷贝，浅拷贝，模块amd cmd，基本都是问的js。然后问了html5的新特性 css3 的新特性，遇到过什么浏览器的兼容性问题，怎么解决的，以后想往什么方面发展。这个时候我已经会点vue了，照着做了个小demo，不过后来知道公司用的angularjs，面试官也没看我做的，问也没问。。以前听网上说要带上自己的项目去面试感觉没起多大效果。 最后总结下如果面的比较初级的岗位，应该主要问js，原型链，继承，闭包，深浅拷贝，ajax，跨域，然后js的基础知识，对了还有apply和call也问了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一点的，暂时还没面过，等以后面过在来回答 1. cookie session 的用途和区别，以及有效期 1、cookie数据存放在客户的浏览器上，session数据放在服务器上。 2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 考虑到安全应当使用session。 3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能 考虑到减轻服务器性能方面，应当使用COOKIE。 4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。 2. vue的数据绑定原理，mvvm与mvc的区别 MVVM： m:model数据模型层 v:view视图层 vm:ViewModel vue中采用的是mvvm模式，这是从mvc衍生过来的 MVVM让视图与viewmodel直接的关系特别的紧密，就是为了解决mvc反馈不及时的问题 图片说明一下： 说到MVVM就要说一下双向绑定和数据劫持的原理， MVC： m:model数据模型层 v:view视图层 c:controller控制器 原理： c层需要控制model层的数据在view层进行显示 MVC两种方式，图片说明： 总结： mvvm与mvc最大的区别： MVVM实现了view与model的自动同步，也就是model属性改变的时候， 我们不需要再自己手动操作dom元素去改变view的显示，而是改变属性后该属性对应的view层会自动改变。 不懂得可以复制链接查看： https://www.pianshen.com/article/3716256399/ 3. storage 的区别 sessionStorage localStorage localStorage 的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性 sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的 4.v-model双向数据原理 有一个文本框 通过v-bind绑定了value属性 值为myname 是我们在vue实例中定义的属性 传统我们获取文本框值方法 可能通过getElementById找到文本框 然后获取其value属性 但是vue中直接通过v-bind绑定了value属性 所以不需要像之前那样获取值 所以在后面的按钮中获取name值 直接获取vue实例对象data里面的myname属性即可 【数据为尊 ----数据映射到浏览器 如果数据v-model后修改（肯定input）然后到数据在有数据映射到浏览器页面 ----映射关系统称】 5.keepAlive用过吗？什么作用？ 缓存路由组件 使用的是vue的一个组件，参考vue的官方文档 使用这个东西可以保证我们在切换组件的时候，原来显示的组件不被销毁 -----【保障组件的数据不会被切换路由而销毁数据】 Home是对应的组件对象的名字，不是路由的名字 6.多维数组拍平 数组拍平也称数组扁平化，就是将数组里面的数组打开，最后合并为一个数组 一红六种方法吧…… 了解的请看： https://www.cnblogs.com/guan-shan/p/10165737.html 7.跨域的原因 解决方案 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 这样就可以说同源策略----协议---端口---域名 原生的src和href可以解决跨域 代理可以解决 请求头也可以携带浏览器提示的也可以解决 一般都是后端解决跨域问题 【别的需要了解看下方链接】 https://blog.csdn.net/qq_41604383/article/details/100770100 8.uniApp兼容问题 § 如果你使用cli创建项目（即项目根目录是package.json），不管用什么ide，即便是用HBuilderX，切记cli项目的编译器是在项目下的，HBuilderX不管怎么升级都不会影响编译器版本。你需要手动npm update来升级编译器。以及如果你想要安装less、scss等预编译器，也需要自己npm安装在项目下，而不是在HBuilderX的插件管理里安装。 § 如果你使用离线打包，请注意HBuilderX升级后，真机运行基座和云打包对应引擎跟随HBuilderX升级，而你的sdk需要手动升级。sdk的版本升级一般滞后HBuilderX正式版升级一两天。 § 如果你使用自定义基座，之前制作的自定义基座是不会跟随HBuilderX升级的，升级HBuilderX后你应该重新制作新版自定义基座。 § 如果你使用wgt升级，新版HBuilderX编译的wgt，运行到之前的runtime上，一定要先测试好，看有没有兼容性问题。如果有问题，就不要wgt升级，整包升级。 § 考虑到向下兼容，uni-app编译器在升级为新的自定义组件模式后，同时保留了对老编译模式的向下兼容。 在HBuilderX alpha版中，App端一定会使用新编译器，不理会manifest配置。 在HBuilderX 正式版中，新创建的项目会使用新编译器，老项目不会强制使用，而是开发者自己在manifest里配置开启。 § 如果你使用其他ide开发uni-app，会经常因为拼错单词而运行失败，因为经过webpack编译一道，很多错误反应的不够直观，排错时间很长，不如从开始就依赖有良好提示的HBuilderX，避免敲错单词。 § 云打包的引擎版本说明 HBuilderX Alpha，只有1套云打包机，不管你的HBuilderX alpha版本多少，对应的打包机一定是最新的alpha版的客户端引擎。 HBuilderX正式版，有2套打包机，一个是最新正式版，一个是次新正式版。 中间的紧急更新版本没有独立打包机。 举个例子： HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1这几个正式版。 那么当前可用的打包机有1.9.1和1.8.2这2台。（即每个大版本的最后一个版本） 除了这2个HBuilderX版本外，其他版本的云打包都指向最新的1.9.1版对应的打包机。（即只保留2个大版本的云打包机） 【详情请看】 https://ask.dcloud.net.cn/article/35845 一、HTML HTML书写规范 H5新增标签 HTML渲染过程 二、CSS css盒子模型概念 css弹性布局概念 三、JavaScript 事件模型 DOM2级事件模型 闭包 原型链 四、移动Web开发 常见的布局方案 移动端前端常见的触摸相关事件touch、tap、swipe等整理 移动端前端手势事件 移动端页面渲染优化 GPU渲染 GPU核心渲染过程 五、调试 常用的调试工具 Chrome控制台调试js使用 移动端测试 六、HTTP网络知识 常见的HTTP状态码 不同请求类型的区别 WEB缓存方案 —————————— 牛客网（www.nowcoder.com） - 专业IT笔试面试备考平台 - 最全C++JAVA前端等互联网技术求职题库 - 全面提升IT编程能力 - 程序员交友圣地 分享了一些Web前端的面试题，限时一小时，你看看自己能够答出多少道！ 放心，这些面试题都是一些非常基础的知识，只要你在平时认真听课、学习了，那么这些面试题肯定不会难道你。 建议：虽然没有人监督你，但还是希望你不要去寻找答案，脱离百度，拿起纸笔，你试一下自己究竟能够答出个什么水平！有没有真本领？答案尽在这些面试题里！那么，你准备好了吗？OK！计时开始！ 一、HTML常见题目 01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？ 02、HTML5为什么只需要写？ 03、行内元素有哪些？块级元素有哪些？空(void)元素有那些？ 04、页面导入样式时，使用link和@import有什么区别？ 05、介绍一下你对浏览器内核的理解？ 06、常见的浏览器内核有哪些？ 07、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？ 08、如何区分HTML和HTML5？ 09、简述一下你对HTML语义化的理解？ 10、HTML5的离线储存怎么使用，工作原理能不能解释一下？ 二、CSS类的题目 01、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 02、CSS选择符有哪些？哪些属性可以继承？ 03、CSS优先级算法如何计算？ 04、CSS3新增伪类有那些？ 05、如何居中p？如何居中一个浮动元素？如何让绝对定位的p居中？ 06、display有哪些值？说明他们的作用。 07、position的值relative和absolute定位原点是？ 08、CSS3有哪些新特性？ 09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景？ 10、用纯CSS创建一个三角形的原理是什么？ 三、Java类的题目 01、介绍Java的基本数据类型。 02、说说写Java的基本规范？ 03、Java原型，原型链？有什么特点？ 04、Java有几种类型的值？(堆：原始数据类型和栈：引用数据类型)，你能画一下他们的内存图吗？ 05、Java如何实现继承？ 06、Java创建对象的几种方式？ 07、Java作用链域？ 08、谈谈This对象的理解。 09、eval是做什么的？ 10、什么是window对象？什么是document对象？ OK，一小时到了，这个时间可不算短了，那么这些面试题你答出了几道呢？你写的答案正确了吗？现在你可以去翻看答案了。 如果你答出了绝大多数的或者是全部的题，并且答案也正确了，那么恭喜你…… 你这时心里是不是有点小窃喜，认为自己有能力拿高薪了？虽然我也很想这么告诉你，但事实上这只能表明你的基础扎实，毕竟这只是一些非常基础的面试题。骚年~继续努力吧！ 如果你只答出了小部分或者答出了大部分题但答案不正确，那么我只想说：“骚年，你的水平还差的远呢。”连这么基础的题你都打不出来，还想拿高薪？回去再练一段时间吧！ 扎实的基础是你拿高薪的重要武器，如果你连基础都不扎实，那么想要攻克“高薪”这个厚实的堡垒，那只是痴人说梦罢了。 1.前端框架类问题，问你会不会用vue react啊 2.语言类，问你一些JavaScript语言的问题 3.项目经验，让你讲讲做过的项目，遇到的问题和解决之道