4.4.1.1页面优化

为什么要优化?

·提升网页响应速度

·对搜索引擎、屏幕阅读器友好

·提高可读性,可维护性

如何优化?

·减少请求

·图片合并

·减少CSS文件请求

·多个css文件合并为一个

·少量css样式内联

·避免使用import的方式引入css文件


·减少文件大小

·减少图片大小

·选择合适的图片格式

-png

-JPG

·压缩图片

-ImageOptim

-ImageAlpha

-JPEGmini

·css值缩写

margin

padding

border

border-radius

font

background

·省略值为0的单位

·颜色值最短表示

·red

·rgb(255,255,0)

·rgba(0,0,0,0.5)

·#333

·CSS选择器合并

·文件压缩

·YUI Compressor

·cssmin


·页面性能

·加载顺序

·css文件放在<head>标签内

·JavaScript文件放在页面底部</body>前

·减少标签数量

·选择器长度

·耗性能属性

·expression

·filter

·border-radius

·box-shadow

·gradients

·图片设置宽高

·所有表现用CSS实现


·可读性,可维护性

·规范

·语义化

·尽量避免Hack

·模块化

·注释

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,627评论 32 459
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,576评论 1 19
  • S小姐认识B先生两年多 B是S学生会的学长 B带了S两年 在B眼里S一直是傻傻的那个什么都不懂的像小孩纸一样的笨蛋...
    Lavenderv阅读 579评论 0 0
  • 记忆,好像一幅会呼吸的画景 看着过去 一点一滴的上演 却又好像隔了一层薄膜 碰着--就会破碎 仿佛我缅...
    老周家小周阅读 338评论 0 3