网站前端优化 -saveForSelf

9、网站前端优化 – IMG

9.一、能够优化的图片

     图片总共能够分为两类，一个是CSS IMAGES，另外一个是产品图片。

9.二、CSS IMAGES

     CSS图片如今采用的方式是图片合并的方式，这样能够减小HTTP请求；初期的规划是网站最通用的图片合并到一张图片上，具体某张页面本身用到的，针对每张页面再合并一张图片，即一张页面除去插件里面带过来的背景图片外，最理想的状况是保留两张背景图。可是如今状况很不如意，主要缘由有如下几点：

1. 页面改动太频繁，不少原先合并好的图片一改再改后，会保留不少副本
2. 如今CSS的模块化，CSS模块化后，一张新的页面有原先定义好的样式后，咱们就会直接引用，这样的话就不会关系具体他的CSSIMAGES；若是不一样的模块来自不一样的页面，那么机会致使页面的背景图过多而且过大。

9.三、产品图片

     产品图有两种呈现方式，一个就是单独展现在页面中的，这样的图片处理方式是异步，就用lazyload，这个的处理方式相对简单。

     另一张是幻灯片，这种图片用lazyload不能达到异步的效果，由于幻灯片咱们首次只会看到第一张图片，这样的话就得要改幻灯片，这个根据不一样的幻灯而定吧。

10、网站前端优化 – DOM

10.一、DOM优化方法

目前对DOM优化采用的方法是不渲染，即将对SEO不重要的内容用textarea或者script包裹，这样的话他们在渲染时就会被当作字符串而不会解析成节点。

11、网站前端优化 – JS

JS是除图片外，对前端性能影响最大的一个方面，也是最难优化的。整体来讲，JS对性能有影响体如今两个阶段，一个是JS的下载阶段，一个是执行阶段。

JS同步时，下载和执行阶段解析器都会暂停，等待JS下载和执行；而jS异步时，JS下载不会暂停解析器，所以不会阻塞页面，可是执行时，仍然会暂停解析器。因此，对JS处理方式通常是异步而且放在页面底部。这样能够对页面的影响降到最小。

JS另外一个难点就是页面中的JS代码的逻辑处理，能够用dynaTrace AJAX跟踪查看。

12、网站前端优化 – 重绘&回流

    当呈现树中的一部分(或所有)由于元素的规模尺寸，布局，隐藏等改变而须要从新构建。这就称为回流(其实我以为叫从新布局更简单明了些)。每一个页面至少须要一次回流，就是在页面第一次加载的时候。

当呈现树中的一些元素须要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，好比background-color。则就叫称为重绘。

这块内容是和浏览器渲染方式息息相关的，有兴趣的童靴能够在网站多找些资料；这里只介绍些平时咱们可能使用的一些会形成重绘&回流的方法，及改进意见

1. 不要1个1个改变元素的样式属性，最好直接改变className，但className是预先定义好的样式，不是动态的，若是你要动态改变一些样式，则使用cssText来改变
2. 让要操做的元素进行"离线处理"，处理完后一块儿更新，这里所谓的"离线处理"即让元素不存在呈现树中
3. 不要常常访问会引发浏览器flush队列的属性，若是你确实要访问，就先读取到变量中进行缓存，之后用的时候直接读取变量就能够了
4. 考虑你的操做会影响到呈现树中的多少节点以及影响的方式，影响越多，花费确定就越多