关于web优化

Posted Web Snippets

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于web优化相关的知识,希望对你有一定的参考价值。

我们所说的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. 优化图片的大小,减少网络占用。

以上是关于关于web优化的主要内容,如果未能解决你的问题,请参考以下文章

使用 C++ 反转句子中的每个单词需要对我的代码片段进行代码优化

如何优化C ++代码的以下片段 - 卷中的零交叉

关于react16.4

从JVM的角度看JAVA代码--代码优化

技能篇—web性能优化

关于代码片段的时间复杂度