12bet,的读书笔记

第四章 响应式网页设计

  • 媒体查询由一个媒体类型,零个或多个对某个特定媒体特征条件的查询表达式组成
  • 我们可以通过CSS调整图片大小。但用户不得不在移动设备上下载跟桌面浏览器上一样大小的图片
  • 一条移动端优化的宗旨:永远不要给你的用户发送任何一丁点非必要的数据
  • 可以在服务器端预先为没一张图片准备好不同尺寸的版本,然后根据用户设备发送响应版本的图片,具体做法是,在头部加入一个js文件来检测屏幕大小,然后根据屏幕大小去在head标签中插入base元素。但这种方法遇到不支持的浏览器时,会将两张图片都加载
  • 12bet,弹性栅格是由一定数量的列和列隙组成,理论上,页面的内容最好能在12个列宽内显示

第五章 理解页面重用机制

  • 12bet,需要将网站页面的内容抽象成组件,大量使用组件重用,提高开发效率
  • 12bet,在一个网页中,所有的东西从某种意义上说都可以被看做是“容器”,它们包含着其他一些子容器,同时也被父容器包含着,事实上,每个组件就是一个容器

第六章 页面模板

  • 12博体育,一些网站提供了结构良好的页面模板
  • 12博体育,可以通过条件注释的方式来解决IE浏览器兼容问题

    <!--[if lt IE 7]> <html class="ie6" lang="en"> <![endif]-->
    <!--[if IE 7]> <html class="ie7" lang="en"> <![endif]-->
    <!--[if IE 8]> <html class="ie8" lang="en"> <![endif]-->
    <!--[if IE 9]> <html class="ie9" lang="en"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
    

    这种方式通过IE特有的条件注释在html标签上加上了class,这样写css的时候就可以这么写了:

    .paddingDefinition {
      padding: 10px;
    }
    .ie7 .paddingDefinition {
      padding: 12px;
    }
    .ie8 .paddingDefinition {
      padding: 24px;
    }
    

    这种方式的好处是,可以通过一个css文件解决IE的兼容问题,而且不需要hack,也不需要为每个版本的IE准备特定的CSS样式文件,节省了HTTP请求

  • 需要在HTML文档第一个meta标记中确定字符集,如果浏览器不确定应该使用哪个字符集,会自行根据内置算法进行分析和嗅探,这必然有额外的开销,延迟页面的渲染,并且还可能留下让攻击者欺骗浏览器将页面编码识别为UTF-7从而加以利用的后门

  • IE8开始提供了兼容模式,使用兼容模式时,浏览器检测不到支持的内容时会进行降级处理,用低版本浏览器的渲染方式去渲染。我们开发的时候不应当依赖兼容模式,它不是百分百可靠,不能够完全替代在各种浏览器上进行兼容性测试的工作。所以一般都要关闭兼容模式,可以使用meta标签进行关闭:
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    这里X-UA-Compatible告诉IE(IE8+)将要设置兼容模式状态,而content中IE=edge表示,浏览器不要采用兼容模式,而总是采用最新版本的规则去渲染。content中的chrome=1告诉IE如果用户安装了Google Chrome Frame插件,就是用它通过Chrome内核的渲染方式进行渲染
  • Google Chrome Frame是一个IE上的插件,能够使用Chrome引擎的框架,甚至能让IE6支持HTML5,但并不是所有用户都安装了GCF
  • 使用viewport来适配移动端<meta name="viewport" content="width=device-width">
  • 与样式表文件大小增加而产生的额外开销比起来,减少HTTP请求数对性能的改善更为明显

第七章 导航

  • 分类要清晰,还需要让用户能够轻松地找到网站提供的各种内容。导航不要和内容去抢用户眼球

菜单结构

菜单结构应当有如下特点:

  • 有意义:看到源代码时,能够明白各个元素(容器和内容)之间的关系
  • 可读:没有乱七八糟或者使用晦涩的类名称
  • 易被屏幕阅读器追踪(或者忽略):有一个不会让视力受损用户浪费事件的菜单结构
  • 遵循渐进式设计目标:不会妨碍为各种浏览器提供尽可能好的展现

菜单结构有很多选择,无需列表最合适

后代节点选择器性能很差,因为CSS选择器引擎是从右往左解析的。含标识符的选择器性能会高很多,ID选择器性能最高,但比含标识符的选择器高的不多,但标识符可以重复使用。同时,后代选择器还会把CSS绑死到HTML代码上,而其他元素无法进行复用。所以应当使用含标识符的选择器而不是ID选择器,更不应该使用后代选择器。

给菜单添加样式

  • 试图让所有浏览器展示完全一样的效果是不对的。放弃对所有浏览器展示完全一样的效果换来了更高的开发效率,更少和更简单的代码,响应式设计选择,更快的页面加载(没有任何额外的HTTP请求)
  • 微软的filter性能很差,能不用就不用

base64编码

  • base64编码实际上就是将图片存储为一段字符的方法
  • 注意,HTML中添加base64编码图片,是不会被缓存的,但如果放在CSS中,会随着CSS文件一并缓存
  • 其获取与CSS文件或HTML文件一起,不需要一次HTTP请求,能获得一点性能提升
  • IE7-不支持base64编码图片

第八章 页头

  • 不要试图将所有东西(与核心内容无关的东西)都挤到页面头部,页头应该越简单越好
  • 在网页设计中,页头是放品牌Logo的地方,是用户对网站感官印象的起始点。页头通常还会包括一些重要的导航链接项
  • 对于品牌Logo,使用img而不用背景图更方便打印,浏览器不主动打印背景图,除非用户自己在打印选项里选择
  • 使用sprite减少HTTP请求数
  • 页头在每个页面都存在,性能不好的页头将是一个噩梦

第九章 页脚

  • 页脚通常用来放一些法律相关信息(版权信息和商标)和各个页面都有的公共内容
  • SVG基于XML语言,但IE9以下是不支持的。SVG允许制作可以缩放到任意尺寸的复杂图形。事实上,它只是描绘了各种图形和图形之间的关系。在SVG中,复杂的形状被渲染成一组简单形状的集合
  • 使用SVG能够减少HTTP请求,因为它包含在HTML代码中,同时SVG属于文本,能够享受GZIP带来的压缩效果。很多时候,同图片相比,使用SVG可以获得更好地性能
  • SVG能够通过JavaScript来提供交互

第十章 分型设计模式

可重用组件有如下好处:

  • 更快的开发页面
  • 更快的修复bug
  • 增强一致性
  • 更少的模式
  • 很高的接受度
  • 加强代码质量

后面所有

后面的不写了,不是我不愿记录了,而是后面都是一些组件编写,本质上都是从后台获取配置json然后拼接成HTML,同时大量的贴源码,意义并不是太大