JS札记——网上看的装逼写法(229)

发表于   |   分类于

JS札记

数字取整:
~~ 其实这是个按位非的运算符做了俩次
2.33|0
2.33>>0

字符转数字:
var a ='1'; +a; 它用隐式转换来的

类型判断:

1
2
3
4
typeof d == "string"
function Person() {}
d instanceof Person;//判断constructor.prototype是否存在于要检测对象的原型链上. 所以对number string boolean无效

parseInt范围:
parseInt(0.0000008)//这个结果是8, 小数点后7位出错
parseInt(10000000000023291)//20位出错

数组去重:
[...new Set([1, "1", 2, 1, 1, 3])]

指定长度填充:
以前就在想了，赶紧笔记: let aa = Array(6).fill(8) 长度6,填充8

短路表达式:

1
2
var a = b&&1; if (b) a=1; else a=b;
var a = b||1; if (b) a=b; else a=1;

高逼格创建函数:

1
2
3
let f = new Function('a', 'a++; return a+1;');
f(1)//3
//函数字符化

立即执行函数:

1
2
3
4
5
(function(){...})();
!function(){...}();
~function(){...}();
-function(){...}();
+function(){...}();

浏览器安全

  1. xss安全，对url和内容做过滤，防止嵌入js执行代码
  2. csp, 通过服务器应答头或者html的META标签,限制请求源

浏览器Console命令

1
2
3
4
5
6
console.log();
console.dir();//显示一个对象所有属性和方法
console.dirxml();//显示网页某节点所包含的html/xml
console.assert();//弹框
console.trace();//附带显示行数
console.time();console.timeEnd();用来显示代码运行时间

浏览器其它

浏览器能设置条件语句断点
左边可以直接启动手机模式,这样就能看手机状态下的浏览情况

CSS黑魔法

浏览器缓存

强缓存:

  • 当头的Cache-Control的max-age(最多有效时间)/s-maxage(代理最大有效时间) 被设置时, 用头的date和当前时间比对

  • 当无 头的cache-control只有头的expires时,则用expires和当前时间对比

    协商缓存:

  • 头有last-modiied和etag,会向服务器请求是否失效,请求包加头if-modified-since和if-none-match.
    服务器回应304浏览器就本地加载，否则重新发送数据

box-sizing

这个属性来源于css3属性
从里到外,margin->border->padding->content.

  • content-box标准盒。height指content的高,width指content的宽

  • border-box怪异盒。height指content+padding+border的高,width指content+padding+border的高

网上说在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页。

浏览器安全

CSRF(跨站点请求伪造): 用户c打开网站a，未推出a之前，打开网站b。网站b发出请求要求访问网站a，来利用未销毁的cookie来达到攻击的目的

防范方法:

  • 验证http referer字段，这个字段表示http请求来源地址
  • 请求接口添加token验证

  • http添加自定义属性

    XSS(跨站脚本攻击):调用web接口时，提交js代码进去，下次访问页面会执行js代码达到攻击

    防范方法:

  • 输入数据编码处理(HTML Entity)
  • 输入数据过滤
  • 矫正

JS技巧

[]+{} 非primitive type(即值类型)的+运算,对于数组和object,其实都是在调用toString方法.
数组[]的toString其实就是调用.join()方法.
Object转String就是[object Object](用String({})测试)

[]+{}相当于””+”[object Object]”
{}+[] 会变成俩端{}和+[],一个代码段一个执行语句,由于后面是空且被隐式转换了,所以结果是0
{}+{}

JS有6个假值:false null undefined 0 “” NaN

但是它们之间并非都相等
以下是相等的:
false==0
false==''
null==undefined
0==''

数组去重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 //es5
 function unique(a) {
  var res = [];
  for (var i = 0, len = a.length; i < len; i++) {
    var item = a[i];
    (res.indexOf(item) === -1) && res.push(item);
  }
  return res;
}
//es6
function unique(a) {
  return Array.from(new Set(a));
}

浏览器渲染和服务器渲染

浏览器端渲染，指的是用js去生成html，前端做路由。举例：React, Vue等等前端框架。适合单页面应用程序。

服务器端渲染，指的是用后台语言通过一些模版引擎生成html。举例：PHP文件、JSP文件、Python的Flask配合Jinja引擎、Django框架、Java配合vm模版引擎、NodeJS配合Jade。适合多页面应用。

浏览器渲染过程
DOM Tree：浏览器将HTML解析成树形的数据结构。
CSS Rule Tree：浏览器将CSS解析成树形的数据结构。
Render Tree: DOM和CSSOM合并后生成Render Tree。
layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。
painting: 按照算出来的规则，通过显卡，把内容画到屏幕上

过程是异步的，下载多少内容，构建多少render树
（1）Reflow（回流）：浏览器要花时间去渲染，当它发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染(要尽量避免它:操作dom 元素尺寸变化 css属性变化)。
（2）Repaint（重绘）：如果只是改变了某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，重画某一部分。

浏览器优化
减少refow/repaint：

  • 不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className
  • 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
  • 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的

  • 千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局

    CSS优化
    CSS选择符是从右到左进行匹配的。从右到左！所以，#nav li 我们以为这是一条很简单的规则，秒秒钟就能匹配到想要的元素，但是，但是，但是，是从右往左匹配啊，所以，会去找所有的li，然后再去确定它的父元素是不是#nav

    1
    2
    3
    4
    5
    dom深度尽量浅
    减少inline javascript(script嵌入那种)、css的数量
    不要为id选择器指定类名或是标签，因为id可以唯一确定一个元素
    避免后代选择符，尽量使用子选择符。原因：子元素匹配符的概率要大于后代元素匹配符。后代选择符;#tp p{} 子选择符：#tp>p{}
    避免使用通配符

    js的下载和执行会阻塞Dom树的构建

js数组

1
2
3
let tt = ["22", "55", "88"];
tt[7] = 3;
t.length//8 是不是很惊讶，然而t[6]是undefined

js模块加载

commonjs:nodejs应用最多，它的require是同步的，运行时确定模块依赖关系，先加载整个模块，直接生产对象1
再从对象上读取方法
amd:requirejs就实现了amd规范，异步，运行时加载
es6：编译时确定依赖关系，导出任意值

// //