关于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. 优化图片的大小，减小网络占用。