易混点总结--JS
1、defer与 async 的区别是：
defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。
2、懒加载和预加载
懒加载也就是延迟加载。
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
懒加载的原理：
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把真正的路径存在元素的“data-src”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置；
data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。 为什么要使用预加载？
图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。
Repaint——屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
Reflow——意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow，或是Layout。（HTML使用的是flow based layout，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫reflow）reflow 会从<html>这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置，在reflow过程中，可能会增加一些frame，比如一个文本字符串必需被包装起来。
Reflow的成本比Repaint的成本高得多的多。DOM Tree里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。在一些高性能的电脑上也许还没什么，但是如果reflow发生在手机上，那么这个过程是非常痛苦和耗电的。
注：display:none会触发reflow，而visibility:hidden只会触发repaint，因为没有发现位置变化。
易混点总结--JS的更多相关文章
- SQL Server，Access数据库查询易混点和C#中parameter指定参数长度的优缺点
在学校的时候就经常做一些网站,所以这次在公司实习,组长第一次给了一个企业的网站还是很快的完成了.中间并没有遇到什么大的问题,但是还是遇到了两个新手非常容易混淆的小问题,所以拿出来跟大家分享一下. 主要 ...
- js易混API汇总
一:slice()方法 ————————————http://www.w3school.com.cn/jsref/jsref_slice_string.asp ———————————————————— ...
- 【软件编程】乐易贵宾VIP教程 - JS改写+网页操作系列教程
JS改写系列教程: 1.MD5加密改写教程(爱拍网登录)2.解密如何快速找到真确的js加密算法3.多重MD5加密改写教程(5173登录)4.DZ论坛登录加密改写5.唯品会手机登录加密改写6.新浪微博密 ...
- Android与JS混编（js调用java）
项目中需要使用android与js的混编来开发app. 下面就介绍一下吧. 有时候我们需要用js调用native控件,要想实现这个功能,我们需要做的就只有三步: 1.允许webview执行js脚本 2 ...
- Android与JS混编（js调用android相机）
参考android相机调用,http://blog.csdn.net/yanzi1225627/article/details/33028041/,谢谢 相机怎么调用就不做赘述了,下面是js调用 ...
- MVC Razor与javascript混编（js中嵌入razor）
其中的关键是输出js上的纯文本内容,让浏览器解析为其中的js代码 <script> BUI.use('common/main',function(){ var conf ...
- Java易混小知识——equals方法和==的区别
一.equals方法和==的区别 1.equals是String对象的方法,可以通过".“调用. 2.== 是一个运算符. 二.常用的比较用法 1.基本数据类型比较. equals和==都比 ...
- iOS之 HTTP、Socket、TCP的区别(易混
一.HTTP 是一种超文本传输协议,全名hypertext transfer protocol,从字面意思上可以看出该协议用于规定客户端与服务端之间的传输规则, 传输的内容不限于文本(任意类型的数据) ...
- Android与JS混编（js调用android相机扫描二维码）
参考demo http://www.cnblogs.com/mythou/p/3280023.html 项目源码: https://github.com/weifengzz/Androi ...
随机推荐
- python-day74--知识总体总结
1. 课程介绍 - 数据类型 - 函数 - 面向对象三大特性:继承,封装,多态 - socket:本质传输字节:所有网络通信都基于socket ...
- Failed to stop iptables.service: Unit iptables.service not loaded.解决方法
CentOS7中执行 service iptables start/stop 会报错Failed to start iptables.service: Unit iptables.service fa ...
- 五、持久层框架（Hibernate）
一.分页查询 使用Criteria进行分页查询,无论是使用Oracle,MySQL,NoSQL,DB2,分页查询的代码写法都相同. 分页查询代码示例: package com.demo.test; i ...
- Linux中环境变量文件
一.环境变量文件介绍 转自:http://blog.csdn.net/cscmaker/article/details/7261921 Linux中环境变量包括系统级和用户级,系统级的环境变量是每个登 ...
- 什么是 开发环境、测试环境、生产环境、UAT环境、仿真环境
开发环境:开发环境是程序猿们专门用于开发的服务器,配置可以比较随意, 为了开发调试方便,一般打开全部错误报告. 测试环境:一般是克隆一份生产环境的配置,一个程序在测试环境工作不正常,那么肯定不能把它发 ...
- MongoDB，无模式文档型数据库简介
MongoDB的名字源自一个形容词humongous(巨大无比的),在向上扩展和快速处理大数据量方面,它会损失一些精度,在旧金山举行的MondoDB大会上,Merriman说:“你不适宜用它来处理复杂 ...
- 网页定位点击事件js响应函数教程（Chrome）
一.背景说明 在前端页面调试或者渗透测试(尤其是XSS)时,我们经常想定位js函数位置:比如点击了某个位置弹出了一个对话框,这是哪个文件的哪个js函数在响应. 本文以Chrome浏览器定位点击事件响应 ...
- Win7系统的虚拟机中安装win7系统
今天因兼职需要,在家里的win7电脑上安装WIN7虚拟机. 之前在xp和win10系统的虚拟机中,安装各种版本的windows系统都很轻松,这一次居然折腾了很久都没搞定. 下载了好几个系统ios镜像都 ...
- H5 PWA技术以及小demo
H5 PWA技术 1.原生app优缺点 a.体验好.下载到手机上入口方便 b.开发成本高(ios和安卓) c.软件上线需要审核 d.版本更新需要将新版本上传到不同的应用商店 e.使用前需下载 2.we ...
- 微信公众号 access_token 没有过期 却失效
最近在开发微信项目的时候 access_token 缓存到 redis里面的,明明在两个小时的有效期内 微信却提示 "errcode":40001,"errmsg& ...