2020年4月 – 藏经阁

web 性能优化：

1.基本方法：

a.客户端文本资源 minification。

比如 npm install –g minifier html-minify。
minify .css，.js。
htmlminify .html。

b.服务器开启压缩技术

c.优化图片 tinyPng

2.优化 css：

CSS shorthand properties not only are convenient, but also offer us a way to reduce the size of our style sheets by cutting down on excessive and verbose rules.

Using shallow CSS selectors can also significantly reduce the size of a style sheet, as well as make code more maintainable and modular.

Applying the DRY principle with the csscss redundancy checker can further winnow bloated CSS files by enabling you to remove superfluous properties.

避免使用@import。@import 会串行化资源请求。
尽量使用 <link>。可以并行化请求。 # 针对http1.x。

<head>里提前放置 css。
理由：
1) 防止flash of unstyled content 出现。
2) 减少 re-render and repaint the entire DOM.

使用性能更快的选择器。常见的 tag: div，descendant: div ul li ，class: .listitem，direct child: section > ul > li 性能都差不多，其他的 Sibling，Pseudo，Attribute 比较慢。

尽可能使用 flexbox 布局。

例如有 flexbox style：
        parent：> display: flex; justify-content: space-between; flex-flow: row, wrap;
        children: > flex-basis: 24.25%

比较 box model：
        parent: > display：block。
        children：> width: 24.25%;
        往往还会用到 :nth-child selector 调整尾端

The conclusion you can draw is that when it comes to rendering content, flexbox tends to be a better-performing solution. Better yet, it enjoys broad support without vendor-specific prefixes. When used with vendor prefixes, support only increases. If you’re not using flexbox on your websites, it’s rather trivial to retrofit in most cases.

3.images responsive:

Delivering responsive images in CSS with media queries, and how supplying the correct image sources to the proper devices can positively impact loading and processing time
Delivering responsive images in HTML by using the srcset attribute and the <picture> element
Providing polyfill support for the <picture> element and srcset attribute for older browsers in an optimal fashion
Using SVG images in both CSS and HTML, and the convenience and flexibility inherent to the format when it comes to optimal display on all devices

4.images else:

reduce size, compression or optimizing.
use webp.
lazy loading images.

5.fonts.

只选择需要 weight 字体
用 css @font-face 确定使用字体
使用 font-display 声明字体未加载时策略
使用 subset 减少字体文件大小

e.g.

@font-face{
    font-family: "Open Sans Light";
    font-weight: 300;
    font-style: normal;
    src: /*
         These local sources are commented out for debugging purposes.
         In any production site, they should be enabled.
         local("Open Sans Light"),
         local("OpenSans-Light"),
         */
         url("open-sans/OpenSans-Light-BasicLatin.woff2") format("woff2"),
         url("open-sans/OpenSans-Light-BasicLatin.woff") format("woff"),
         url("open-sans/OpenSans-Light-BasicLatin.eot") format("embedded-opentype"),
         url("open-sans/OpenSans-Light-BasicLatin.ttf") format("truetype");
         font-display: swap;     # local fallback
         unicode-range: U+0000-007F;    # subset
}

6.script

- Depending on its position, the <script> tag can block rendering, which delays the display of the page in the browser. Placing <script> tags toward the bottom of the document can speed up the rendering of a page.
- The async attribute can provide further performance benefits if you can manage the execution of scripts that use it.
- Managing the execution of interdependent scripts that use async can be challenging. A third-party script-loading library such as Alameda or RequireJS can provide a convenient interface for managing script dependencies, while also providing the benefit of asynchronous script loading and execution。

7.cache assets

使用 cache contorl：

no-cache、no-store、stale-witle-revalidate && max-age
对于各种资源的缓存策略举例：

使用 cdn 资源。举例：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

8.http2

Techniques that reduce the size of assets are things you should still do on HTTP/2. These are techniques such as minification, server compression, and image optimization. Reducing the size of an asset contributes to lower load times, always and forever.

Techniques that combine files are things you should stop doing on HTTP/2. Although useful in alleviating latency in HTTP/1 client/server interactions, requests are much cheaper in HTTP/2, and combining files can have an adverse effect on your caching effectiveness.

http2 不去捆绑资源主要是考虑缓存。在一个tcp连接之下，请求更颗粒化，多次请求，延迟不是问题。不过传递资源始终会经历延时，所以内敛化资源比如 css 还是有效。
server push 是个好特性，这篇文章包含 preload hint、server push 和 No optimization 的对比：
https://www.nginx.com/blog/nginx-1-13-9-http2-server-push/

使用 gulp 自动化以上任务。
https://github.com/pluckhuang/useGulp

月度归档： 2020年4月

web性能优化