第二十二天 - RomanticWineEstate/romantic-wine-estate GitHub Wiki

前天内容: 1.flex布局. 学姐本意让我们用flex布局,但我们没用到,我们将px转换成了rem来解决自适应布局问题.至于rem的具体操作大家都会,我就不赘述了.而flex,大家可以看在淘宝那看,源码100多行. 2.src与href区别? href:用来建立当前元素和文档之间的链接 src:src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置. 3.doctype作用? 告知浏览器的解析器用什么文档标准解析这个文档,规避浏览器的怪异模式. (1)严格模式：页面排版和js解析是以该浏览器支持的最高标准(W3C)来执行。

(2)混杂模式：不严格按照标准模式执行，主要用以兼容旧的浏览器，向后兼容。模拟老式浏览器的行为以防止老站点无法工作。 4.h5页面为什么只需要申明doctype? DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD，因此没有声明DTD。 5.display:none与visibility:hidden区别? (1)display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素； (2)使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。 6.h5的新语义化 增加了一些有特定用处的新标签,是页面可读性更高. 7.dom各种操作 零级操作,如click等. 二级操作addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。 removeEventListener():不能移除匿名添加的函数。 8.axios 只能说大概会用,还是要花时间学 9.闭包 有权访问另一个函数作用域内变量的函数都是闭包。 10.js运行机制 (1)首先判断JS是同步还是异步，同步就进入主进程，异步就进入event table (2)异步任务在event table中注册函数，当满足触发条件后，被推入event queue(setTimeout里的函数并没有立即执行，而是延迟了一段时间，满足一定条件后才去执行的，这类代码，我们叫异步代码。) (3)同步任务进入主线程后一直执行，直到主线程空闲时，才会去event queue(事件队列)中查看是否有可执行的异步任务，如果有就推入主进程中 11.http 内容太多,简述毫无作用,记得买图解http那本书. 12.web性能优化 (1)减少HTTP请求 (2)使用CSS Sprites (3)使用CDN (4)添加Expires头 ... 13.easymock EasyMock 是一套用于通过简单的方法对于给定的接口生成 Mock 对象的类库。它提供对接口的模拟，能够通过录制、回放、检查三步来完成大体的测试过程，可以验证方法的调用种类、次数、顺序，可以令 Mock 对象返回指定的值或抛出指定异常。通过 EasyMock，我们可以方便的构造 Mock 对象从而使单元测试顺利进行。 昨天内容: 1.css选择器及优先级 (1)基本选择器，效率最高; id 、class、标签、* 通用选择器

(2)组合选择器，效率相对来基本选择器来说较低，‘h1,p多类’、‘div p后代’、‘div>p子’、‘div~p 同级’、‘div+p相邻（div同级的后一个元素）’选择器

(3)属性选择器，效率相对来说又低一层，E[arr]、E[att^=”val”]、E[att$=”val”]、E[att*=”val”]

(4)伪类选择器，效率最低，:hover :active :focus :first-child :checked :enabled :nth-child(n) :nth-of-type(n)

  (E:after E:before E:first-letter E:first-line伪元素）

!important级别最高 2.link与import区别 　link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。 (还有其他区别,具体百度) 3.重绘重排 (1)重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

　　触发重绘的条件：改变元素外观属性。如：color，background-color等。 (2)渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

重绘和重排的关系：在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘.所以，重排必定会引发重绘，但重绘不一定会引发重排。 4.svg与canvas区别 Canvas 是基于像素的即时模式图形系统，最适合较小的表面或较大数量的对象，Canvas不支持鼠标键盘等事件。 SVG 是基于形状的保留模式图形系统，更加适合较大的表面或较小数量的对象。Canvas和SVG在修改方式上还存在着不同。绘制Canvas对象后，不能使用脚本和 CSS 对它进行修改。因为 SVG 对象是文档对象模型的一部分，所以可以随时使用脚本和 CSS 修改它们. 5.js事件流 事件流描述的是从页面中接受事件的顺序. (事件冒泡和事件捕获),以及在ie中的写法. 6.雪碧图 优点:1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； 缺点:1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；(具体优缺点还有,百度并记录). 7.阻止事件. (1)1.event.stopPropagation()方法(阻止冒泡) (2)2.event.preventDefault()方法(阻止默认事件). (3)3.return false ；(两个都阻止). 8.交互跨域问题. 跨域是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制. 解决： 方法一：搞一个node 服务器做代理，发出请求到node 服务器，node服务器转发到后端就可以绕过跨域问题。

方法二：据说使用jsonp可以解决（ dataType: 'JSONP',） 9.es6. 特性太多,看博客并记录效果更好. 10.三栏式布局. 有多种方法可以实现,用flex布局实现以前没弄过,一定要自己写出来. 11.原型链?(object.prototype.-proto-指向哪?//null) 看博客并记录效果更好. 12.数组去重 有大概8种方法,需要全部掌握. 13.vue生命周期 Vue实例从创建到销毁的过程，大致有开始创建，初始化数据，编译模板，挂载DOM，渲染->更新->渲染，销毁等过程。 14.v-if和v-show v-if 条件判断，不满足条件的话则不会出现在dom中 v-show 是否显示，不管满不满足条件均会在dom中，若不满足条件，则会设置成隐藏 display:none. 15.伪类和伪元素 伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active. 伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。比如::before表示选择元素内容的之前内容，也就是""；::selection表示选择元素被选中的内容。 16.排序算法 8种排序算法,必须掌握. 17.常见状态码问题,原因及解决方法 比较大,我总结成了txt. 18.lockstorage和sessionstorage localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据. web Storage 是HTML 5引入的一个重要的功能，在前端开发的过程中会经常用到，它可以在客户端本地存储数据，类似cookie，但其功能却比cookie强大的多。cookie的大小只有4Kb左右（浏览器不同，大小也不同），而web Storage的大小有5MB. sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的.