service worker是一个脚本,浏览器独立于当前页面,将其在后台运行,为实现一些不依赖页面的或者用户交互的特性打开了一扇大门。在未来这些特性将包括消息推送,背景后台同步,geofencing(地理围栏定位),但他将推出的第一个首要的特性,就是拦截和处理网络请求的能力,包括以编程方式来管理被缓存的响应。
复制代码
function openDB(name, callback) {
//建立打开indexdb indexedDB.open
var request = window.indexedDB.open(name)
request.onerror = function(e) {
console.log('on indexedDB error')
}
request.onsuccess = function(e) {
myDB.db = e.target.result
callback && callback()
}
//from no database to first version,first version to second version...
request.onupgradeneeded = function() {
console.log('created')
var store = request.result.createObjectStore('books', {
keyPath: 'isbn'
})
console.log(store)
var titleIndex = store.createIndex('by_title', 'title', {
unique: true
})
var authorIndex = store.createIndex('by_author', 'author')
store.put({
title: 'quarry memories',
author: 'fred',
isbn: 123456
})
store.put({
title: 'dafd memories',
author: 'frdfaded',
isbn: 12345
})
store.put({
title: 'dafd medafdadmories',
author: 'frdfdsafdafded',
isbn: 12345434
})
}
}
var myDB = {
name: 'tesDB',
version: '2.0.1',
db: null
}
function addData(db, storeName) {
}
openDB(myDB.name, function() {
// myDB.db = e.target.result
// window.indexedDB.deleteDatabase(myDB.name)
});
//删除indexedDB
复制代码
9、indexDB事务
transcation 与 object store建立关联关系来操作object store
建立之初可以配置
复制代码
var transcation = db.transcation('books', 'readwrite')
var store = transcation.objectStore('books')
var data =store.get(34314)
store.delete(2334)
store.add({
title: 'dafd medafdadmories',
author: 'frdfdsafdafded',
isbn: 12345434
})
复制代码
一、课程简介:
1、课程大纲
涉及到的分类
涉及到的功能点
前端性能优化原理
课程安排
二、资源合并与压缩
1、http请求的过程及潜在的性能优化点
2、html压缩
资源的合并与压缩设计到的性能点:
google首页案例分析
如何进行html的压缩
3、css及js压缩
css的压缩
css压缩的方式
js的压缩语混乱
js压缩的方式
4、文件合并优点
文件合并缺点
文件合并对应缺点的处理
文件合并对应方法
三、图片相关优化
1、一张JPG的解析过程
2、png8/png24/png32之间的区别
3、不同的格式图片常用的业务场景
不同格式图片的特点
不同格式图片的使用场景
4、图片压缩的几种情况
四、css和js的装载与执行
1、HTML页面加载渲染的过程
一个网站在浏览器端是如何进行渲染的
2、HTML渲染过程中的一些特点
3、顺序执行,并发加载
4、css阻塞和js阻塞
css阻塞
js阻塞
直接通过script src在head中引入,html parse 认为js会动态修改文档结构,没有进行后面文档的分析
五、懒加载与预加载
1、懒加载原理
img src被设置之后,webkit解析到之后才去请求这个资源。所以我们希望图片到达可视区域之后,img src才会被设置进来,没有到达可视区域前并不现实真正的src,而是类似一个1px的占位符。
2、预加载原理
3、懒加载原生js和zepto.lazyload
1、原理:先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。
注意问题: 1、关注首屏处理,因为还没滑动 2、占位,图片大小首先需要预设高度,如果没有设置的话,会全部显示出来
4、预加载原生js和preloadJS实现
预加载实现的几种方式
第一种方式:直接请求下来
<img src="www.pic27.com/sadfafd/dafdsa.jpg" style="display: none"/> <img src="www.pic27.com/sadfafd/dsaf.jpg" style="display: none"/> <img src="www.pic27.com/sadfafd/dasfd.jpg" style="display: none"/> <img src="www.pic27.com/sadfafd/fdsa.jpg" style="display: none"/> 复制代码
第二种方式:image对象
var image = new Image(); image.src = "www.pic26.com/dafdafd/safdas.jpg"; 复制代码
第三种方式:xmlhttprequest
六、重绘与回流
1、css性能让javascript变慢
要把css相关的外部文件引入放进head中,加载css时,整个页面的渲染是阻塞的,同样的执行javascript代码的时候也是阻塞的,例如javascript死循环。
这两个线程是互斥的,当UI渲染的时候,javascript的代码被终止。当javascript代码执行,UI线程被冻结。所以css的性能让javascript变慢。
频繁触发重绘与回流,会导致UI频繁渲染,最终导致js变慢
2、什么是重绘和回流
回流
重绘
关系
3、避免重绘、回流的两种方法
触发页面重布局的一些css属性
top、bottom、left、right、position、float、clear 复制代码
优化点:使用不触发回流的方案替代触发回流的方案
只触发重绘不触发回流
新建DOM的过程
chrome创建图层的条件
将频繁重绘回流的DOM元素单独作为一个独立图层,那么这个DOM元素的重绘和回流的影响只会在这个图层中
gif图
总结
4、实战优化点总结
1、用translate替代top属性 2、用opacity代替visibility //opacity不会触发重绘也不会触发回流,只是改变图层alpha值,但是必须要将这个图片独立出一个图层 //visibility会触发重绘 3、不要一条一条的修改DOM的样式,预先定义好class,然后修改DOM的className 4、把DOM离线后修改,比如:先把DOM给`display:none`(有一次reflow),然后你修改100次,然后再把它显示出来 5、不要把DOM节点的属性值放在一个循环里当成循环的变量 6、不要使用table布局,可能很小的一个小改动会造成整个table的重新布局 //div只会影响后续样式的布局 7、动画实现的速度的选择 //根据performance量化性能优化 8、对于动画新建图层 9、启用gpu硬件加速(并行运算),gpu加速意味着数据需要从cpu走总线到gpu传输,需要考虑传输损耗 //transform:translateZ(0) //transform:translate#d(0) 复制代码
七、浏览器存储
1、cookies
多种浏览器存储方式并存,如何选择?
1、因为http请求无状态,所以需要cookie去维持客户端状态 2、cookie的生成方式:1.http response header set-cookie 2.js中可以通过document.cookie可以读写cookie 3、cookie的使用用处:1.用于浏览器端和服务器端的交互(用户状态) 2.客户端自身数据的存储 4、expire:过期时间 5、cookie的限制:1.作为浏览器存储,大小4kb左右 2.需要设置过期时间 expire 6、重要属性:httponly 不支持js读写(防止收到模拟请求攻击) 7、不太作为存储方案而是用于维护客户关系 8、优化点:cookie中在相关域名下面-cdn的流量损耗 解决方案:cdn的域名和主站域名要分开 复制代码
2、localStorage
localstorage
sessionstorage
3、indexedDB
4、Service Worker产生的意义
5、PWA与Service Worker
6、PWA与Service worker
chrome 插件 lighthouse
####service worker
案例分析
chrome://serviceworker-internals/ chrome://inspect/#service-worker/ 复制代码
service worker网络拦截能力,存储Cache Storage,实现离线应用
indexedDB
callback && callback()写法 相当于 if(callback){ callback(); } 复制代码
7、cookie、session、localStorage、sessionStorage基本操作
8、indexedDB基本操作
function openDB(name, callback) { //建立打开indexdb indexedDB.open var request = window.indexedDB.open(name) request.onerror = function(e) { console.log('on indexedDB error') } request.onsuccess = function(e) { myDB.db = e.target.result callback && callback() } //from no database to first version,first version to second version... request.onupgradeneeded = function() { console.log('created') var store = request.result.createObjectStore('books', { keyPath: 'isbn' }) console.log(store) var titleIndex = store.createIndex('by_title', 'title', { unique: true }) var authorIndex = store.createIndex('by_author', 'author') store.put({ title: 'quarry memories', author: 'fred', isbn: 123456 }) store.put({ title: 'dafd memories', author: 'frdfaded', isbn: 12345 }) store.put({ title: 'dafd medafdadmories', author: 'frdfdsafdafded', isbn: 12345434 }) } } var myDB = { name: 'tesDB', version: '2.0.1', db: null } function addData(db, storeName) { } openDB(myDB.name, function() { // myDB.db = e.target.result // window.indexedDB.deleteDatabase(myDB.name) }); //删除indexedDB 复制代码
9、indexDB事务
var transcation = db.transcation('books', 'readwrite') var store = transcation.objectStore('books') var data =store.get(34314) store.delete(2334) store.add({ title: 'dafd medafdadmories', author: 'frdfdsafdafded', isbn: 12345434 }) 复制代码
10、Service Worker离线应用
serviceworker需要https协议
11、如何实现ServiceWorker与主页面之间的通信
详细学习
https://lavas.baidu.com/guide/v1/foundation/lavas-start
八、缓存
1、httpheader
2、Expires
Expires
3、Last-modified和If-Modified-since
1、基于客户端和服务器端协商的缓存机制 2、 last-modified --> response header if-modified-since --> request header 3、需要与cache-control共同使用 复制代码
last-modified有什么缺点
?4、Etag 和 If-none-match
1、文件内容的hash值 2、etag -->reponse header if-none-match -->request header 3、需要与cache-control共同使用 复制代码
好处:
比if-modified-since更加准确 优先级比etage更高 复制代码
4、流程图
九、服务端性能优化
服务端用的node.js因为和前端用的同一种语言,可以利用服务端运算能力来进行相关的运算而减少前端的运算
vue渲染面临的问题
怎么在vue这个层面对性能进行提升