- 一句话说明rem和em的区别
两者都是转化到px, 区别在于rem是根据根元素的字体大小去转化( 此字体大小会被浏览器中字体大小的设置影响,除非显式重写一个具体单位),如html元素设为16px, css设置10rem就是160px; em是根据使用em的元素的字体大小(此字体大小受从父元素继承过来的字体大小,除非显式重写与一个具体单位), 如为16px, 10em就是160px。
- 快速删除node_modules
手动删除通常会遇到文件名过长的情况,一层一层的将文件名改短虽可行确毫无效率。根据官方提供的方法, 只需两步,终身无忧:
npm install rimraf -g
rimraf node_modules
- 最简单的数组去重方法
function merge(arr) { if(!Array.isArray(arr) | arr.length == 0) { return [] } var res = []; for(var i=0;i<arr.length;i++) { if(res.indexOf(arr[i]) == -1){ res.push(arr[i])
} } return res; }
- ES6数组去重方法
[...new Set([2,2,2,4,5,4])] // [2,4,5]
- 异步加载方式: async, defer, 动态脚本创建
defer是在HTML解析完之后才会执行,如果是多个,按照加载的顺序依次执行
async是在加载完之后立即执行,如果是多个,执行顺序和加载顺序无关
- 大型web应用对速度的追求并没有止步于仅仅利用浏览器的缓存,因为浏览器缓存始终只是为了提升二次访问的速度,对于首次访问的加速,我们需要从网络层面进行优化,最常见的手段就是CDN(Content delivery Network)内容分发网络加速。通过将静态资源(如js css 图片等)缓存到离用户很近的相同网络运营商的CDN节点上,不但能提升用户的访问速度,还能节省服务器的宽带消耗,降低负载。
- 移动端引入fastclick后, 只要双击 chrome就报错
- 这是因为Chrome及其内核浏览器更新了一项新特性,原先只会报黄色等级的错误,现在升到红色了,为了流畅度 。click事件在移动端有个300ms延时,就是因为避免和手机双击行为发生冲突。可以通过设置 touch-action:manipulation(表示浏览器只允许进行滚动和持续缩放操作,类似双击缩放这种非标准操作就不可以)拒绝双击行为,则显然,300ms延时就不复存在,因此,html {touch-action: manipulation;}声明可以用来避免浏览器300ms延时问题。