Javascript

WEB 优化方案

Lewis

Sep 19, 2018 — 5 min read

页面优化

HTML

设置页面元信息

<!-- 可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。-->
<meta http-equiv="expires" content="31 Dec 2008">
    
<!-- 禁止浏览器从本地计算机的缓存中访问页面内容。-->
<meta http-equiv="Pragma" content="no-cache">

使用外部 css、js

根据用户使用情况而定，外部 css、js 有利于缓存（css不阻塞dom解析，阻塞浏览器渲染），如果无需重复使用或多次访问更适合 inline css。

禁止阻塞渲染

脚本后置或者延迟加载、禁止dom操作（css 的解析和 js 的执行是互斥的）、图片占位

静态资源标明尺寸

由于资源大小不能确定，页面经常要进行反复重新的绘制。

HTML 分片加载

STYLE

避免使用表达式
尽可能减少使用box-shadows、gradients
减少 reflow (回流)、repaint (重绘)

让动画元素不在文档流中 position:fixed; position:absolute;

使用 GPU 加速的动画:使用用 transforms 和 opacity 来完成动画，当动画在 GPU 上执行时，仅触发渲染层合并。

所有 layout 相关的操作连续放入 layout-queue 中，更新时同时执行 layout。如:

/**
 * 可导致触发 layout 的操作：
 * 
 * Element: clientHeight, clientLeft, clientTop, clientWidth, focus(), 
 * getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, 
 * offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), 
 * scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), 
 * scrollLeft, scrollTop, scrollWidth
 * 
 * Frame, HTMLImageElement: height, width
 * 
 * Range: getBoundingClientRect(), getClientRects()
 * 
 * SVGLocatable: computeCTM(), getBBox()
 * 
 * SVGTextContent: getCharNumAtPosition(), getComputedTextLength(), 
 * getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), 
 * getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(), 
 * selectSubString()
 * 
 * SVGUse: instanceRoot
 * 
 * window: getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, 
 * webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()
 **/
 
 // 两次 layout
 var width = DIV.offsetWidth
 DIV.style.width = width
 
 var height = DIV.offsetHeight
 DIV.style.height = height
 
 // 一次 layout
 var width = DIV.offsetWidth
 var height = DIV.offsetHeight
 
 DIV.style.width = width
 DIV.style.height = height

开启 GPU 加速

使用 3D 变换 尽可能在需要的地方开启以减少功耗和内存

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

解决闪烁问题 通常发生在动画开始的时候

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

JAVASCRIPT

无阻塞加载 Script Defer、Script Async

defer 规定是否对脚本执行进行延迟，直到文档已经显示给用户为止。如果脚本不会改变文档内容，可将 defer 属性加入到 <script> 中。（脚本会在DOMContentLoaded之前执行）
async 属性规定一旦脚本可用，则会异步执行。（当页面继续进行解析时，脚本将被执行）

模块化/异步加载

动态按需加载脚本，例如：asyncComponent、requireJs、seaJs

减少 DOM 查询/操作

document.images、document.links、document.forms。

图片优化

压缩

JPEG 2000、JPEG XR 和 WebP 等图片格式的压缩效果通常比 PNG 或 JPEG 好

/**
 * 检测是否支持webp
 */
 function checkWebp() {
    try {
        return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
    } catch (err) {
        return  false;
    }
}

适配

img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源

<img 
    class="post-card-image" 
    srcset="
    //images.monogogo.cn/2019-8-25@16:37:13.jpg?imageMogr2/auto-orient/thumbnail/400x/blur/1x0/quality/75|imageslim 300w,
    //images.monogogo.cn/2019-8-25@16:37:13.jpg?imageMogr2/auto-orient/thumbnail/600x/blur/1x0/quality/75|imageslim 600w,
    //images.monogogo.cn/2019-8-25@16:37:13.jpg?imageMogr2/auto-orient/thumbnail/600x/blur/1x0/quality/75|imageslim 1000w,
    //images.monogogo.cn/2019-8-25@16:37:13.jpg?imageMogr2/auto-orient/thumbnail/800x/blur/1x0/quality/75|imageslim 2000w" 
    sizes="(max-width: 1000px) 400px, 700px" 
    src="//images.monogogo.cn/2019-8-25@16:37:13.jpg" 
    alt="HTTPS 证书加密、解密过程解析">

css 使用 css image-set()

body {
background-image: -webkit-image-set( 
    url(//images.monogogo.cn/2019-8-25@16:37:13.jpg?imageMogr2/auto-orient/thumbnail/400x/blur/1x0/quality/75|imageslim) 1x, 
    url(//images.monogogo.cn/2019-8-25@16:37:13.jpg?imageMogr2/auto-orient/thumbnail/400x/blur/1x0/quality/75|imageslim) 2x, 
    url(//images.monogogo.cn/2019-8-25@16:37:13.jpg?imageMogr2/auto-orient/thumbnail/400x/blur/1x0/quality/75|imageslim) 600dpi);
background-image: image-set( 
    url(//images.monogogo.cn/2019-8-25@16:37:13.jpg?imageMogr2/auto-orient/thumbnail/400x/blur/1x0/quality/75|imageslim) 1x, 
    url(//images.monogogo.cn/2019-8-25@16:37:13.jpg?imageMogr2/auto-orient/thumbnail/400x/blur/1x0/quality/75|imageslim) 2x, 
    url(//images.monogogo.cn/2019-8-25@16:37:13.jpg?imageMogr2/auto-orient/thumbnail/400x/blur/1x0/quality/75|imageslim) 600dpi;
}

iconfont

小图标使用 iconfont 或者 svg、symbol 支持多色图标

编码

使用交错编码方式 interlace PNG 和 progressive JPEG，渐进加载有模糊到清晰，有效减少空白现象。

延迟加载可视区以外的图片 *.getBoundingClientRect().top

请求数

合并小于 10k 的图片（base64、iconfont）
拆分初始化负载合并脚本和样式表
接口合并
http2

缓存

静态资源 hash 缓存
请求缓存

DNS

负载均衡、减少 DNS 查找

PWA

PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。

AMP

AMP（Accelerated Mobile Pages）是谷歌的一项开放源代码计划，可在移动设备上快速加载的轻便型网页，旨在使网页在移动设备上快速加载并且看起来非常美观。百度目前可支持AMP提交。https://www.mipengine.org/doc/00-mip-101.html

MIP

MIP(Mobile Instant Page - 移动网页加速器)，是一套应用于移动网页的开放性技术标准。通过提供MIP-HTML规范、MIP-JS运行环境以及MIP-Cache页面缓存系统，实现移动网页加速。

...

参考文章

Rendering: repaint, reflow/relayout, restyle

WEB 优化方案

Lewis

页面优化

HTML

STYLE

JAVASCRIPT

图片优化

请求数

缓存

DNS

PWA

AMP

MIP

更多

参考文章

Read more

七牛云证书自动续期

Flutter入门指南

DNS security

Certbot Let's Encrypt 证书自动续期