Maison > interface Web > tutoriel HTML > 如何进行页面优化?_html/css_WEB-ITnose

如何进行页面优化?_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:17:30
original
1029 Les gens l'ont consulté

为什么要进行页面优化?

  1. 更快:页面加载更快,客户感知更快;

  2. 更易于阅读:易于搜索引擎抓页面重点,易于盲人阅读;

  3. 更易于维护:易于自己和同事后期读懂、定位、修改和扩展代码.

如何进行页面优化

html

  • 语义化

  • 加载顺序:css放head里面(用户看到顺畅页面),js放尾部(会阻塞dom渲染,且dom树没搭建好时,js里面的dom操作会有问题)

  • 减少页面请求:合并img,合并css,避免使用@import方式引入css文件

  • 减少文件大小:

    • 主要减少img文件大小,选用合适的格式并且用工具进行压缩(ImageOptim,ImageAlpha,JPEGmini)

    • 删除不必要的标签

css

  • 选择器:越简单越短越好,同样的样式进行选择器合并

  • css值缩写:margin等,值为0的省略单位,

  • 减少文件大小:YUI Compressor,cssmin

  • 少用耗性能的属性:expresion,border-radius,filter,box-shadow,gradients等

  • 图片设置宽高,不要缩放,减少浏览器的回流和重绘。

  • 所有表现用css实现

  • 模块化

  • 命名规范、语义化

  • 尽量减少hack

javascript

  • 页面懒加载

  • 少用dom操作

加注释

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal