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