数组取最小、最大值

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

JS 冷知识,运行机制的更多相关文章

  1. Node.js和PHP运行机制对比

    为什么要用node.js它又有什么优势呢?一个新的技术被大家喜爱那么它就必然有它的优势,那么下面我们就来简单把它和php做一个对比 1 . Node.js 他用的是JavaScript引擎,那么注定它 ...

  2. js同步 异步 运行机制

    需要知道的那些事: 1.JS是单线程的(为什么?因为能提高效率.作为浏览器脚本语言,js的主要用途是与用户互动,操作DOM.而这也就决定它只能为单线程,否则会带来很复杂的同步问题),也就是说无法同时执 ...

  3. 从浏览器多进程到JS单线程，JS运行机制的一次系统梳理

    前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...

  4. 从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

    前言 来源:https://dailc.github.io/2018/01/21/js_singlethread_eventloop.html 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会 ...

  5. 深入理解struts的运行机制

    扫码关注公众号,不定期更新干活 在此申明本博文并非原创,原文:http://blog.csdn.net/lenotang/article/details/3336623,本文章是在此文章基础上进行优化 ...

  6. Js基础知识（四） - js运行原理与机制

    js运行机制 本章了解一下js的运行原理,了解了js的运行原理才能写出更优美的代码,提高运行效率,还能解决开发中遇到的不理解的问题. 进程与线程 进程是cpu资源分配的最小单位,进程可以包含多个线程. ...

  7. JS的运行机制

    代码块: JS中的代码块是指由<script>标签分割的代码段.JS是按照代码块来进行编译和执行的,代码块间相互独立(即就算代码块1出错,但不影响代码块2的加载和执行),但变量和方法共享. ...

  8. 关于js内部运行机制的一本好书

    读<单页Web应用一书>,第二章讲了js内部运行机制,感觉棒极了.之前读<你不知道的js>,看的云里雾里,似懂非懂.没想到单页Web一书将此内容讲的如此通俗易懂,好多困惑已久的 ...

  9. 试着讲清楚：js代码运行机制

    一. js运行机制 js执行引擎 经常看文章的说到js是带线程的,其实这个说法非常的模糊,准确的是js执行引擎是单线程的,js执行引擎就是js代码的执行器,有了这个概念就可以下来说说js是如何运行的了 ...

随机推荐

  1. Vue实现树形下拉框

    Vue自身并没有实现树形下拉框的组件,找了很多资料,最后在Github上找了个插件vue-treeselect,功能还是比较全的,模糊搜索.多选.延迟加载.异步搜索.排序,自定义.Vuex支持等等.这 ...

  2. A/B test

    A/B test https://en.wikipedia.org/wiki/A/B_testing A/B testing (bucket tests or split-run testing) i ...

  3. 响应式用法rem,需要加入这段JS

    <script type="text/javascript"> $(function(){ function size() { winWidth = $(window) ...

  4. Git 之 恢复修改的文件

    对于恢复修改的文件,就是将文件从仓库中拉到本地工作区,即 仓库区 ----> 暂存区 ----> 工作区. 对于修改的文件有两种情况: 只是修改了文件,没有任何 git 操作 修改了文件, ...

  5. python可迭代对象和迭代器和生成器

    可迭代对象 刚开始我认为这两者是等同的,但后来发现并不是这样:下面直接抛出结论: )可迭代对象包含迭代器. )如果一个对象拥有__iter__方法,其是可迭代对象:如果一个对象拥有next方法,其是迭 ...

  6. anaconda相关使用方法

    本文不涉及anaconda的安装,如果需要请自行搜索,cnblogs和CSDN都挺多的. conda安装完,大部分人都jupyter notebook的使用需求,jupyter的开启命令是什么呢? j ...

  7. Linux C Socket简单实例与详细注释

    最近做的东西与socket十分紧密,所以很好奇它具体是如何实现的,以前也有了解过,但是又忘记了,于是把它记录下来,以便日后查看. 服务器端:server.c #include <sys/type ...

  8. web自动化框架如何设计

    web自动化框架如何设计po模式总结: 1. 页面对象模型:当页面特别多的时候,代码更好的维护 2. Po是pageObject设计模式,用来管理和维护一组web元素的对象库 3. 每一个page c ...

  9. [JSOI2009]密码 [AC自动机]

    题面 bzoj luogu 首先看到这题就知道随便暴枚 只要是多项式算法都能过 先常规建AC自动机 注意被别的单词包含的单词没有存在的价值 剩余单词状压 大力dp f[长度][节点编号][状态] \( ...

  10. python并发编程之多线程基础知识点

    1.线程理论知识 概念:指的是一条流水线的工作过程的总称,是一个抽象的概念,是CPU基本执行单位. 进程和线程之间的区别: 1. 进程仅仅是一个资源单位,其中包含程序运行所需的资源,而线程就相当于车间 ...