webpack是开发工具，面试考点重点在配置和使用，原理理解不需要太深。一、基本配置1、拆分配置和merge将公共配置跟dev和prod的配置拆分，然后通过webpack-merge对配置进行整合。2、启动本地服务dev环境启动devserver配置。3、处理ES6使用babel-loader，针对对应目录的js进行代码转换。4、处理样式使用postcss-loader、css-loader、st

前端面试题整理已同步到掘金，掘金地址：https://juejin.cn/post/7075332630417244173个人整理了很多网上常见的面试题，希望也能通过这来复习内容有点多，可能CSDN上预览效果不好

css相关1、css定义的权重：标签的权重为1，class的权重为10，id的权重为100如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现2、谈谈浮动和清除浮动浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。js相关1、.写一个通用的事

HTML基础1、什么是HTML语义化？表示选择合适的标签（语义化标签）便于开发者阅读和写出更优雅的代码2、为什么要使用语义化标签？在没有CSS样式的情况下，页面整体也会呈现很好的结构效果更有利于用户体验更有利于搜索引擎优化代码结构清晰，方便团队开发与维护3、HTML5新特性有哪些？语义化标签音视频处理canvas/webGLhistoryAPIrequestAnimationFrame地理位置we

1、link和@import的区别本质上，这两种方式都是为了加载css文件，但还是存在细微的差别。差别1：老祖宗的差别，link属于XHTML标签，而@import完全是css提供的一种方式。link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。差别2：加载顺序的差别：当一个页面被夹在的时候（就是被浏览者浏览的时候），link

近日逛知乎，看到有很多大佬分享自己的面试经验，其中包含了很多面试题。仔细学习一下这些面试题，说不定会对自己的工作有帮助。在这里整理一下。CSS相关1、px和em，rem的区别px：px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em：em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。注意：任意浏览

一、js基础类1.描述下类的继承和原型链1原型链继承（对象间的继承）//要继承的对象varparent={name:"baba"say:function(){alert("Iambaba");}}//新对象varchild=proInherit(parent);//测试alert(child.name);//"baba"child.say();//"Iambaba"2.类式继承（构造函数间的继承）

本人2017年毕业，从事前端工作1年，去过新华三，海康、大华面试，结合今天和之前的面试经历，整理了一些面试题。因为本人vue的项目经验不是很足，被问到关于vue的问题也不是很多。ps：在h3c被问到的问题自己整理的笔记里面都有，但是很多答案只有个印象，不太记得，略微有点桑心。海康的面试不太愉快，就问了在工作中有没有处理过跨域问题？自学vue的时候有没有碰到什么问题？我说我刚开始准备学es6，问我箭

Javascript数据类型答：null，number，boolean，string，undefinedJavaScript数据类型ECMAscript和Javascript的关系答：ECMAscript是Javascript的规格，Javascript是ECMAscript的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。在日常场合，这两个词是可以互换的。

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

js基本数据类型Number,String,Boolean,null,undefined,object数组去重//方法1：es6letarr=[1,2,3,2,1,3];letnewArr=Array.from(newSet(arr))console.log(newArr)//(3)[1,2,3]//方法2使用filter过滤函数去重。vararr=[1,2,3,1,2,3];varnewArr=

在线阅读http://blog.poetries.top/FE-Interview-Questionsimage目录$HTML，HTTP，web综合问题1、前端需要注意哪些SEO2、的title和alt有什么区别3、HTTP的几种请求方法用途4、从浏览器地址栏输入url到显示页面的步骤5、如何进行网站性能优化6、HTTP状态码及其含义7、语义化的理解8、介绍一下你对浏览器内核的理解9、html5有

什么是盒子模型把所有的网页元素都看成一个盒子，它具有content，padding，border，margin四个属性，这就是盒子模型盒子模型有两种形式：标准盒子模型，怪异盒子模型标准模式，总宽度=width+margin(左右)+padding(左右)+border(左右)属性：box-sizing:content-box;怪异模式，总宽度=width+margin(左右)（即width已经包含

网上找到的各种面试题整理，长期更新。大部分答案整理来自网络，有问题的地方，希望大家能指出，及时修改;技术更新迭代，也会及时更新博客原地址：https://finget.github.io/2019...前端前端性能优化1.清理HTML文档HTML，即超文本标记语言，几乎是所有网站的支柱。HTML为网页带来标题、子标题、列表和其它一些文档结构的格式。在最近更新的HTML5中，甚至可以创建图表。HTM

原创不易，如需转载请【联系作者】或【署名作者并注明文章出处】js基础技术VUEvue2双向绑定原理get时collect，set时notifyv-model原理，监听input输入框的input事件如果直接document.querySelector('xxxinput').value=newvalue，v-model对应的值会变化么，为什么input与change区别computed与watch

原创不易，如需转载请【联系作者】或【署名作者并注明文章出处】js基础技术VUEvue2双向绑定原理get时collect，set时notifyv-model原理，监听input输入框的input事件如果直接document.querySelector('xxxinput').value=newvalue，v-model对应的值会变化么，为什么input与change区别computed与watch

原创不易，如需转载请【联系作者】或【署名作者并注明文章出处】js基础技术VUEvue2双向绑定原理get时collect，set时notifyv-model原理，监听input输入框的input事件如果直接document.querySelector('xxxinput').value=newvalue，v-model对应的值会变化么，为什么input与change区别computed与watch

原创不易，如需转载请【联系作者】或【署名作者并注明文章出处】js基础技术VUEvue2双向绑定原理get时collect，set时notifyv-model原理，监听input输入框的input事件如果直接document.querySelector('xxxinput').value=newvalue，v-model对应的值会变化么，为什么input与change区别computed与watch

文章目录一、HTML篇语义化标签二、CSS篇50道基础题常见布局居中问题BFCBEMCSS预处理器常见单位三、JavaScript篇数据类型原型链继承闭包newthisVO和AO词法作用域深拷贝和浅拷贝事件冒泡、事件捕获、事件代理排序算法手写常见原理面试题汇总四、ES6Map和SetPromiseclass扩展运算符箭头函数export、import五、AJAX篇AJAX原理六、浏览器篇JS运行机

2018-2020年web前端面试题整理成PDF文档，内容主要包括有html、css、JavaScript、DOM、HTTP、Vue、等等2018面试题：Html1，html语义化2，metaviewport

2018-2020年web前端面试题整理成PDF文档，内容主要包括有html、css、JavaScript、DOM、HTTP、Vue、等等2018面试题：Html1，html语义化2，metaviewport

csscalc,support,media各自的含义及用法？@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。calc()函数用于动态计算长度值。calc()函数支持“+”,“-”,“*”,“/”运算；@media查询，你可以针对不同的媒体类型定义不同的样式。css水平、垂直居中

2018-2020年web前端面试题整理成PDF文档，共83页，内容主要包括有html、css、JavaScript、DOM、HTTP、Vue等等2018面试题：Html1，html语义化2，metaviewport

1.css样式的优先级和优先级如何计算优先级：!important>内联样式>内嵌样式或者引入的外部样式文件内嵌样式或者引入的外部样式文件：通过权重计算优先级，权重高的优先级高。如果权重相同，按加载顺序判断，先加载的会被覆盖（就近原则）选择器优先级：id选择器>class选择器>标签>*通用选择器>继承权重：id选择器100class选择器10标签110个class选择器的权重不会大于1个id选择

1.一些开放性题目1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。2.项目介绍3.如何看待前端开发？4.平时是如何学习前端开发的？5.未来三到五年的规划是怎样的？position的值，relative和absolute分别是相对于谁进行定位的？absolute:生成绝对定位的元素，相对于最近一级的定位不是static的父元素来进行定位。fixed（老IE不支持）生成

HTTP常见状态码2开头（请求成功）表示成功处理了请求的状态代码200（成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。201（已创建）请求成功并且服务器创建了新的资源。202（已接受）服务器已接受请求，但尚未处理。203（非授权信息）服务器已成功处理了请求，但返回的信息可能来自另一来源。204（无内容）服务器成功处理了请求，但没有返回任何内容。205（重置内容）服务器成功处理了

一、前端基础知识1、html，css方面的知识1）盒子模型2、js方面的知识1）js的基础类型2）js常见操作字符串的函数3）js常见操作数字的函数4）js常见操作数组的函数5）js常见操作对象的函数6）闭包的概念，以及闭包的运用7）函数科里化8）同步和异步9）promise的原理和使用方法10）代码模拟promise11）asyncawait的使用方法12）数据劫持是什么，如何实现二、前端通讯知

1.两个div标签，如何控制标签左边固定，右边自适应，左边div宽度为100px.(1)左边设置浮动，右边不设置宽度自定布局到右边Document.container{width:1000px;height:500px;border:1pxsolid#ccc;}.left{width:100px;height:100%;background:red;float:left;}.right{overf

前端面试题整理20201.一些开放性题目1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。2.项目介绍3.如何看待前端开发？4.平时是如何学习前端开发的？

1.restful协议规范2.border线：border-style:dottedsoliddoubledashed;上边框是点状右边框是实线下边框是双线左边框是虚线3.怎么判断两个对象相等？obj={a:1,b:2}obj2={a:1,b:2}obj3={a:1,b:2}思路：转换成字符串比较JSON.stringify(obj)==JSON.stringify(obj2);//trueJSO

前言从前端学习到找一份合适的工作，大大小小的面试必不可少，所以我对初级前端面试题进行了初步整理，也方便自己查阅，也希望对小伙伴们有所帮助！HTML——————————————————————————————————————HTML语义化HTML语义化就是让页面内容结构化，它有如下优点1、易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。2、有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的

前端优化可以做什么减少http请求：合并js和css文件（使用webpack或其它打包工具打包）小图片使用雪碧图（需要的图片和ui说下，交给ui做就可以）使用base64表示简单的图片用内容分发网络cdncdn主要用于静态文件，如css，js和flash。cdn，自动寻找最近的物理机服务器下载web组件简js和css使用jsmint和gzip精简文件，css精简技术点：#660066优化#606，

前言因为面试的原因，最近又开始关注前端面试题，浏览过网上很多面试题集合，有很多小伙伴整理的很全面，但是我发现其中有很多技术点在当下已不再流行，而面试题一般都是映射开发中常遇到的一些技能和问题，再结合最近面试中遇到的一些面试题，在这里汇总整理一下，内容有转载过来的，也有自己整理的，后续会定期更新。另外我也写了一篇文章总结前端面试中遇到的套路，点击浏览。参考链接：https://github.com/

1.一些开放性题目1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。2.项目介绍3.如何看待前端开发？4.平时是如何学习前端开发的？5.未来三到五年的规划是怎样的？position的值，relative和absolute分别是相对于谁进行定位的？absolute:生成绝对定位的元素，相对于最近一级的定位不是static的父元素来进行定位。fixed（老IE不支持）生成

手撕代码篇考察new和闭包(某节)//不使用全局变量前提下实现如下逻辑leta=newFoo()//a.id->1letb=newFoo()//b.id->2//使用闭包constFoo=(function(){letindex=1;returnfunction(){this.id=index++;}})();leta=newFoo()//a.id->1letb=newFoo()//b.id->2

一、HTML部分1.什么是DOCTYPE？DOCTYPE是DocumentType的简写，在页面中，用来指定页面所用的HTML或者XHTML的版本。想要制作符合标注的页面，DOCTYPE声明是必不可少的组成部分。只有确定一个正确的DOCTYPE，XHTML或者HTML里的标识和CSS才能正常生效。以XHTML1.0为例：XHTML1.0中有3种DTD（文档类型定义）声明可以选择：过渡的（Trans

1.CSS中类(classes)和ID的区别。1.书写上的差别：class名用“.”号开头来定义，id名用“#”号开头来定义；2.调用上的区别：在同一个html网页页面中class是可以被多次调用的（在不同的地方）。而id名作为标签的身份则是唯一的，id在页面中只能出现一次。在js脚本中经常会用到id来修改一个标签的属性3.id作为元素的标签，用于区分不同结构和内容，而class作为一个样式，它可

文章目录有一个200x200的div，如何让它在不同分辨率的屏幕上上下左右居中展示，写出CSS实方式。有哪些清除浮动的方式请简述。h5有哪些新特性语义化标签有什么作用使用什么方法可以减少页面请求的加载时间？bootstrap的实现原理CSS的选择器有哪些?层级关系是什么样的px和em有什么区别实现一个左中右居中布局，左右两端的盒子宽度为200，如何使中间的盒子自适应展示，请写出结构和样式。"5"+

js篇js基本数据类型5中基本数据类型：null、undefined、string、number、booleansetTimeout和setInterval《JavaScript高级程序设计》这本书里面，介绍了很多关于setTimeout函数的神奇使用，今天来介绍下第一个——使用setTimeout代替setInterval进行间歇调用。“在开发环境下，很少使用间歇调用（setInterval），

完整版推荐在线阅读https://poetries1.gitee.io/fe-interview关注公众号（前端进阶之旅）获取更多资讯$HTML，HTTP，web综合问题1、前端需要注意哪些SEO合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；descriptio

1.一些开放性题目1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。2.项目介绍3.如何看待前端开发？4.平时是如何学习前端开发的？5.未来三到五年的规划是怎样的？position的值，relative和absolute分别是相对于谁进行定位的？absolute:生成绝对定位的元素，相对于最近一级的定位不是static的父元素来进行定位。fixed（老IE不支持）生成

1、node有哪些特征，与其他服务器端对比特征：单线程、事件驱动、非阻塞I/Onode无法直接渲染静态页面，提供静态服务node没有根目录的概念node必须通过路由程序指定文件才能渲染文件node比其他服务端性能更好，速度更快2、CommonJS中require/exports和ES6中import/export区别CommonJS模块的重要特性是加载时执行，及脚本代码在require的时候，就会

一、HTML/CSS简述对Web语义化的理解？就是让浏览器更好的读懂你写的代码，在进行HTML结构、表现、行为设计时，尽量使用语义化的标签，使程序代码简介明了，易于进行Web操作和网站SEO,方便团队协作的一种标准，以图实现一种“无障碍”的Web开发。①去掉或者丢失样式的时候能够让页面呈现出清晰的结构；②有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文

1、es5和es6的区别，说一下你所知道的es6ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完成标准化ECMAScript6，即ES6，是ECMAScript的第六次修订，于2015年完成，也称ES2015ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率ES6新增的一些特性：1）let声明变量和const声明常量，两个都有块级作用域ES5中

目录一、当你调用setState的时候，发生了什么？二、在React当中Element和Component有何区别？三、什么时候在功能组件(ClassComponent)上使用类组件(FunctionalComponent)？四、什么是React的refs，为什么它们很重要？五、React中的keys是什么，为什么它们很重要？六、受控组件(controlledcomponent)与不受控制的组件(

完整面试题整理详情：https://poetries1.gitee.io/fe-interview关注公众号：前端进阶之旅，获取更多资讯$HTML，HTTP，web综合问题1、前端需要注意哪些SEO合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；descripti

目录1.函数调用相关1.函数调用相关functionFoo(){Foo.a=function(){console.log(1)}this.a=function(){console.log(2)};}//=>把Foo当做类，在原型上设置实例公有的属性方法=>实例.a〇;Foo.prototype.a=function(){console.log(3)}//=>把Foo当做普通对象设置私有的属性方法=

**前端面试题整理面试**$HTML，HTTP，web综合问题1、前端需要注意哪些SEO合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，

classjQuery{constructor(selector){constresult=document.querySelectorAll(selector)console.log(result)constlength=result.lengthfor(leti=0;i{ele.addEventListener(type,fn,false)})}}//考虑扩展性//插件jQuery.proto

Class的使用：//父类classPeople{constructor(name){this.name=name}eat(){console.log(`${this.name}eat`)}}//子类classStudentextendsPeople{constructor(name,number){super(name);//super使用父类帮忙定义this.namethis.number=n