JS 冷知识,运行机制

数组取最小、最大值

var a=[1,2,3,5];
alert(Math.max.apply(null, a));//最大值
alert(Math.min.apply(null, a));//最小值

获取鼠标坐标 :

event.clientX; event.clientY; 

鼠标右击事件 :

document.oncontextmenu=function(){};

图片上传 :

<input type="file"><img src=""/> 上传完可以把图片定义在img标签显示

$("input").on('change',functon(){   var a =$(this).files[0] ; //获取第一个上传的图片   a.type.indexof("image") ; //验证文件的type属性   var reader = new FileReader(); //创建file接口   reader.readAsBinaryString(reader) //将文件转为二进制 无返回值   reader.onload=function(){ //上传完成事件   reader.result //通过,result 访问上传的文件 }   reader。AsDataURL(reader) //将文件转为DataURL 64编码格式 })
注意:
1. 用for-in遍历时,原型链上的属性也会被遍历到,而且是无序遍历。
2. 属性删除用delete, 对象的prototype属性不可被删除;
   可以通过var a = Object.getOwnPropertyDescriptor(Object,'prototype'); 来获取Object 对象的 prototype属性, 可以打印出a.configurable: 为 false   是否可配置;
3  in操作符会向原型链向上查找的 if('age' in object),
   hasOwnProperty() 是否自有属性,而非来自继承  object.hasOwnProperty('age')(用在for in判断过滤原型上的属性)
    propertyIsEnumerable()判断属性是否可枚举;
(经验证,不同的内核实现方式不同,在chrome下不可被delete掉,返回false,但在firefox和IE10下可以被delete掉,返回true,对于函数也是相同的结果)

 函数表达式    var fe = function(){}、(function(){})()  //直接调用(函数)()

拖拽->鼠标跟随
1、绑定鼠标点击事件
2、获取鼠标坐标:clientX clientY (所有浏览器都支持此属性)
3、为容器元素绑定onmousemove (表明可拖拽元素只在容器元素内可拖拽)
4、将拖拽元素设置成绝对定位
5、在onmousemove中改变拖拽元素的left、top (注意left、top的算法)
6、设置left、top限定,禁止元素拖出窗口
7、当前浏览器窗口宽度document.documentElement.clientWidth或document.body.clientWidth
8、拖拽元素绑定onmouseup事件,在此事件中注销onmousemove事件,完成元素拖拽的释放效果 注意可以把left、top 理解成x轴、y轴
Student.prototype = Object.create(Person.prototype); Object.create()方法是创建一个空函数,并把它的参数当作它的原型

1. var arr = [1, 2, 3]; arr.join(); //将数组转为字符串 -> "1,2,3"
  而new Array(n+1).join(str)的原理是,创建一个n+1大小的数组,若用join()方法会 产生含n个“,”的字符串,而str正代 替这些“,”以造成重复n次str参数的字符串。

2. arr.reverse(); //将数组逆序,原数组会被修改 -> [3, 2, 1]

3. arr.sort(); //排序,默认按照字母顺序排序(会把数字转化为字符串排序)原数组会被修改 而如果是数字,则会 取第一位数 的字符顺序进行排序,改完以后原数组会被修改。如果想用sort进行数字上的排序,则应写 入函数参数
function(a,b){return a-b;},这是升序排列,反之降序是b-a。

4. arr.concat(4,5,6); arr.concat(4, [5,6]); //数组合并,原数组未被修改  [1, 2, 3, 4, 5, 6]

5. arr.slice(1, 2); //截取 返回两个index之间部分数组,左闭右开区间,原数组未被修改
6. var fruits = ["Banana", "Orange", "Apple", "Mango"];
splice() 方法用于插入、删除或替换数组的元素。 注意:这种方法会改变原始数组!
fruits.splice(2,0,"Lemon","Kiwi"); //Banana,Orange,Lemon,Kiwi,Apple,Mango
fruits.splice(2,1,"Lemon","Kiwi") // Banana,Orange,Lemon,Kiwi,Mango
fruits.splice(2,2); //Banana,Orange
7 split : 根据特定的字符切割字符串并且返回生成的数组。
例如 : str = “s-aaa-sss-eee-www”;
targetArr = str.slite(“-”); //[‘s’,’aaa’,’sss’,’eee’,’www’]

7.加载状态 配合加载小图标使用 :

document.onreadystatechange = function(){ //页面加载状态改变时的时间
document.readyState =="complete"; //文档加载完后
}

8.图片加载显示配合7:

var img = $("img");
var num = 0;
img.each(function(i){
var oImg = new Image(); //图片对象
oImg.onload = function(){ //图片加载完成后
oImg.onload=null; //防止gif格式图片缓存
num++ ;
var len=img.length;
$(".loading b").html(parseInt(num/len*100)+"%"); //从百分之0到百分之100加载转动的小图标    
if(num >= i){ $(".loading").fadeOut();}
}
}
oImg.src = img[i].src;
window.onresize = function(){}窗口或框架被调整大小事件

 js 闭包:

function f1(){
    var n=999;
    function f2(){
      alert(n); 
    }
    return f2;
  }
  var result=f1();
  result(); // 999

上一节代码中的f2函数,就是闭包。 
闭包就是能够读取其他函数内部变量的函数。
因此可以把闭包简单理解成"定义在一个函数内部的函数"。
闭包就是将函数内部和函数外部连接起来的一座桥梁。
1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存 泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。 
2)1.保护函数内的变量安全,加强了封装性 2.在内存中维持一个变量(用的太多就变成了缺点,占内存)
闭包之所以会占用资源是当函数a执行结束后, 变量i不会因为函数a的结束而销毁, 因为b的执行需要依赖a中的变量。

浏览器渲染原理,
1.客户端浏览器开始从用户向服务器发出请求,服务器响应的将如上的HTML返回给请求的客户端浏览器中。
2.加载从<html>标签开始,并发现<head>标签内有个外部样式文件要加载
3.这时客户端浏览器又向服务器发出一个请求加载css.css文件,服务器响应。
4.此时客户端浏览器继续加载html文件里<body>里的标签,在css.css文件加载完后,同时开始渲染页面。
5.客户端浏览器在<body>里的标签中发现一个<img>标签并且引用了服务器进而的一张名为test.jpg的图片.客户端浏览器又向服务 器发出一次请求。而浏览器不会因为此时正在加载<img>标签里的图片而停止等待图片加载完,浏览器继续渲染还未完成的部分。
6.<img>标签里的图片加载完了,则要显示出来,同时图片会占有一定的面积,又会影响到后面的布局,浏览器不得不又回来重新渲染 一次这部分
7.总算把body里的标签加载及渲染完后,浏览器又发现了一段代码:<script type="text/javascript" src="js/js.js"></script>
8.浏览器又立刻向服务器发出请求加载js.js文件,服务器响应。
9.浏览器又在js.js文件中发现了一段代码是让<div>标签隐藏的代码,此时浏览器又要重新去渲染被隐藏的<div>部分。
10.最后到浏览器发现了</html>为止。
从上述简单的说了下浏览器加载HTML页面原理后,会明白很多时候页面打开慢的原因。页面中向服务器请求的次数多会影响到打开速度,重新渲染局部的次数量也会影响到页面打开的速度,当然这只是有时候页面打开速度慢一部分原因。
对于这种来回渲染,内行叫为reflow,reflow几乎是无法避免的,我们不能因为怕会重新渲染而去丢掉一些页面效果。但是reflow是可以优化的,比如图片在css.css样式文件中就定义好图片的高度,这要会减少重新渲染的次数。另外还有一次词叫repaint,叫重绘,repaint如果只是改变如背景颜色或者文字的颜色,repaint的速度要比reflow的速度明显快的多。

前端优化:
1、请减少HTTP请求基本原理:
一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接, 然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对 这些数据解释执行。而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时,将会频繁的与服务器建立连接,与释放连接 ,这必定会造成资源 的浪费,且每个HTTP请求都会对服务器和浏览器产生性能负担。
解决办法:
1合并图片(css sprites)雪碧图,
2合并CSS和JS文件;
3图片较多的页面也可以使用 lazyLoad(懒加载) 等技术进行优化。

2、请正确使用 Repaint 和 Reflow
Repaint(重绘)就是在一个元素的外观被改变,但没有改变布局(宽高)的情况下发生
Reflow(重排)就是DOM的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性
解决办法 :
1 style属性改变结点样式的话,每设置一次都会导致一次reflow,所以最好通过设置class的方式
2 有动画效果的元素,它的position属性应当设为fixed或absolute,这样不会影响其它元素的布局

3、请减少对DOM的操作
4、使用JSON格式来进行数据交换
JSON是一种轻量级的数据交换格式,独立于语言的文本格式JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
XML序列化相比,JSON序列化后产生的数据一般要比XML序列化后数据体积小

vue基础
vue生命周期简介
1 创建前状态 ?beforeCreate 全 undefined
2 创建完毕状态 created el 为undefined //初始化状态
3 挂载前状态 beforeMount
4 挂载结束状态 mounted 全有值 挂载Dom→渲染
5 更新前状态 beforeUpdate
6 更新完成状态 Update 更新→渲染
7 销毁前状态 beforeDestroy
8 销毁完成状态 Destroy

 

swiperjs 滑动插件 Zepto.js H5触摸事件
http://www.swiper.com.cn/api/Effects/2015/0308/195.html

posted @ 2019-04-24 15:58  八十易  阅读(330)  评论(0编辑  收藏  举报