web前端性能优化

一、概念

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];
                }
                }
            }
        });

四、前端优化是双刃剑

• 按需加载提升速度，但可能导致大量重绘
• Touch响应快，但很多场景不适合
• GPU加速效率高，但内存开销大等等
• Loading会让整体体验流畅，但容易造成用户流失
• 图片压缩让带宽成本降低，但可能会导致视觉效果变差