web前端性能优化-白红宇

web前端性能优化

阅读量：5174 次

发布时间：2019-06-13

本文共 2662 字，大约阅读时间需要 8 分钟。

一、概念

1.优化地方：首屏时间，资源加载，交互响应，渲染，滚动，图片，动画

2.页面速度因素：网络宽带速度设备性能（CPU,GPU,浏览器）页面本身（js,css等）

3.法则：减少请求，合并，压缩，样式，css雪碧图，外联内联，DNS，图片压缩，渲染优化等

4.RTT：(Round-Trip Time)往返时间简单来说就是发送方从发送数据开始，到收到来自接受方的确认信息所经历的时间。

5.14KB原则: 控制页面资源包在14KB内来减弱慢启动的影响

6.缓存：

协议缓存：Cache-Control(或Expires) Last-Modified(或Etag)

离线缓存：Cache Manifest

本地存储：localStorage sessionStorage

indexDB

7.requestAnimationFrame计算FPS(每秒钟画面更新次数) 1000ms/60=16.67

8.网络耗时的测定：window.performance

9.GPU渲染:transform,opacity,filter，video

使用GPU可以优化动画效果 GPU渲染会达到60fps 使用对GPU友好的css属性

触发硬件加速的css(浏览器通过某些样式创建了一个独立图层，图层中的动画由GPU进行预处理并且触发了硬件加速)

二、优化场景

方法：减少http请求，压缩，懒加载，css Sprite，异步加载，cdn,缩小cookie，避免重定向

　　压缩图片，脚本执行优化，touch事件优化，减少dom节点，canvas, 动画优化，GPU加速，缓存，首屏，无阻塞，离线包

2.1 图片

图片格式选择

图片压缩工具： gifsicle:创建和优化GIF图片 jpegtran:优化jpeg图片 optipng:无损png优化 pngquant :有损png优化

依靠css3绘制图片：体积小，减少请求，矢量

使用iconfont代替图片：加载性能好，支持css样式，兼容性好，矢量，缺点：只支持单色图标

Data URL弊端：在做加载优化时，需要综合考虑是否采用

Base64编码的数据体积通常是原数据的体积的4/3

消耗更多CPU和内存资源

为了使其可缓存，写在CSS中导致CSS文件大了

适用于图片小，页面上引用图片总数不多的场景

2.2 加载/滚动

加载优化

预加载：显性加载隐性加载

按需加载：懒加载，响应式加载（使用srcset+sizes属性与w标识符）

2.3 ajax

数据埋点，统计等场景，不用ajax,用img 设置src

优点:不存在跨域；并行加载，不影响页面加载；更简单

2.4 js和css

1.localStorage/indexDB:Localstorage不支持大文件,频繁读写,会溢出;indexDB类似数据库

2.webwoker:

运行在后台、独立于其他脚本、不会影响页面的性能

除了DOM操作之外、理论上任何JS脚本任务都可放入worker中执行

用户体验上来看、提升了性能

　　3.timeline工具

4.渲染优化

避免在document上直接进行频繁的DOM操作

使用classname代替内联修改样式

缓存Layout属性值

设置元素的position为absolute或fixed

读写分离,批量操作

不要在css里面写expression

不要在16ms内发生多次渲染行为

5.滚动渲染:重绘是一个阻塞操作，滚动时减少绘制

6.策略:

requestAnimationFrame

绝对定位

开启GPU加速: -webkit-transform :translateZ(0)

Canvas

禁止图像缩放（使用实际大小的图片非常重要）

根据实际页面情况慎用耗性能的CSS属性

7.构建工具支持:文件体积的减小

Webpack: Tree-shaking –删除无用代码

Webpack: CommonsChunk --提取公共代码

三、首屏优化

资源内联

压缩直出内容：直出数据，不直出dom，dom通过模板数据生成

首屏数据预拉取：加载js文件,发送请求拉取数据

非首屏预拉取首屏数据:话题详情中点击,预先取首屏的数据

静态资源存储到localStorage:资源包减小,流量节省

网络环境差异化加载资源:webview提供接口,2G网络加载低质量图片,Wi-Fi环境中预加载资源

数据复用:个人中心（用户信息）

if (/MicroMessenger/ig.test(navigator.userAgent)){ // 微信环境加载js api             resourcesToLoad.push('http://res.wx.qq.com/open/js/jweixin-1.0.0.js');        }        wx.getNetworkType({            success: function (res) {                var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi            if ( networkType == 'wifi' ) { //如果是wifi环境，预加载所有的图片文件                 //预加载的资源代码                 var resouresToPreLoad = [xxxxxx, xxxxxxxx]; //此处省略一堆资源代码                for (var i = resouresToPreLoad.length - 1; i >= 0; i--) {                    new Image().src = resouresToPreLoad[i];                }                }            }        });

四、前端优化是双刃剑