1、使用fis3来构建和压缩
2、使用TinyPNG来压缩PNG和JPG图片
3、使用智图来生成webp图片
4、使用spritecow来制作雪碧图和自动生成雪碧图代码
5、网页的解析过程：首先是解析HTML，生成DOM树，再从上到下解析DOM树，解析到需要引用外部文件的时候去引用为外部文件
在进行解析，最后重新组成render树，绘制在页面上
6、css会阻塞js的执行，不会阻塞js的加载，css性能让js执行变慢
7、懒加载和预加载的原理：
（1）懒加载：图片进入可视区域之后请求图片资源，即是才设置img的src属性。作用是：电商页面使用较多，减少无效资源的加载。使用到的插件是vue-lazyload或者使用zepto.lazyload.js
（2）预加载：图片等静态资源在使用之前的提前请求，资源使用到时能从缓存中加载，提升用户体验，维护页面展示的依赖关系。第一种使用方法：设定img的src，并指定style=display： none
第二种方法：使用js，先是new一个Image对象，并设定一个src属性
第三种方法：使用XMLHttpRequest方法，缺陷是会存在跨域问题
或者使用Preload.js库
8、浏览器重绘和回流机制：
重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局，比如background-color，就称为重绘
回流：当render tree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变时而需要重新构建，就称为回流。当页面布局和几何属性改变时就需要回流
回流必将引起重绘，重绘不一定会引起回流，回流成本高
触发页面重布局（回流）的属性：盒子模型相关属性、定位及浮动属性、改变借点内部文字结构
避免重绘回流的方法：将频繁重绘回流的DOM元素单独作为一个独立图层，这个DOM元素的重绘和回流的影响只会发生在这个图层中
创建图层的方法：使用transform: translateZ(0)开启GPU、使用will-change:transform
重绘回流优化点：
（1）使用translate代替top
（2）使用opacity代替visibility（会触发重绘），需要把当前元素独立出一个图层
（3）不要一条一条的修改DOM的样式，预先定义好class，然后修改DOM的className
（4）把DOM离线后修改，比如：先把DOM给display：none（有一个reflow），然后修改100次，再把它显示出来
（5）不要把一个DOM节点的属性值放在一个循环里当循环的变量
（6）不要使用table布局，可能很小的一个改动都会造成整个table的重新布局
（7）动画实现的速度的选择
（8）对于动画新建图层
（9）启动GPU硬件加速：使用transform: translateZ(0)或者transform: translate3d(0,0,0)
9、浏览器存储方式：
（1）cookie：因为HTTP请求无状态，所以需要cookie去维持客户端状态，作用是用于浏览器端和服务器端的交互（即是维护客户端和服务端的状态），用于客户端自身数据的存储
cookie的生成方式：http response header 中的set-cookie，由服务端生成，客户端存储和维护
通过js的document.cookie可以读写cookie，设置js读写cookie会存在危险，可以设置HTTPOnly禁止js读写cookie
cookie存储的限制：作为浏览器存储，大小4KB左右。需要设置过期时间expire。cookie中在相关域名下--cdn的流量损耗，解决方案：cdn的域名和主站的域名要分开
（2）LocalStorage：
HTML5设计出来专门用于浏览器存储的
大小为5M左右
仅在客户端使用，不和服务端进行通信
接口封装较好
浏览器本地缓存方案
（3）SessionStorage：
会话级别的浏览器存储
大小为5M左右
仅在客户端使用，不和服务端进行通信
接口封装较好
对于表单信息的维护
（4）IndexedDB：IndexedDB是一种低级API，用于客户端存储大量结构化数据。该API使用索引来实现对该数据的高性能搜索。虽然WebStorage对于存储较少量的数据
很有用，但是对于存储更大量的结构数据来说，这种方法不太有用。IndexedDB提供了一个解决方案。
为应用创建离线版本
10、PWA：
可靠：在没有网络的环境下也能提供基本的页面访问，而不是出现”未连接到互联网“的页面
快速：针对网页渲染及网络数据访问有较好的优化
融入：应用可以被增加到手机桌面，并且和普通应用一样有全屏、推送等特性
11、Service Worker（对于https站点）：
Service Worker是一个脚本，浏览器独立于当前页面，将其在后台运行，为实现一些不依赖页面或者用户交互的特性打开了一扇门。在未来这些特性
将包括推送消息，背景后台同步。地理围栏定位，但是他将推出的第一个首要特性，就是拦截和处理网络请求能力，包括以编程方式来管理被缓存的响应。
作用：使用拦截和处理网络请求的能力，去实现一个离线应用和更好的缓存机制。使用Service Worker在后台运行同时能和页面通信的能力，去实现大规模后台数据处理
Chrome检查正在运行的ServiceWorker的指令：chrome://inspect/#service-workers或者chrome://servicewworker-internals/
12、缓存：
HTTP header：
Cache-Control： max-age--》指定最大缓存时间，优先级高于expires，状态码是200
s-maxage--》只能指定public的缓存设备（CDN），也是指定最大缓存时间，优先级高于max-age，状态码是304，因为重定向到CDN服务器
private
public
no-cache--》不管怎样都要向服务端发送请求，从而判断当前的缓存是否过期
no-store--》不使用缓存
Expires：指定缓存过期时间，是HTTP1.0使用的，不超过这个时间无需向服务器发送请求
Last-Modified/If-Modified-Since：
基于客户端和服务端协商的缓存机制
Last-Modified----》response header
If-Modified-Since----》request header
需要与cache-control共同使用，只有max-age过期时才会使用Last-Modified/If-Modified-Since去判断
缺点：某些服务端不能获取精确的修改时间，文件修改时间改了，但是文件内容没有改
ETag/If-Node-Match：标定文件的hash值
ETag--》response header
If-Node-Match--》request header
ETag如果和If-Node-Match相同则返回304，否则返回200
2、使用TinyPNG来压缩PNG和JPG图片
3、使用智图来生成webp图片
4、使用spritecow来制作雪碧图和自动生成雪碧图代码
5、网页的解析过程：首先是解析HTML，生成DOM树，再从上到下解析DOM树，解析到需要引用外部文件的时候去引用为外部文件
在进行解析，最后重新组成render树，绘制在页面上
6、css会阻塞js的执行，不会阻塞js的加载，css性能让js执行变慢
7、懒加载和预加载的原理：
（1）懒加载：图片进入可视区域之后请求图片资源，即是才设置img的src属性。作用是：电商页面使用较多，减少无效资源的加载。使用到的插件是vue-lazyload或者使用zepto.lazyload.js
（2）预加载：图片等静态资源在使用之前的提前请求，资源使用到时能从缓存中加载，提升用户体验，维护页面展示的依赖关系。第一种使用方法：设定img的src，并指定style=display： none
第二种方法：使用js，先是new一个Image对象，并设定一个src属性
第三种方法：使用XMLHttpRequest方法，缺陷是会存在跨域问题
或者使用Preload.js库
8、浏览器重绘和回流机制：
重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局，比如background-color，就称为重绘
回流：当render tree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变时而需要重新构建，就称为回流。当页面布局和几何属性改变时就需要回流
回流必将引起重绘，重绘不一定会引起回流，回流成本高
触发页面重布局（回流）的属性：盒子模型相关属性、定位及浮动属性、改变借点内部文字结构
避免重绘回流的方法：将频繁重绘回流的DOM元素单独作为一个独立图层，这个DOM元素的重绘和回流的影响只会发生在这个图层中
创建图层的方法：使用transform: translateZ(0)开启GPU、使用will-change:transform
重绘回流优化点：
（1）使用translate代替top
（2）使用opacity代替visibility（会触发重绘），需要把当前元素独立出一个图层
（3）不要一条一条的修改DOM的样式，预先定义好class，然后修改DOM的className
（4）把DOM离线后修改，比如：先把DOM给display：none（有一个reflow），然后修改100次，再把它显示出来
（5）不要把一个DOM节点的属性值放在一个循环里当循环的变量
（6）不要使用table布局，可能很小的一个改动都会造成整个table的重新布局
（7）动画实现的速度的选择
（8）对于动画新建图层
（9）启动GPU硬件加速：使用transform: translateZ(0)或者transform: translate3d(0,0,0)
9、浏览器存储方式：
（1）cookie：因为HTTP请求无状态，所以需要cookie去维持客户端状态，作用是用于浏览器端和服务器端的交互（即是维护客户端和服务端的状态），用于客户端自身数据的存储
cookie的生成方式：http response header 中的set-cookie，由服务端生成，客户端存储和维护
通过js的document.cookie可以读写cookie，设置js读写cookie会存在危险，可以设置HTTPOnly禁止js读写cookie
cookie存储的限制：作为浏览器存储，大小4KB左右。需要设置过期时间expire。cookie中在相关域名下--cdn的流量损耗，解决方案：cdn的域名和主站的域名要分开
（2）LocalStorage：
HTML5设计出来专门用于浏览器存储的
大小为5M左右
仅在客户端使用，不和服务端进行通信
接口封装较好
浏览器本地缓存方案
（3）SessionStorage：
会话级别的浏览器存储
大小为5M左右
仅在客户端使用，不和服务端进行通信
接口封装较好
对于表单信息的维护
（4）IndexedDB：IndexedDB是一种低级API，用于客户端存储大量结构化数据。该API使用索引来实现对该数据的高性能搜索。虽然WebStorage对于存储较少量的数据
很有用，但是对于存储更大量的结构数据来说，这种方法不太有用。IndexedDB提供了一个解决方案。
为应用创建离线版本
10、PWA：
可靠：在没有网络的环境下也能提供基本的页面访问，而不是出现”未连接到互联网“的页面
快速：针对网页渲染及网络数据访问有较好的优化
融入：应用可以被增加到手机桌面，并且和普通应用一样有全屏、推送等特性
11、Service Worker（对于https站点）：
Service Worker是一个脚本，浏览器独立于当前页面，将其在后台运行，为实现一些不依赖页面或者用户交互的特性打开了一扇门。在未来这些特性
将包括推送消息，背景后台同步。地理围栏定位，但是他将推出的第一个首要特性，就是拦截和处理网络请求能力，包括以编程方式来管理被缓存的响应。
作用：使用拦截和处理网络请求的能力，去实现一个离线应用和更好的缓存机制。使用Service Worker在后台运行同时能和页面通信的能力，去实现大规模后台数据处理
Chrome检查正在运行的ServiceWorker的指令：chrome://inspect/#service-workers或者chrome://servicewworker-internals/
12、缓存：
HTTP header：
Cache-Control： max-age--》指定最大缓存时间，优先级高于expires，状态码是200
s-maxage--》只能指定public的缓存设备（CDN），也是指定最大缓存时间，优先级高于max-age，状态码是304，因为重定向到CDN服务器
private
public
no-cache--》不管怎样都要向服务端发送请求，从而判断当前的缓存是否过期
no-store--》不使用缓存
Expires：指定缓存过期时间，是HTTP1.0使用的，不超过这个时间无需向服务器发送请求
Last-Modified/If-Modified-Since：
基于客户端和服务端协商的缓存机制
Last-Modified----》response header
If-Modified-Since----》request header
需要与cache-control共同使用，只有max-age过期时才会使用Last-Modified/If-Modified-Since去判断
缺点：某些服务端不能获取精确的修改时间，文件修改时间改了，但是文件内容没有改
ETag/If-Node-Match：标定文件的hash值
ETag--》response header
If-Node-Match--》request header
ETag如果和If-Node-Match相同则返回304，否则返回200
需要与cache-control共同使用
说明：转载请注明转载来源和作者，尊重原创！！
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
