前端性能优化

时间 2019-11-12

标签前端性能优化栏目系统性能繁體版

原文原文链接

在讲前端性能优化前，先了解下一个网站在浏览器端是如何渲染的css

一、首先输入url地址html

二、浏览器根据url向服务器发送http请求前端

三、服务器端接收请求并返回html代码返回浏览器web

四、浏览器接收html代码并解析生成页面算法

五、解析页面过程浏览器

　　a、HTML文档生成DOM和CSS生成CSSOM缓存

　　b、DOM和CSSOM生成RenderTree性能优化

　　c、有了RenderTree知道了浏览器中有那些节点，各个节点的CSS定义绘制成layout render tree服务器

　　d、有了layout render tree 浏览器使用浏览器UI绘制每一个节点生成 paint render treecookie

资源的合并和压缩

　　减小http请求，减小请求资源的大小

　　html压缩

　　　　html压缩是压缩文本中空格，制表符，换行符，注释等

　　css压缩

　　　　无效代码删除

　　　　代码合并

　　js的压缩和混乱

　　　　无效字符删除，注释

　　　　代码语义的缩减和优化

　　　　代码保护

　　文件合并

　　　　减小http请求

　　　　问题

　　　　　　首屏加载慢

　　　　　　缓存失效问题

　　　　方案

　　　　　　公共库合并

　　　　　　不一样页面的合并

　　开启gzip

图片先关优化

　　png8/png24/png32之间的区别

　　　　png8 支持透明，文件大小小

　　　　png24 不支持透明

　　　　png32 支持透明

　　图片压缩

　　　　针对真实图片状况，舍弃一些相对可有可无的色彩信息

　　　　CSS雪碧图

　　　　　　把一些图片整合到一张单独的图片中->减小网站http请求数量

　　　　　　缺点：整合图片比较大，一次加载比较慢

　　　　　　方案：保证雪碧图资源不要太大

　　　　Image inline

　　　　　　将图片的内容内嵌到html当中->减小网站http请求

　　　　　　只适合小图片，不适合大图片

　　　　矢量图

　　　　　　使用SVG进行适量图的绘制

　　　　　　使用iconfont解决icon问题

　　　　　　只适合简单图片，不适合复杂图片

　　　　webp

　　　　　　webp有更优的图像数据算法，能带来更小的图片体积

　　　　　　目前只有安卓能用

　　不一样格式图片经常使用的业务场景

　　　　jpg有损压缩，压缩率高，不支持透明

　　　　png支持透明

　　　　webp压缩程度更好，可是只适合安卓

　　　　svg矢量图，代码内嵌，只适合图片相对简单的场景

　　压缩网站

　　　　https://tinypng.com/　　

页面加载和渲染

　　前面讲了解析页面的过程。页面解析过程的特色

　　顺序执行

　　　　词法分析的顺序是从上到下->页面DOM，JS资源，CSS资源从上到下

　　并发加载

　　　　web中资源是并发加载　　

　　是否阻塞

　　　　css阻塞

　　　　　　css head中阻塞页面的渲染

　　　　　　　　页面出现闪动。

　　　　　　　　这个页面要呈现相应的效果，须要等待link对应的css加载完毕才会渲染，因此整个渲染是带样式的

　　　　　　css阻塞js的执行

　　　　　　　　css在加载完以前后续的js会被阻塞

　　　　　　css不阻塞外部脚本的加载

　　　　　　　　css不阻塞外部脚本的加载可是阻塞执行，由于js可能会操做DOM，在操做DOM的以前必须等待CSS执行完毕

　　　　js阻塞

　　　　　　直接引入的js阻塞页面的渲染

　　　　　　　　js document.write可能会修改文档结构，js代码的执行会阻塞后面节点的建立

　　　　　　js不阻塞资源的加载

　　　　　　　　预先扫描器会对后续资源加载

　　　　　　js顺序执行，阻塞后续js逻辑的执行　

　　　　　　　　js执行时单线程　

　　依赖关系

　　　　页面的渲染依赖于css的加载

　　　　　　页面必须等待DOM和CSSOM的加载，才会去生成RenderTree，推荐把css放到head中，这样不会出现页面闪动问题

　　　　js执行顺序的依赖关系

　　　　　　须要关注js在加载关系是否有依赖关系

　　　　js逻辑对于dom逻辑的依赖关系

　　引入方式

　　　　css

　　　　　　link

　　　　　　@import

　　　　　　script

　　　　　　　　阻塞问题

　　　　　　defer

　　　　　　　　在文档渲染完毕，在DOMContentLoaded以前调用执行

　　　　　　　　是顺序执行，不会阻塞页面加载

　　　　　　async

　　　　　　　　js异步加载，不会阻塞页面加载，放弃js直接的依赖关系

　　　　　　js资源动态引入

　　　　　　代码实战

一个简单的引入js代码

<!DOCTYPE html>
<html>
<head>
<script src="a.js" defer></script>
<script src="b.js" defer></script>
<script>
    window.addEventListener('DOMContentLoaded', function(){
        console.log('DOMContentLoaded')
    })
</script>
</head>
<body>
    <p>js加载</p>
</body>
</html>

View Code

script

图片结果能够看出a.js，b.js阻塞页面的渲染

defer

图片结果能够看出a.js，b.js不阻塞页面加载，看出defer执行是在页面渲染完毕和DOMContentLoaded之间执行

async

图片结果能够看出a.js，b.js不阻塞页面加载，可是在DOMContentLoaded并不会影响async的加载　

　　加载和执行优化

　　　　css样式表置顶

　　　　js脚本置底

　　　　合理使用js异步加载能力

懒加载

　　图片进入可视区域以后请求图片资源

　　减小无效资源的加载

　　并发加载的资源过多会阻塞js的加载

预加载

　　静态资源在使用以前提早进行请求

　　提高用户体验

重绘和回流

　　css性能让js变慢

　　css放在head中，在加载css时，会阻塞整个页面渲染，js代码执行时，页面渲染也是阻塞的

　　回流

　　　　当RenderTree中的一部分由于元素的规模尺寸，布局，隐藏等改变并且须要从新构建。称为回流

　　　　当页面布局和几何属性改变时就须要回流

　　重绘

　　　　当RenderTree中的一些元素须要更新属性，而这些只是影响元素的外观，风格，而不会影响布局的，好比background-color。称为重绘。

　　触发页面重布局的属性

　　　　盒子模型相关属性会触发重布局

　　　　　　width/height/padding/margin/display/border-width/border/min-height

　　　　定位属性及浮动也会触发重布局

　　　　　　top/bottom/left/right/position/float/clear

　　　　改变节点内部文字结构也会触发重布局

　　　　　　text-align/overflow-y/font-weight/overflow/font-family/vertival-align/white-space/font-size

　　只触发重绘的属性

　　　　color/border-style/border-radius/visibility/text-decoration/background/background-image/background-position/background-repeat/background-size/outline-color/outline/outline-style/outline-width/box-shadow

　　优化点

　　　　translate替代top

　　　　opacity替换visibility

　　　　预先定义好class，然修改DOM的className

　　　　把DOM离线后修改，好比把DOM设置display:none，最后在显示出来

　　　　不要把DOM节点的属性值放在一个循环里当成循环里的变量 offsetHeight，offsetWidth

　　　　不要使用table布局

　　　　动画实现的速度的选择

　　　　启动GPU硬件加速 transform:translateZ(0)

浏览器存储

　　　　用于浏览器和服务器之间交互

　　　　客户端自身数据存储

　　　　限制

　　　　　　存储大小只有4kb

　　sessionStorage

　　localStorage

　　　　HTML5设计出来专门用于浏览器存储

　　　　存储大小5M

缓存

服务器端性能优化