前端页面优化

浏览器得请求到发送到返回都经历了什么？

用户url请求 --> dns服务器获取IP --> 局域网 --> 交换机 --> 路由器 --> 主干网络 --> 服务端 mvc --> 返回view–> render过程(html css 进行渲染 形成dom css 树，进一步执行js脚本)。

可优化有哪些？

1 dns层面做缓存
2 网络层面，选择cdn,(请求静态资源)
3 相同静态资源缓存
4 http请求大小
5 多次http请求合成一次
6 服务器渲染

资源压缩，减少http请求大小

资源压缩，减少http请求大小。
资源合并和压缩：减少http数量 http资源大小

html:不显示空格 制表符 换行符 html注释
怎么压缩？

1在线网站压缩
2nodejs 提供html-minifier工具
3服务器压缩

css：无效代码删除、css语义合并
怎么压缩？

1 在线网站
2 nodejs 提供html-minifier工具 html中得css
3 clean-css 对css压缩

js：无效字符删除、剔除注释、代码语义缩减和优化、代码保护
怎么压缩？

1 在线网站
2 nodejs 提供html-minifier工具 html中得js
3 uglifyjs2 对js压缩

图片优化，减少http请求大小

png8 256+透明 色彩不丰富
png24 2^24色 不支持透明
png32 2^24色 支持透明

不同格式图片常用得业务场景

jpg 有损压缩 不支持透明
png 支持透明 兼容性好 可以降级png32 png24 png8
webp 压缩格式程序好，ios webview 有兼容
svg 矢量图，代码内嵌，相对小 、尽量使用

jpg – 大部分不需要透明图片
png – 大部分需要透明
webp – 安卓
svg – 图片样式简单得业务场景 比如icon

雪碧图，减少http请求次数

优点:减少请求数量
缺点:图片大，加载慢整个页面也会有问题

网站在浏览器端是如何渲染得？

先HTML -> DOM 遇到外部资源 去加载外部资源 然后渲染

特点

从上到下，顺序执行，
并发加载，受域名限制，多设置cdn
是否堵塞，加载是否堵塞后面执行
依赖关系，html 加载 css前一闪而过，js执行顺序，异步加载（js依赖关系）
引入方式， script等，动态引入方式

css 堵塞，防止渲染减慢速度

css 用link 在head里面引入。
css会堵塞js 执行，但是不堵塞外部脚本加载（有预先扫描）。这样子加载不会有问题。

js 堵塞，防止渲染减慢速度

js 是顺序执行，堵塞后续逻辑执行。
直接引入js 会堵塞页面渲染。<script> 担心js直接影响渲染;
js 不堵塞页面渲染：

<script src="..."  async="async"></script>
<script src="..." defer="defer"></script>

懒加载和预加载

懒加载

懒加载：延迟加载
图片进入可视区域请求图片，
减少无效请求
并发加载会堵塞js加载，影响网站正常使用
多用于电商等图片多得业务场景

懒加载使用，减少刚开始加载页面资源过大

监听scroll事件，
判断是否进入可视区域 getBoundingClientRect 图片占位 zepto.lazylode.js

预加载

预加载：提前请求 抽奖
图片在请求前提前请求
资源使用随时在缓存取
页面展示 有依赖关系

预加载使用，提前加载资源增加显示速度

预加载使用：
html display:none
img对象 src设置
xmlHttprequst ,优点：监听资源。缺点：跨域得问题 preloadjs //预加载

css性能会让JavaScript变慢么？

ui js两个线程，会。优化css写法 加快渲染速度。

重绘回流

回流

元素规模尺寸 布局 隐藏等改变 需要重建，就是回流。
触发回流得属性css:
盒子模型
定位 浮动
改变节点内部文字结构

重绘

影响外观不影响布局，叫重绘。
css:
颜色
边框样式
背景颜色

避免回流？

频繁重绘回流的DOM元素独立立一个图层。
但是图层合成运算量大。

如何独立成一个图层
1、3D或者透视
2、perspective
3、transform 水平多用这个
4、<video>
5、canvas
6、flash
7、opacity
8、加速css过滤器
9、元素含复合层后代节点
10、z-index
11、gif:单独立出来一个图层，防止频繁重绘回流
注意：图层不能被烂用:图层合成运算量大

总结
translate 替代 top 改变 ==》 窗口图片更换。
opacity 替换 visibility 可以单独出来一个图层。
不要一条条修改DOM 变成class 一次性。
DOM离线修改：很多css 可以先display none。
offsetHeght 不要是for的变量 不写在for 里面。
不要使用table布局 改一个变全场。
动画实现速度，对于动画先建图层。
启用GPU加速：transform will_changge。

[ 知识点总结来自于慕课网《页面速度起飞》]