性能优化

图片优化
PNG8、24、32的区别
PNG8 支持2^8色 + 支持透明 （8比特表示一种颜色 颜色变化不大的情况可以使用PNG8
PNG24 2^24 + 不支持透明
PNG32 2 ^ 24 色 + 透明

JGP压缩率高，图片有损耗，不支持透明
PNG支持透明 ，浏览器兼容好
webP压缩程度好，但在ios支持不好
svg 代码内嵌，相对较小，适合图片简单的场景

图片优化
雪碧图 （用的少了 pc端使用 ）
缺点是雪碧图可能包括了许多icon导致很大，如果加载很慢甚至 加载失败 ，这些小图片都会丢失
http://www.spritecow.com/ 帮助我们获取background-position

base64编码

svg
使用icon-font（矢量图网站）解决icon的问题

webp
安卓场景使用

图片压缩的网站 tinyPNG

转为webp格式的图片 https://zhitu.isux.us/

css和js的装载与执行
浏览器渲染的一些特点
通过词法分析 从上往下分析 html的tag 是顺序执行。

对于css和js是并发加载，浏览器对同域名并发加载的资源数量有限制 所以通常把资源放在cdn上 通常设置三四个cdn域名
防止一个cdn的资源达到浏览器外部资源并发加载数量上限。

css和js是否会阻塞页面加载
css阻塞
在head中阻塞页面渲染
阻塞js的执行， 但不阻塞外部脚本的加载

js阻塞
直接引入的js会阻塞 （没有加defer或者async）
js不影响资源的加载
js顺序执行就会影响后续js的执行

依赖关系
把css样式表的引入放在head中 避免了html加载出现 而css样式没有出现的问题
js通常在script标签添加async 这样会放弃js的依赖关系 因为哪个先加载出来哪个就先执行

懒加载和预加载
什么是懒加载？
图片进入可视区域再请求图片资源
适用于图片较多的电商网站
因为并发加载的资源过多会阻塞js的加载
zepto.lazyload等等

什么是预加载？
图片等静态资源在使用之前提前请求
资源应用时从缓存中加载，提升用户体验
插件推荐 preload.js

重绘与回流
当 render树中的一部分(或全部）因为元素的尺寸，布局 ，显隐发生改变而需要重新构建，这就称为回流
相关的css
盒子模型相关的 width height padding 等等
定位以及浮动 display float position left top …
改变节点内部文字结构的 text-align font-size font-weight font-family line-height

当render树一些只影响元素外观 ，风格属性，而不影响外观发生变化的时候，例如背景颜色等等 就称为重绘
相关的css
background color box-shadow border-radius …

新建dom的过程
获取的dom被分割为多个图层
对每个图层进行样式计算
根据计算结果，把每个节点放到他们该出现的位置 （回流）
对每个节点进行绘制 （重绘）
图层作为纹理上传到GPU
最后将多个图层在页面上进行合成

避免重绘与回流的方法
尽量避免使用引起重绘回流的css样式
将重绘回流的影响范围限制到单独的图层内

具体的实现

1. 使用translate替代top
2. 不要一条一条修改 dom样式 可以采用cxxText或者直接切换class名
3. dom离线修改，修改前设置为display none 然后修改 最后再显示出来
4. 不要在循环里将容易 引起回流重绘属性值作为变量 应该缓存起来
5. 不使用table布局

浏览器存储

cookie
http请求无状态，所以需要cookie来维持客户端 状态
cookie生成方式 由服务端生成 客户端来维护

PWA是一种新特性的web app
1.在弱网络环境下能提供的基本的页面访问 而不是直接显示网络未连接
2.对网页渲染和数据访问优化
3.可以被添加到手机桌面，和普通应用一样可以全屏、推送
检测网站访问的速度 工具 lighthouse

缓存
http header
cache-control （请求和响应中都可以出现） 得到浏览器和服务端两边各自的缓存情况 包括以下几个属性

nodejs 起一个服务的基础 代码

 var http = require('http')
    var PORT = 8000
    
    var server = http.createServer(function (request, response) {
        
    })
    
    server.listen(PORT)
    console.log('Server runing at port' + PORT)

Vue解决首屏就渲染的问题
构建层模板编译

数据 无关的可以prerender

服务端渲染 首屏相关的页面html在服务端生成 然后给客户端