网站前端优化 -saveForSelf

时间：2021-12-12 09:21:53

九、网站前端优化 – IMG

9.1、可以优化的图片

图片总共可以分为两类，一个是CSS IMAGES，另一个是产品图片。

9.2、CSS IMAGES

CSS图片现在采用的方式是图片合并的方式，这样可以减少HTTP请求；初期的规划是网站最通用的图片合并到一张图片上，具体某张页面自己用到的，针对每张页面再合并一张图片，即一张页面除去插件里面带过来的背景图片外，最理想的情况是保留两张背景图。但是现在情况很不如意，主要原因有以下几点：

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

9.3、产品图片

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

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

十、网站前端优化 – DOM

10.1、DOM优化方法

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

十一、网站前端优化 – JS

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

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

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

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

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

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

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

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

相关文章