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
JS 冷知识,运行机制的更多相关文章
- Node.js和PHP运行机制对比
为什么要用node.js它又有什么优势呢?一个新的技术被大家喜爱那么它就必然有它的优势,那么下面我们就来简单把它和php做一个对比 1 . Node.js 他用的是JavaScript引擎,那么注定它 ...
- js同步 异步 运行机制
需要知道的那些事: 1.JS是单线程的(为什么?因为能提高效率.作为浏览器脚本语言,js的主要用途是与用户互动,操作DOM.而这也就决定它只能为单线程,否则会带来很复杂的同步问题),也就是说无法同时执 ...
- 从浏览器多进程到JS单线程，JS运行机制的一次系统梳理
前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...
- 从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
前言 来源:https://dailc.github.io/2018/01/21/js_singlethread_eventloop.html 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会 ...
- 深入理解struts的运行机制
扫码关注公众号,不定期更新干活 在此申明本博文并非原创,原文:http://blog.csdn.net/lenotang/article/details/3336623,本文章是在此文章基础上进行优化 ...
- Js基础知识（四） - js运行原理与机制
js运行机制 本章了解一下js的运行原理,了解了js的运行原理才能写出更优美的代码,提高运行效率,还能解决开发中遇到的不理解的问题. 进程与线程 进程是cpu资源分配的最小单位,进程可以包含多个线程. ...
- JS的运行机制
代码块: JS中的代码块是指由<script>标签分割的代码段.JS是按照代码块来进行编译和执行的,代码块间相互独立(即就算代码块1出错,但不影响代码块2的加载和执行),但变量和方法共享. ...
- 关于js内部运行机制的一本好书
读<单页Web应用一书>,第二章讲了js内部运行机制,感觉棒极了.之前读<你不知道的js>,看的云里雾里,似懂非懂.没想到单页Web一书将此内容讲的如此通俗易懂,好多困惑已久的 ...
- 试着讲清楚：js代码运行机制
一. js运行机制 js执行引擎 经常看文章的说到js是带线程的,其实这个说法非常的模糊,准确的是js执行引擎是单线程的,js执行引擎就是js代码的执行器,有了这个概念就可以下来说说js是如何运行的了 ...
随机推荐
- PHP二维数组去重（指定键名）
本例对二维数组中某个指定键名进行去重,发现网上大多使用array_unique或是foreach遍历等方式去重,效果不佳且较为繁琐. 本文以二维数组去重为引,介绍array_column函数的三种用法 ...
- JavaScript加载次序问题
3个文件,一个index.html如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...
- Mybatis 基本使用
工程结构: 1.在test库创建表student(MySql数据库) 2.创建实体类Student.java package com.gdut.testMybatis.vo; public class ...
- CentOS 安装 Ansible 以及连接Windows server的办法
1. CentOS机器上面按住那ansible yum install ansible 2. 安装 pywinrm 如果不安装 这个的话 ansible 会提示 没有 winrm 模块 注意需要先 ...
- C# NetStream
标题:NetStream 关注点:Read.Write 正文: int size = Read(buf, 0, buf.length); 这里一次会读入length个字节,如果小于这个数量,后面的就是 ...
- filebeat-6.4.3-windows-x86_64输出Kafka
配置filebeat.yml文件 filebeat.prospectors: - type: log encoding: utf- enabled: true paths: - e:\log.log ...
- LeetCode33—搜索旋转排序数组
方法一:先找到旋转点,然后根据目标值重新确定二分查找区域. 时间复杂度:用到两次二分查找,每次二分查找粗略的认为是O(logn),那么时间复杂度为2 * O(logn): 空间复杂度:O(1). in ...
- Jupyter Notebook不能在系统命令行里全局启动
Anaconda安装好Juypyter Notebook之后,只能在base环境里启动,在系统的命令行里要全局启动Jupyter NoteBook失败了 C:\Users\HP>jupyter ...
- ADRC-active disturbance rejection control-自抗扰控制器
ADRC自抗扰控制基本思想要点: 1.标准型与总扰动,扩张状态与扰动整体辨识,微分信号生成与安排过渡过程以及扰动的消减与控制量产生. ADRC主要构成: 1)跟踪微分器(TD)---the track ...
- CentOS7防火墙问题
CentOS6关闭防火墙使用以下命令, //临时关闭service iptables stop//禁止开机启动chkconfig iptables off CentOS7中若使用同样的命令会报错, s ...