「页面架构」页面优化

页面优化

页面优化可以提升页面的访问速度从而提高用户体验,优化的页面可以更好的提升 SEO 的效果同时也可以提高代码的可读性和维护性。

从下面的几个方面可以进行页面的优化:

  • 减少请求数
    • 图片合并
    • CSS 文件合并
    • 减少内联样式
    • 避免在 CSS 中使用 import
  • 减少文件大小
    • 选择适合的图片格式
    • 图片压缩
    • CSS 值缩写(Shorthand Property)
    • 文件压缩
  • 页面性能
    • 调整文件加载顺序
    • 减少标签数量
    • 调整选择器长度
    • 尽量使用 CSS 制作显示表现
  • 增强代码可读性与可维护性
    • 规范化
    • 语义化
    • 模块化

减少请求

请求数与网页加载时长有直接的关系。所以对于图标可以使用 Sprite 来减少小图标的请求数,对于文本则可以通过合并缩小。(避免使用 import 引入 CSS 文件,并且请求是同步请求)

减少文件大小

页面上最大的流量产生与多媒体(视频或图片)所以为了减少文件大小,开发者需要使用合适的媒体格式并对文件进行压缩。

页面性能

页面文件的加载顺序自上而下,样式则需要放置于最顶部,脚本则放置于底部(因为 JavaScript 的加载会阻塞页面的绘制)。

减少标签的数量也可以起到提升性能的作用,缩短 CSS 选择器的层级来提高性能。减少使用消耗性能的样式属性例如下面的这些:

  • expression .class{width: expression(this.width > 100?'100px':'auto')}
  • filter .class{filter:alpha(opacity=50)}
  • border-radius
  • box-shadow
  • gradients

页面中所使用的图片尺子应该与现实尺寸相符否则在图标下载后需要重绘导致性能下降。

能使用样式(使用 CSS 的类名)实现的交互就不使用脚本(需要重绘导致多次页面渲染)来实现。

可读性与可维护性

开发之前需要明确规范,尤其是对人协作时。使用 HTML5 语义化的标签来制作页面,同样也适用于样式选择器的 ID 与类名。在使用开发中的奇技淫巧的适合需要深思是否需要使用。模块化的制作页面和样式,提高可复用性并减少文件大小。

注释注释注释,在代码中添加注释,利人利己。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,816评论 1 45
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,794评论 25 709
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,020评论 3 119
  • nmcli 上篇已经介绍了创建网卡配置,网卡切换等 在CentOS7里面如何实现多网卡绑定 也可以修改文件,这里是...
    数据革命阅读 1,116评论 0 0
  • 生活中的我,往往喜欢循规蹈矩,按照一些不会出错,也已经形成习惯的方式做事情。一来安全,结果不会有太大偏差,二来也不...
    欢喜砣砣阅读 348评论 2 1