前端下午茶

Yarn的优点？速度快 。速度快主要来自以下两个方面：并行安装：无论 npm 还是 Yarn 在执行包的安装时，都会执行一系列任务。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。而 Yarn 是同步执行所有任务，提高了性能。离线模式：如果之前已经安装过一个软件包，用Yarn再次安装时之间从缓存中获取，就不用像npm那样再从网络下载了。安装版本统一：为了防止拉取到不同的版本，Yarn 有一个锁定文件 (lock file) 记录了

processprocess.env表示的是当前系统中的一些环境。环境变量分为两种：用户变量、系统变量。设置环境变量的两种语法： windows系统→ set a = 1，mac系统→ export b = 2执行代码时传入环境node test.js --port 8085 --method kill// 解析命令行传入的指令 let env = process.argv.slice(2).reduce((memo, current, index, arr) => { i

首先区分一下 es modules 和 common.jses modules 用于浏览器环境的js模块化，export default 、export 来导出 。编译时引入。common.js 用于node.js 平台，module exports 、 exports 来导出。运行时导入。es modules 可以静态解析 哪个模块引入但没有调用 ， 最后打包bundle.js 就不会打包那些没引入的模块。另外，tree-shaking 除了可以shake掉没有用到的模块，还可以摇掉没有用到的.

使用LinkLink是react-router4中很常见的一个类，很多人在页面跳转的时候都会用到它。在用Link的时候传递数据的方法如下：import { Link } from 'react-router-dom';//不传递数据<Link to={模块路径}>{内容}</Link>//传递数据,在目标模块用this.props.location.state调用数据。 <Link to={{ pathname: {模块路径},

1.从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系)2.开启网络线程到发出一个完整的http请求（这一部分涉及到dns查询，tcp/ip请求，五层因特网协议栈等知识)3.从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等)4.后台和前台的http交互(这一部分包括http头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）5.单独拎出来的缓存

a标签里的herf写javascript：是为了区分跳转链接还是执行javascript代码。document.write 可以解析标签。alert（）的弹出会阻断程序向下执行。单引号 双引号 反引号 里面的都算是字符串。Number（）能转成数字就转，不能就返回NaN。parseInt（）一位一位解析，保留可以转数字的部分。不能转返回NaN。不认识小数点。比如true ，Number会把它转为1 ，parseInt会转为NaN。parseFloat（）和p..

JS basical knowledge数据内存变量三者之间的关系Depressed emotion数据什么是数据？存储在内存中代表特定信息的东西，本质上是二进制的数字1010…数据的特点：可传递、 可运算内存什么是内存？内存条通电后产生的可存储数据的空间。（临时的）内存产生和死亡：内存条（电路板）–>通电 -->产生内存空间 -->存储数据并对数据进行处理 -->断电 --> 内存空间和数据都消失。一块小内存的两个数据内部存储的数据地址值

JS basical knowledge值类型和引用类型判断基本类型typeof判断对象的具体类型instanceof全等===关于数据类型的相关问题每日情感值类型和引用类型数据（值）类型值String任意字符串Number任意数值Booleantrue/falsenullnullundefinedundefined对象（引用）类型值Object任意对象function特别的对象，一种可以执行的对象Array

BFC、布局、属性选择符、非IE常见bugBFC计算值的表达式 calc（）width的属性值雪碧图非IE浏览器常见bug属性选择符（通过html属性选择元素）浏览器四大内核结构性伪类每日一丧BFCBFC:块级格式化上下文 -> 独立的渲染区BFC布局规则：一、内部的Box会在垂直方向，一个接一个地放置。二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）三、每个元素的margin box的左边， 与包含块

有四个transition属性可以影响过渡效果指定要执行过渡的属性 transition-property:过渡效果持续的时间 transition-duration：过渡的时序函数 transition-timing-function过渡效果的延迟 transition-delay简写属性transition指定要执行过渡的属性 transition-property:值width height，多个属性间使用逗号隔开。如果所有属性都需要过渡，可以用all关键字。大部分属性都支持过渡效果。只要

PC端高度自适应内容多时自适应高度，内容少时有最小高度没有最小高度，DIV完全自适应高度内容多时自适应高度，内容少时有最小高度min-height的值是分界点，小于min-height 容器高度保持在min-height值，大于min-height值时容器自适应高度。a: 内容增加，会把父元素高度撑开。b: 当内容减少的时候，让容器保持一个最小高度。最小高度的设置：min-height没有最小高度，DIV完全自适应高度子元素高度跟随父元素高度发生变化：*想要全局都用百分比设置宽

其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，这句话里有两个关键，一个是“离它最近的祖先元素”，意思是那个参照元素不一定是父元素，也可以是它的爷爷、爷爷的爷爷等等，如果它的祖先里同时有2个及以上的定位元素，就参照离它最近的一个元素定位还有一个是“已定位”，这个定位也不一定非要是相对定位，也可以是绝对定位，为什么一般都是用相对定位呢，因为相对定位的特性是虽然它定位了，就算给了偏移量它离开了原来的地方，但是它原来占的地方也不会让出来的，这样的好处是原来在它周围的其他元素不会因为它的离开

关于定位相对定位绝对定位粘性定位固定定位超长banner图如何居中相对定位相对定位是参照于元素在文档流中位置来定位的。position：relative 不会脱离文档流，占据空间。相对定位会提升元素的层级，但并没有脱离文档流。※相对定位不会改变元素的性质，块还是块，行内元素还是行内元素。绝对定位绝对定位的特点：1.开启绝对定位后，不设置偏移量，元素的位置不会发生变化 2.开启绝对定位后，元素会从文档流中脱离3.绝对定位会改变元素的性质，行内变成块，块的默认宽高被内容撑开（块在文档 流中

关于元素类型关于设置display：none的元素设置inline-block的效果置换元素与非置换元素vertical-align 实现元素居中关于设置display：none的元素添加display：none声明的元素，在dom tree 和 render tree的区别：在dom层，display：none的元素是在dom tree结构里面（加载的）在render层：display：none的元素是不在 render tree。设置inline-block的效果inline-block

2个属性3个技巧空白空间的处理write-space溢出属性overflow单行文本溢出省略号显示布局页面的前期规划新闻列表流程空白空间的处理write-space属性值：prepre-wrappre-linenowrap 不换行溢出属性overflowoverflow的两个子属性 overflow-x overflow-y属性值：visible 默认值scroll 产生滚动条auto 自动hidden 溢出隐藏inherit 继承单行文本溢出省略号显示套餐用法，直接上

背景模块背景颜色background-color背景图：background-image：url（）；背景图平铺状态：background-repeat：；背景图的位置：background-position：；背景图大小background-size背景图的固定background-attachment背景的简写属性background背景颜色background-color默认情况下背景颜色会延伸到border的区域，把border设置成点状可观察。背景图：background-image：url

文本模块 缩进text-intent间距 xxx-spacing控制文本大小写 text-transform文本修饰 text-decoration水平对齐方式text-align垂直对齐方式vertical-align文本加粗 font-weight控制文本倾斜font-style文本换行处理解决input的border内嵌问题列表符号（不常用）缩进text-intent首行缩进：text-intent：2em；悬挂式缩进 text-intent：-999px；间距 xxx-spacing字间距

关于CSS的零散知识link 和 import区别样式表的权重关系样式表的层叠性导入外部样式表的两种方法link 和 import区别link属于html @import 属于css加载顺序：link和html同时加载 而 @import 等待html记载完毕之后加载兼容性：link更好一些。js操作dom样式的时候会有不同。样式表的权重关系css三种样式表：内联样式、内部样式表、外部样式表内联样式权重最高。其次，外部样式表和内部样式表权重相等，同时出现外部和内部样式表

a标签中的rel：nofollownofollow是HTML元标签(meta)的content属性和链接标签(a)的rel属性的一个值，告诉机器(爬虫)无需追踪目标页，为了对抗blogspam(博客垃圾留言信息)，Google推荐使用nofollow，告诉搜索引擎爬虫无需抓取目标页，同时告诉搜索引擎无需将的当前页的Pagerank（网页级别、网页排名）传递到目标页。但是如果你是通过sitemap直接提交该页面，爬虫还是会爬取，这里的nofollow只是当前页对目标页的一种态度，并不代表其他页对目标页的态度

##html页面的重现流程浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个tag都是DOM树中的1个节点，根节点就是我们常用的document对象。DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而FF会去掉_开头的样式。3、DOM Tree 和样式结构体组合后构建render tree.

函数的prototype1.函数的prototype属性*每个函数都有一个prototype属性，它默认指向一个Object空对象(即称为原型对 象)原型对象中都有一个属性constructor，它指向函数对象。2.给原型对象添加属性(一般是方法)作用： 函数的所有实例对象自动拥有原型中的属性(方法)显式原型与隐式原型每个函数function都有一个prototype，即...