1.
优化方面：
网络
构建
服务端
浏览器渲染
2.
设计功能：
资源合并与压缩
关键点：减少http请求数 和 请求资源大小
cs 和 bs：
cs架构gui软件的开发和部署
andriod：把代码打成apk包（发布一个apk包），用户下载并运行
bs架构（web前端）
代码发布到webserver/cdn 用户输入网址，浏览器发送http请求
具体方法：
（1）dns信息进行缓存
（2）缓存dns减少dns查询时间
使用cdn解决静态资源、网络选择和缓存问题，但是去掉cookie（httpRequestHeader）
为什么携带上cookike：
cdn域名和网站域名相同
所以，cdn域名不要和主站一样，防止访问cdn时携带主站cookie
（3）接口 在浏览器上做缓存策略
（4）将多次http请求合并成一次，减少相同的网络消耗
（5）服务端做相应渲染
（6）相同的静态资源缓存
（7）走最近的网络环境
html压缩：压缩空格、制表符、换行符、html注释
手段：
在线网站、html-minifier、后端模板引擎渲染压缩
css压缩：
在线网站、html-minifier、clean-css
js压缩：
在线网站、html-minifier、uglifyjs2
文件合并：
首屏渲染：
合并后的js大，加载慢
缓存失效：
MD5戳，一个改动，整个文件都变
手段：
公共库合并、不同页面合并、随机应变
方法：
webpack、gulp、在线、fis3、nodejs
vue scrollend newslist app
先把代码部署到服务器上
带宽影响访问网站的速度
在线压缩网站不能压缩es6
es6要用babel转换成es5
对同一个域名的并发请求浏览器有限制 请求上限
2-6、2-7 fis3没看
图片编码原理和类型选择
jpg图片解析过程：
rgb颜色空间转换到其它颜色空间
进行重采样，区分高频和低频的颜色变化
dct：对高频的采样结果进行压缩
对数据量化
encode
最后得到 jpg-compressed imge data
有损压缩
png8/png24/png32区别：
png8 256色+支持透明
png24 2^24色 不支持透明
一个像素的颜色要24bit表现
png32 2^24色 支持透明
不同格式图片的应用:
jpg有损压缩，压缩率高，不支持透明
png支持透明，浏览器兼容好
webp压缩程度更好，在ios webview有兼容性问题
svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景
svg不会随着图片放大缩小有马赛克
svg比png小，解析速度快，因为它内嵌在html中
iconfont库
jpg——大部分不需要透明图片的业务
png——大部分需要透明图片的业务
webp——安卓全部（对ios支持不好）
但是解码速度和压缩率高于png
更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。
svg矢量图——图片样式简单的业务
（比如头像，icon，icon-font icon-font本身也基于svg）
图片压缩手段：
雪碧图
减少http请求
缺点：图片特别大，如果加载不进来，就会失去整个图片的信息
另外图片大，加载时间也长
在整张图片加载进来前，网页上涉及图片的东西都是空的
（2）将图片转换成base64格式 inline在html中
（3）svg标签，不需要http请求加载相应的资源
www.iconfont.cn 阿里
图片压缩是把颜色bit数下降
3-6 png转webp 3-7 雪碧图 略
浏览器渲染机制
浏览器渲染过程 页面渲染过程
layout（布局） 在 render tree形成后
html渲染过程的特点
顺序执行
并发加载（当引入外部资源）
在cdn上设三到四个域名，以免并发限制
css加载阻塞：
css如果在head中通过link方式引入，阻塞页面渲染
意味要等link对应的css加载完才会继续相应的渲染
css阻塞js的执行，但不阻塞外部脚本的加载
因为：
js操作dom会涉及到css修改
如果js操作涉及到css，而css里的一些样式没出来
js依赖css加载的样式效果
（因为你依赖我的样式，所以等我都加载完你再执行）
js阻塞：
直接引入的js阻塞页面的渲染
<script>没有defer、async
js很有可能调用document.write修改文档结构，所以会阻塞后面节点的创建
（因为我要改你，所以你别渲染）
js不阻塞资源的加载
暂停js执行，用预先扫描器扫描后面的词语
发现后面词语用到其他资源，用预先加载器并发请求后续资源
js顺序执行，阻塞后续js逻辑的执行
<script>连续引入多个js
懒加载：
图片进入可视化区域后请求图片资源
对于电商等图片很多，页面很长的业务适用
减少无效资源的加载
并发加载的资源过多会阻塞js加载，影响网站正常使用
///图片进入可视区后 占位符上src才会被设置进去
///没有进入可视区 src是epx 真正的地址被放在data_url
data-image=“”里的url放到background-image中
预加载应用
jquery九宫格：
background-imge选中切换成不中
防止请求资源还未返回，选中态的场景过去了
总结：
当图片比较大，而又立马需要呈现到页面上
或者说单纯要速度很快的显示出来
赶上用户的操作、需求，不能需要你出现的时候，请求资源还没返回来
<img src="" class="imge-item" lazyload="true" data-original="http://" />
lazyload=“true”
class=“lazy”
占位：图片的大小实现确定好 height： xxpx
没有占位，图片就一次性全下载
预加载：
在图片使用前提前请求（大的图片、模型）
资源用到时能从缓存在加载，提升用户体验
方法：
1.<img src="" style="display:none" />
2.myPreload.js:
使用Image对象
var image=new Image()
image.src="http://"
3.XMLHttpRequest对象
open send onreadystatechange
缺点：请求的图片不能跨域
优点：更精细的控制预加载过程
4.preload,js
控制预加载过程
html：
<script src="./preload.min.js"></script>
<script src="./myPreload.js"></script>
js:
使用preload.js
略
zepto.lazyload使用：
html:
<body>
<img src="" class="imge-item" lazyload="true" data-original="http://" />
<script src="./zepto.min.js"></script>
<script src="./zepto.lazyload/js"></script>
<script src="./lazyload.js"></script>
</body>
js:选中要lazyload的图片——
$('img[data-original][lazyload]').lazyload()
CSS性能让js变慢：
一个线程 =》 js解析
一个线程 =》ui渲染
ui渲染 js不动 js渲染 ui不动
频繁触发重绘与回流，会导致ui频繁渲染，最终导致js变慢
所以要优化css
回流：
render tree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变（页面布局、几何属性、特定css属性改变）而需要重构
重绘:
render tree中一些元素需要更新属性，这些属性只是影响元素的外观、风格，而不影响布局
如background-color、字体颜色
回流必将引起重绘
重绘不一定引起回流
页面展示的依赖关系维护
依赖关系
引入方式
浏览器存储
localstorge cookie sessionstorge indexdb
cookie区分http请求客户端情况
生成方式:
http response header中的set-cookie
服务端生成，客户端存储和维护
js读取cookie：
document.cookie
作用：
1.用于浏览器和服务器端交互
2.客户端自身数据的存储
cookie大小4kb
cookie域名下的所有请求都携带cookie
但不是所有请求（例如静态文件，cssjs）都要用到cookie，cdn流量损耗
缓存机制
cache-control
last-modefied etag
from memory cache
from disk cache
PWA
一种全新的web app模型，不是某种技术或知识点
通过web特性的增强，提升用户体验
对网页渲染、数据访问有较好优化
service worker
脚本，单独在浏览器后台运行，为一些不依赖页面或者用户交互的特性所用
第一个特性是拦截和处理网络请求的能力，包括以编程方式管理被缓存的相应
未来特性还有推送消息，背景后台同步
chrome://serviceworker-internals/
chrome://inspect/#service-workers
Vue-SSR
ERROR in ./node_modules/_vue-loader@13.7.3@vue-loader/lib/template-compiler?{"id
":"data-v-4fcacc3e","hasScoped":true,"buble":{"transforms":{}}}!./node_modules/_
vue-loader@13.7.3@vue-loader/lib/selector.js?type=template&index=0!./src/compone
nts/tabbar/HomeContainer.vue
Module not found: Error: Can't resolve '../../images/menu1.png' in 'E:\Vue\vue黑
马\day7\代码\02.vue-cms\src\components\tabbar'
@ ./node_modules/_vue-loader@13.7.3@vue-loader/lib/template-compiler?{"id":"dat
a-v-4fcacc3e","hasScoped":true,"buble":{"transforms":{}}}!./node_modules/_vue-lo
ader@13.7.3@vue-loader/lib/selector.js?type=template&index=0!./src/components/ta
bbar/HomeContainer.vue 42:30-63
@ ./src/components/tabbar/HomeContainer.vue
@ ./src/router.js
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?htt
p://localhost:3000 webpack/hot/dev-server ./src/main.js
来源：https://blog.csdn.net/from_shanghai/article/details/95183269