关于web优化

Posted 2020-09-12 Web Snippets

我们所说的web，无非就是html，css(web font, image)，javascript。

 

HTML优化建议：

1. 尽量不要用table进行布局。

2. 尽量用最新的带有语义的h5标签，这样在解析跟渲染时更快。

3. 使用块传输数据，web服务器响应头设置：Transfer-Encoding: chunked

4. 预处理DNS，DNS缓存。可以通过link标签增加rel=“dns-prefetch”,如：<link rel="dns-prefetch" href="//google-analytics.com" >

5. html压缩：

　　a. 删除所有空白字符，包括spaces，tabs，newline等。

　　b. 删除简单值的引号。

　　c. 删除可选的关闭标签，如：</body>,</p>,</li>

　　d. 尽量使用短一点的id标识

 

CSS优化建议：

1. 用外部CSS文件。

2. 异步加载CSS,可以借助loadCSS，AsyncLoader等这些工具。或者动态创建link标签实现。

3. 压缩CSS文件，包括web字体的压缩。

4. 尽可能早的加载web字体，可以在html文件的style标签定义字体，如下：

<style>
    @font-face{
        font-family: my-font;
        src: url(my-font.woff); 
    }
</style>

5. 可以使用FontFace API动态加载字体。

 

JAVASCRIPT优化建议：

1. JS压缩。

2. 异步加载，可以借用requireJS，可以动态创建script标签。

3. <script>:js在加载时会阻塞其他资源的下载渲染；<script defer>:js在加载时不会阻塞其他资源的下载渲染，js加载完不会立即执行，而是等到所有其他资源下载完成js才会执行，适合js有其他依赖的情况；<script async>:js在加载时不会阻塞，js加载完会立即执行，执行的时候回阻塞。

4. DOMContentLoaded事件会在load事件之前触发。

 

IMAGE：

1. 给img标签设置宽度高度可以提升渲染性能，如：<img src="logo.png" width="300" height="100" alt="Logo">

2. 对于小图标可以使用data url方式内联加载。转换为base64后的字符大小一般会比图片本身大30%，但有web服务器一般启用gzip，gzip会压缩base64进行传输，所以结果反而甚至会小很多。

3. 选择正确的图片格式及图片压缩率，新的图片格式：jpeg-xr，webp，apng

4. 合并图片减少请求数，需考虑图片个数与合并后图片的大小平衡问题，一般不要超过10个图片的合并。

 

总结：

1. 服务器端支持http/1.1，支持压缩(gzip等)。

2. 尽量减少请求数量，实现资源共享。

3. 支持块传输，以便尽可能早解析html并发现内联的请求。

4. 支持DNS缓存，预查询DNS。

5. 尽可能减少CSS文件大小及个数（CSS压缩）

6. 使用新的高性能的js加载工具，如requirejs。

7. 优化图片的大小，减少网络占用。