前端HTML-CSS-JS知识点

CSS盒模型所有的HTML元素都可以看作是一个盒子，它包括：边距、边框、填充和实际内容。flexlayout灵活布局，任何容器都可以使用flex布局，以Webkit为核心的浏览器必须加-webkit前缀。.box{显示：-webkit-flex；/*Safari*/display:flex;}cssunit单位有很多，例如：绝对长度和相对单位，绝对长度有px,cm等，相对单位rem,em,vh,vw等菜鸟教程-CSSunitcssselector类选择器、id选择器、属性选择器、*选择器、标签选择器等各种复杂的选择器查看下面的链接。菜鸟教程--理解所有选择器级联上下文z-index常见页面布局浮动布局、定位布局、flex布局、网格布局、表格布局响应式布局@mediamediaquery可以直接写在css样式中@mediatypeand(条件1)and(condition2){cssstyle}也可以使用@importimport@importurl("css/moxie.css")alland(max-width:980px);也可以在链接css预处理器，后处理器预处理器:可以转换为CSS文件，但它们比CSS灵活得多。Sass、LESS和Stylus是目前最主流的CSS预处理器。CSSpostprocessor是对CSS进行处理并最终生成CSS的预处理器。css3的新特性太多了。transition,animation,transform,andnewselectors等之前记录的css3新特性：css3新特性展示常用值为none,inline,inline-block,block等相邻两个inline-block节点出现间隔添加字体-size:0到父框，然后给子元素加上对应的font-size。metaviewport移动端适配视口是浏览器显示视图的区域。metaviewport标签允许开发者控制显示页面的内容区域。通过设置宽高画一个三角形为0，设置边框相关属性实现三角形border-color:transparenttransparent#000transparent;1pixelborder问题百度看JSprototype/prototypechain/constructor/instance/inheritance实现继承有几种方式五种：对象模拟，call()方法方法，apply()方法方法，原型链方法，混合方法参考:实现继承的五种方式arguments对象JavaScript没有重载，使用arguments对象可以模拟重载，通过数组下标访问实际参数。arguments.length是函数实际参数个数，arguments.callee是指函数自身的数据类型判断typeof运算符可以判断数据类型，它返回一个表示数据类型的字符串（返回结果只能包括number,boolean,string,function,object,undefined,symbol)toString.call(testObj)instanceofmoremethodsscopechain,closure,scope原生Ajax编写IE7及以上浏览器支持XMLHttpRequest对象XHR使用open()发起请求对于发送，接受三个参数，请求类型，请求的URL和一个布尔值是否异步发送。xhr.open('get','example.php',false)调用send()方法，接收一个参数，即请求体要发送的数据。如果不需要发送数据，则传入nullxhr.send(null)，因为第二次请求是同步的，直到请求完成后才会执行下面的代码。收到响应后，响应数据会填充到xhr对象的属性中。相关属性介绍如下：responseText：作为相应的正文返回；responseXML：如果响应的内容类型是“text/xml”或“application/xml”，该属性一般会保存包含响应数据的XMLDOM文档；status：响应的HTTP状态；statusText：HTTP状态的描述；完整请求示例：（xhr使用封装的createXHR函数，Elevation3第572页）xhr.open('get','example.txt',false);xhr.send(null);if((xhr.status>=200&&xhr.status<300)||xhr.status==304){alert(xhr.responseText)}else{alert("请求不成功:"+xhr.status);}objectdeepcopy,shallowcopyshallowcopy--仅复制引用而不复制值。varobj1={name:'klaus'}varobj2=obj1obj2.name='crazy'console.log('obj1:',obj1)//{name:"crazy"}console.log('obj2:',obj2)//{name:"crazy"}我们只想复制对象的数据，不想修改原来的值，所以我们进行深拷贝。如果对象没有功能，只是键值对数据，使用JSON方法varobj2=JSON.parse(JSON.stringify(obj1))第三方库lodashvarobjects=[{'a':1},{'b':2}];vardeep=_.cloneDeep(objects);console.log(deep[0]===objects[0]);//=>falsereferenceimagelazyloading，预加载的原理是在img中放一个占位符，真正的图片地址放在img标签的另一个属性（customattribute）上。当用户滚动页面或点击图片加载时，该属性的值将赋值给src。预加载会消耗服务器前端的性能来换取更好的用户体验。参考实现页面加载进度条this关键字函数式编程手动实现parseInt为什么有同源策略如何判断两个对象是否相等事件模型事件委托，代理如何让事件先冒泡再捕获窗口onload事件和domcontentloadedfor...in迭代和for...of函数curriedcallapply区别，native实现bindcall，apply,bind用法和区别：角度可以是参数，绑定规则（显示绑定和强绑定）、运行效率、运行条件。async/await立即执行功能，使用场景设计模式（需要说说如何实现，应用，优缺点）/单例模式实现iframe有什么缺点数组有什么缺点数组去重数组常用方法找arrayduplicates按数组压扁数组排序每一项与特定值的差异BOM属性对象方法服务端渲染垃圾收集机制Eventloop进程和线程任务队列如何快速将字符串转成千位精度的数字ES6声明let和constlet是es6新加入的，用于声明变量，和var类似，区别如下：var没有块级作用域，let有var，可以重复声明变量，而let不能。在声明变量之前使用变量会报错，而var会报undefineddestructuringassignmentfromthearray从对象中提取值，为变量赋值，声明类和继承：类，扩展类类，添加属性和原型是不同的类User{name="John";}letuser=newUser();alert(user.name);//Johnalert(User.prototype.name);//undefined必须使用new来调用non-enumerable，原型中enumerable为false，总是使用strictPromise解决ajax回调地狱生成器（异步编程，yield，next()，await，async）await/async语法糖箭头functionthis指向问题，扩展操作符map和setmap类似于对象，而set类似于数组，但有区别。你用过吗，如何实现数组去重，map数据结构有什么优势？set可以用来对数组进行去重，因为set不会添加重复值，使用展开运算符...（forof在内部使用）将set转换为数组[...newSet(array)]map优点：inmap不仅字符串可以作为键，所有类型的值（包括对象）都可以作为键。Map结构提供了“值-值”的对应关系，是Hash结构更完整的实现。ES6如何编译成ES5，css-loader原理，过程ES6成ES5常见例子Babel使用es5实现es6类浏览器输入url显示页面过程发生了什么？浏览器查找域名的IP地址，首先查看本地hosts文件中是否有对应的规则。如果有，就直接使用里面的ip地址。如果没有，浏览器会向本地DNS服务器发送DNS（DomainNameSystem，域名系统）请求，本地DNS服务器一般由您的网络接入服务器提供商提供，比如中国电信、中国移动。浏览器向Web服务器发送HTTP请求详解重绘和回流重绘（repaint）：当元素样式的改变不影响布局时，浏览器会使用重绘来更新元素。这时候只需要在UI层面重新像素化绘制，所以损失更小Reflow（回流）：当某个元素的尺寸、结构或者某些属性被触发时，浏览器会重新渲染页面，也就是称为回流焊。这时候浏览器需要重新计算，计算完需要重新布局页面布局，所以重操作会触发回流操作：页面第一次渲染，浏览器的大小window改变了，元素的大小、位置和内容也改变了，元素的字体大小也改变了。添加或移除可见的dom元素激活CSS伪类(eg:hover)查询一些属性或调用一些方法scrollTo()的回流一定会触发重绘，重绘不一定会触发回流。重绘开销小，回流成本高。防抖和节流cookies、session、sessionStorage、localStorage浏览器内核