reflow(回流)和repaint(重绘)

简要:整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影响web性能,尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。

什么是reflow和repaint(原文链接:http://www.cnblogs.com/Peng2014/p/4687218.html)

reflow:例如某个子元素样式发生改变,直接影响到了其父元素以及往上追溯很多祖先元素(包括兄弟元素),这个时候浏览器要重新去渲染这个子元素相关联的所有元素的过程称为回流。

reflow:几乎是无法避免的。现在界面上流行的一些效果,比如树状目录的折叠、展开(实质上是元素的显 示与隐藏)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码,它们都彼此相互影响着。
获取一个元素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性,浏览器为了保证值的正确也会回流取得最新的值

repaint:如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性,将只会引起浏览器 repaint(重绘)。repaint 的速度明显快于 reflow

下面情况会导致reflow发生

1:改变窗口大小

2:改变文字大小

3:内容的改变,如用户在输入框中敲字

4:激活伪类,如:hover

5:操作class属性

6:脚本操作DOM

7:计算offsetWidth和offsetHeight

8:设置style属性

使用JavaScript生成二维码教程-附qrcodejs中文文档

使用javascript生成二维码 依赖jquery

需要使用到的库


https://github.com/davidshimjs/qrcodejs

DIV

<div id="qrcode"></div>

javascript

 var qrcode = new QRCode("qrcode");

  qrcode.makeCode("http://www.fengkaichang.com");

至此一个简单的二维码就生成了

image

接下来我们就详细了解一下这个库到底为我们提供了哪些参数配置和方法

配置

new  QRCode(element,option)
名称 默认值 类型 说明
element string 显示二维码的元素或该元素的 ID
option objec 参数配置
名称 默认值 类型 说明
text string 需要生成的二维码内容
width 256 number 图像宽度
height 256 number 图像高度
colorDark “#000000” string 前景色
colorLight “#ffffff” string 背景色
correctLevel QRCode.CorrectLevel.L 容错级别

容错级别有

QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H

var qrcode = new QRCode(element), { text: "www,fengkaichang.com", width: 150, height: 150, colorDark : "#000000", colorLight : "#ffffff", typeNumber:4, correctLevel : QRCode.CorrectLevel.H });

API方法

qrcode.makeCode(text)   //设置二维码内容
qrcode.clear() //清除二维码。

相关信息 GitHub 中文文档

Cookie常用操作以及属性

概述

最近项目要用到cookie存储部分用户信息;研究了一下做一下分享

Cookie 是服务器保存在浏览器的一小段文本信息,每个 Cookie 的大小一般不能超过4KB。浏览器每次向服务器发出请求,就会自动附上这段信息。

设置cookie存储


document.cookie = 'userName=fengkaicahng';
  • 注意 设置cookie一次只能存储一条
  • cookie可以多次设置 key相同不会重新赋值而是会新建一条cookie

读取cookie


var allCookies = document.cookie; //一次读取所有cookie 字符串形式 //所以一般我们还要做一次转换 var cookiesArray = document.cookie.split(';'); console.log(cookiesArray);

cookie的几个属性

  • value (必须)一个键值对,用来指定cookie的值

document.cookie = 'userName=fengkaicahng';
  • expires 指定Cookie过期时间;格式采用Date.toUTCString()

var day = new Date(); day.setTime(day.getTime()+(1*24*60*60*1000)); //设置一天的有效期 //如果不设置; 默认时间是当前会话窗口关闭即失效 document.cookie = 'userName=fengkaicahng;expires="+day+"';
  • domain 指定发送Cookie的域名

var day = new Date(); day.setTime(day.getTime()+(1*24*60*60*1000)); //只有在该域名下才发送cookie, //如果不设置; 默认是设置cookie时的域名 //以下配置会在fengkaichang.com 的所有子域名下生效 document.cookie = 'userName=fengkaicahng;expires='+day+';domain=fengkaichang.com;
  • path 指定Cookie的路径

var day = new Date(); day.setTime(day.getTime()+(1*24*60*60*1000)); //只有这个路径和发送到服务器的路径相同才发送cookie 可以直接配置/ 从根目录下匹配 这个匹配并不是绝对的, //如果不设置; 默认是请求该cookie时的路径 //以下配置会在fengkaichang.com 的所有请求路径下生效 //注意 path生效的前提是domain匹配成功,否则都是扯淡 document.cookie = 'userName=fengkaicahng;expires='+day+';domain=fengkaichang.com;path=/'
  • secure 指定Cookie只能在加密协议HTTPS下发送到服务器

var day = new Date(); day.setTime(day.getTime()+(1*24*60*60*1000)); //这个属性的值是一个布尔值 //如果这个通信协议是HTTPS那么协议自动打开 //如果手动设置 一下配置不会在普通HTTP协议下发送 document.cookie = 'userName=fengkaicahng;expires='+day+';domain=fengkaichang.com;path=/;secure=true'

以上内容参考自阮一峰博客的JavaScript教程http://javascript.ruanyifeng.com/bom/cookie.html

更多内容请关注 冯凯昌博客 www.fengkaichang

JQuery操作iframe父页面与子页面的元素与方法

JQuery操作iframe父页面与子页面的元素与方法

JQUERY IFRAME

下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现。

第一、在iframe中查找父页面元素的方法:
$('#id', window.parent.document)
第二、在父页面中获取iframe中的元素方法:
$(this).contents().find("#suggestBox")
第三、在iframe中调用父页面中定义的方法和变量:
parent.method parent.value

jquery、js调用iframe父窗口与子窗口元素的方法

1. jquery 在iframe子页面获取父页面元素代码如下:
$("#objid", parent.document)
2. jquery在父页面 获取iframe子页面的元素 代码如下:
$("#objid",document.frames('iframename').document)
3.js 在iframe子页面获取父页面元素代码如下:
indow.parent.document.getElementByIdx_x("元素id");
4.js 在父页面获取iframe子页面元素代码如下:
window.frames["iframe_ID"].document.getElementByIdx_x("元素id");
5.子类iframe内调用父类函数:
window.parent.func();

更多内容关注我的个人博客 www.fengkaichang.com

JavaScript中的两个延迟加载JS文件的属性anyn和defer

   defer

    HTML 4.01 <script>标签定义了 defer 属性。

    这个属性的用途是表明脚本在执行时不会影响页面的构造。

    也就是说,脚本会被延迟到整个页面都解析完毕后再运行。

    因此,在<script>元素中设置defer 属性,相当于告诉浏览器立即下载,但延迟执行。


    HTML5 规范要求脚本按照它们出现的先后顺序执行,因此第一个加载脚本会先于第二个加载脚本执行,而这两个脚本会先于 DOMContentLoaded 事件执行。

    在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在 DOMContentLoaded 事件触发前执行,因此最好只包含一个延迟脚本。
    前面提到过,
defer 属性只适用于外部脚本文件。这一点在 HTML5 中已经明确规定,因此支持HTML5 的实现会忽略给嵌入脚本设置的 defer 属性。 IE4IE7 还支持对嵌入脚本的 defer 属性,但IE8 及之后版本则完全支持 HTML5 规定的行为。
    IE4Firefox 3.5Safari 5 Chrome 是最早支持 defer 属性的浏览器。其他浏览器会忽略这个属性,像平常一样处理脚本。为此,把延迟脚本放在页面底部仍然是最佳选择。

   async

    HTML5 <script>元素定义了 async 属性。这个属性与 defer 属性类似,都用于改变处理脚本的行为。

    同样与 defer 类似, async 只适用于外部脚本文件,并告诉浏览器立即下载文件。

    但与 defer不同的是,标记为 async 的脚本并不保证按照指定它们的先后顺序执行。

    第二个加载的脚本文件可能会在第一个加载的脚本文件之前执行。

    因此,确保两者之间互不依赖非常重要。

    指定 async 属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。
    为此,建议异步脚本不要在加载期间修改
DOM
    异步脚本一定会在页面的
load 事件前执行,但可能会在 DOMContentLoaded 事件触发之前或之后执行。

    支持异步脚本的浏览器有 Firefox 3.6Safari 5 Chrome


    因此在最新的HTML5标准下defer这个属性是会被忽略掉的、是无效的、除非你还需要兼容IE8以前的浏览器、这对当前大多数网页来说这是没有意义的。

    所以更推荐使用async、当然这不是最好的方式、因为你无法控制它的加载顺序、如果你的JS文件存在依赖关系的话,那将是一个非常糟糕的事情、我更喜欢使用动态创建script标签的方式来做延迟加载,当然方式不止一种、希望你能找到自己喜欢的方式。如果还有什么不懂可以来联系我


    by潇潇暮雨