零散点总结

  • 一句话说明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延时问题。
原文地址:https://www.cnblogs.com/yuhanao/p/10605420.html