页面优化

  1. 为什么要进行页面优化?
    • 三个原因:
      1. 对于用户而言,进行页面优化可以提升网页响应速度,改善用户体验
      2. 对于浏览器而言,对搜索引擎友好(SEO)
      3. 对于开发人员而言,进行页面优化可以提高代码的可读性、可维护性
  2. 页面优化包括哪些方面?
    1. 减少页面请求
    2. 减少文件大小  
  3. 如何进行页面优化?
    1. 如何减少页面请求?
      1. 合并图片:使用CSS sprites(CSS 精灵)技术,将多张图片整合到一张图片中,即将多个请求变为一个请求,再利用CSS(的background-image、background-repeat、background-position的组合)进行背景定位:
      2. 合并CSS文件:
        • 多个CSS文件合并为一个
        • 少量CSS样式内联
        • 避免使用import的方式引入CSS文件:每个import语句都会产生一个请求   
    2. 如何减少文件大小?
      1. 减小图片大小
        1. 选择合适的图片格式
          • 如果需要半透明的图片,如一些小图标,那就选择.png图片
          • 如果图片色彩绚丽、尺寸大,就选择.jpg图片(.jpg图片会对图片进行压缩)
        2. 压缩图片:使用图片压缩工具(ImageOption、...)对图片进行无损或有损压缩
      2. 减小CSS文件大小
        1. css值缩写:margin、padding、border、boredr-radius、font、background
        2. 省略值为0的单位
        3. 颜色值最短表示
        4. css选择器合并
        5. 使用工具(cssmin、...)压缩文件    
  4. 如何优化页面性能?
    1. 合理的页面加载顺序
      1. 建议将CSS文件放在<head>中,这样解析html时会先解析CSS,再解析标签时就可以把样式直接应用在标签上,这样用户会看到顺畅的页面。
      2. 建议将js文件放在body的底部,因为js的加载和执行会阻塞其他资源的加载、页面的渲染,而且js的很多处理逻辑也需要等到页面加载完成才去处理。  
    2. 减少标签数量:没用作用的标签不要写,比如不要随意加<div>
    3. 选择器长度要尽量短:选择器很长时一方面会影响到CSS查找元素的性能,另一方面也会使文件变大。
    4. 避免使用耗性能属性:expression、和效果相关的一些属性(border-radius、box-shadow、gradients、filter)。
    5. 给图片设置宽高:一定要设置宽高,而且宽高要正好,否则会引起页面的回流和重绘,重新渲染图片会耗损很多时间。如需要一个400*300的图片,就不要不设置图片宽高,也不要在<img>中设置图片大小为800*600(导致图片缩放),因为浏览器在解析html代码时,有可能在图片下载完成前就会对页面布局进行定位,如果没有给图片设置宽高或者设置的宽高不一样时,那么浏览器在图片下载完成时就需要回流和重绘。
    6. 所有表现用CSS实现,不要使用js(因为js每次都要重绘列表,通过css可以把多次渲染变成一次渲染)  
  5. 如何提高代码的可读性、可维护性?
    1. 制定规范,不同的开发人员按照统一的规范编写代码
    2. 使用语义化的标签,标识、变量的命名做到见名知意
    3. 添加注释
    4. 模块化开发
    5. 尽量避免使用Hack(为了兼容不同浏览器,需要Hack一些代码)。如果有其他方法可以避免Hack,优先选择其他方法;如果没有,或避免的代价比较大(需要写大量html、css),则用Hack。使用Hack时要尽量使用统一的语法,如Hack IE7用*,Hack IE6用_
      • 什么是CSS Hack?   指针对不同的浏览器写不同的CSS  

posted on 2017-02-23 11:04  萌动  阅读(89)  评论(0编辑  收藏  举报