前端性能优化

涉及层面

• 网络层面
• 构建层面
• 浏览器渲染层面
• 服务端层面

资源合并与压缩

http请求的过程及潜在的性能优化点

浏览器的一个请求从发送到返回都经历了什么

image.png

• dns是否可以通过缓存减少dns查询时间
• 网络请求的过程走最近的网络环境
• 相同的静态资源是否可以缓存
• 能否减少http请求大小
• 能否减少http请求数量
• 服务端渲染

html压缩

HTML代码压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括空格,制表符,换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩

• 使用在线网站进行压缩(走构建工具多，公司级在线网站手动压缩小)
• node.js提供了html-minifier工具
• 后端模板引擎渲染压缩

css及js压缩

• 使用在线网站进行压缩
• 使用html-minifier对html中的css进行压缩
• 使用clean-css对css进行压缩
• 使用html-minifier对html中的js进行压缩
• 使用uglifyjs2对js进行压缩

不合并文件可能存在的问题

image.png

• 使用在线网站进行合并
• 构建阶段，使用nodejs进行文件合并

图片相关优化

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

• jpg有损压缩，压缩率高，不支持透明。大部分不需要透明图片的业务场景
• png支持透明，浏览器兼容性好。大部分需要透明图片的业务场景
• webp压缩程度更好，在ios webview中有兼容性问题。android全部(解码速度和压缩率高于jpg和png，但是ios safari还没支持)
• svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景(尽量使用，绘制能力有限，图片简单用的比较多)。图片样式相对简单的业务场景

图片压缩的几种情况

• 针对真实图片情况，舍弃一些相对无关紧要的色彩信息
• CSS雪碧图：把你的网站用到的一些图片整合到一张单独的图片中
• Image-inline：将图片的内容嵌到html中(减少网站的HTTP请求)
• 使用矢量图
• 在android下使用webp

css和js的装载与执行

HTML页面加载渲染的过程

image.png

• 顺序执行，并发加载
  • 词法分析：从上到下依次解析
    • 通过HTML生成Token对象（当前节点的所有子节点生成后，才会通过next token获取到当前节点的兄弟节点），最终生成Dom Tree
  • 并发加载：资源请求是并发请求的
  • 并发上限
    • 浏览器中可以支持并发请求，不同浏览器所支持的并发数量不同（以域名划分），以Chrome为例，并发上限为6个
• 是否阻塞
  • css阻塞
    • css 在head中通过link引入会阻塞页面的渲染
      • 如果我们把css代码放在head中去引入的话，那么我们整个页面的渲染实际上就会等待head中css加载并生成css树，最终和DOM整合生成RanderTree之后才会进行渲染
      • 为了浏览器的渲染，能让页面显示的时候视觉上更好。
        优化点： 把CDN资源分布在多个域名下

懒加载与预加载

懒加载

• 图片进入可视区域之后请求图片资源
• 对于电商等图片很多，页面很长的业务场景适用
• 减少无效资源的加载
• 并发加载的资源过多会阻塞js的加载，影响网站的正常使用

先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。

var viewheight = document.documentElement.clientHeight   //可视区域高度

function lazyload(){
    var eles = document.querySelectorAll('img[data-original][lazyload]')

    Array.prototype.forEach.call(eles,function(item,index){
        var rect;
        if(item.dataset.original === '') return;
        rect = item.getBoundingClientRect(); //返回元素的大小及其相对于视口的

        if(rect.bottom >= 0 && rect.top < viewheight){
            !function(){
                var img = new Image();
                img.src = item.dataset.url;
                img.onload = function(){
                    item.src = img.src
                }
                item.removeAttribute('data-original');
                item.removeAttribute('lazyload');
            }()
        }
    })
}

预加载

• 图片等静态资源在使用之前的提前请求
• 资源使用到时能从缓存中加载，提升用户体验
• 页面展示的依赖关系维护

第一种方式：直接请求下来

<img src="https://user-gold-cdn.xitu.io/2019/2/21/1690d1b216cbfa18" style="display: none"/>
<img src="https://user-gold-cdn.xitu.io/2019/2/21/1690d1b21b70c8d2" style="display: none"/>
<img src="https://user-gold-cdn.xitu.io/2019/2/21/1690d1b216e17e26" style="display: none"/>
<img src="https://user-gold-cdn.xitu.io/2019/2/21/1690d1b217b3ae59" style="display: none"/>

第二种方式：image对象

var image = new Image();
image.src = "www.pic26.com/dafdafd/safdas.jpg"；

第三种方式：xmlhttprequest

var xmlhttprequest = new XMLHttpRequest();

xmlhttprequest.onreadystatechange = callback;

xmlhttprequest.onprogress = progressCallback;

xmlhttprequest.open("GET","http:www.xxx.com",true);

xmlhttprequest.send();

function callback(){
    if(xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200){
        var responseText = xmlhttprequest.responseText;
    }else{
        console.log("Request was unsuccessful:" + xmlhttprequest.status);
    }
}

function progressCallback(){
    e = e || event;
    if(e.lengthComputable){
        console.log("Received"+e.loaded+"of"+e.total+"bytes")
    }
}  

重绘与回流

回流

• 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就成为回流(reflow)
• 当页面布局和几何属性改变时，就需要回流

重绘

• 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不影响布局，比如background-color。

回流必将引起重绘，但是重绘不一定会引起回流

新建DOM的过程

• 获取DOM后分割为多个图层
• 对每个图层的节点计算样式结果(Recalculate style 样式重计算)
• 为每个节点生成图形和位置(Layout 回流和重布局)
• 将每个节点绘制填充到图层位图中(Paint Setup和Paint 重绘)
• 图层作为纹理上传至gpu
• 符合多个图层到页面上生成最终屏幕图像(Composite Layers 图层重组)

优化方式：

• 尽量避免使用触发回流、重绘的CSS属性
• 将重绘、回流的影响范围限制在单独的图层(layers)之内
• 图层合成过程中消耗很大页面性能，这时候需要平衡考虑重绘回流的性能消耗

浏览器存储

cookies

cookie的生成方式：

• http-->response header-->set-cookie
• js中可以通过document.cookie可以读写cookie

cookie的限制：

• 作为浏览器存储，大小4kb左右
• 需要设置过期时间 expire

localStorage

• HTML5设计出来专门用于浏览器存储的
• 大小为5M左右
• 仅在客户端使用，不和服务端进行通信
• 接口封装较好
• 浏览器本地缓存方案

sessionstorage

• 会话级别的浏览器存储
• 大小为5M左右
• 仅在客户端使用，不和服务器端进行通信
• 接口封装较好
• 对于表单信息的维护

indexedDB

• IndexedDB是一种低级API，用于客户端存储大量结构化数据。该API使用索引来实现对该数据的高性能搜索。
• 为应用创建离线版本

 function openDB(name, callback) {
            //建立打开indexdb  indexedDB.open
            var request = window.indexedDB.open(name)
            request.onerror = function(e) {
                console.log('on indexedDB error')
            }
            request.onsuccess = function(e) {
                    myDB.db = e.target.result
                    callback && callback()
                }
                //from no database to first version,first version to second version...
            request.onupgradeneeded = function() {
                console.log('created')
                var store = request.result.createObjectStore('books', {
                    keyPath: 'isbn'
                })
                console.log(store)
                var titleIndex = store.createIndex('by_title', 'title', {
                    unique: true
                })
                var authorIndex = store.createIndex('by_author', 'author')

                store.put({
                    title: 'quarry memories',
                    author: 'fred',
                    isbn: 123456
                })
                store.put({
                    title: 'dafd memories',
                    author: 'frdfaded',
                    isbn: 12345
                })
                store.put({
                    title: 'dafd medafdadmories',
                    author: 'frdfdsafdafded',
                    isbn: 12345434
                })
            }
        }
        var myDB = {
            name: 'tesDB',
            version: '2.0.1',
            db: null
        }

        function addData(db, storeName) {

        }

        openDB(myDB.name, function() {
            // myDB.db = e.target.result
            // window.indexedDB.deleteDatabase(myDB.name)
        });

        //删除indexedDB

缓存

期望大规模数据能自动化缓存，而不是手动进行缓存，需要浏览器端和服务器端协商一种缓存机制

• Cache-Control所控制的缓存策略
• last-modified 和 etage以及整个服务端浏览器端的缓存流程
• 基于node实践以上缓存方式

image.png
image.png

服务端性能优化

服务端用的node.js因为和前端用的同一种语言，可以利用服务端运算能力来进行相关的运算而减少前端的运算

image.png

原文链接：web前端性能优化总结