ESLint

所有的配置规则都是写在 rules 对象里面的 key表示规则的名称 value表示表示规则的配置；extends是EsLint默认推荐的验证，你可以使用配置选择哪些校验是你所需要的，可以登录npmjs.com查看

env 可以预设好的其他环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等

  "env": {
        "browser": true
    },
    "extends": "eslint:recommended",
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

rules 就是自定义的规则，每条规则有3个等级：off或 0、warn或 1 和error 或 2。off表示禁用这条规则，warn表示仅给出警告，并不会导致检查不通过，而error则会导致检查不通过。

背景图不清晰

devicePixRatio，Android 和 iPhone 中，都有一个占整个屏幕大小的换算单位，Android 中叫 dip （device independent pixels，设备独立像素），iPhone 中叫 point。设备的物理像素和 dip 的比例就是 devicePixelRatio，可以通过 window.devicePixelRatio 属性获取。

如果div是100100的大小，就将图片大小设置为200200，background-size：cover
原理：首先，像素分为物理像素和逻辑像素。物理像素是不会变的，每个设备是固定的，逻辑像素是在CSS和javascript中使用的一个抽象的层。我们在设置css的样式时都是设置的逻辑像素。在pc端，一逻辑像素的占位就等于一物理像素的占位。但是在移动端，由于屏幕尺寸的限制存在缩放的问题。但是不论是放大还是缩小，我们设置的css像素不会变，但是一个css像素对应多少物理像素是由当前的缩放比例决定的。
DPR = 设备像素 / CSS像素
比如爱疯5，css像素是320568，DPR=2，所以其物理像素=6401136，大部分的手机DPR都是2，部分安卓手机是1.5，所以我们在设置背景图的时候将本来的大小各缩小一半，在手机上就能达到效果，并且大小刚好，也不会模糊。

事件冒泡机制

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
捕获型事件：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
支持W3C标准的浏览器在添加事件时用 addEventListener(event,fn,useCapture) 方法，基中第3个参数 useCapture 是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用 attachEvent() 方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于 false 的时候执行，所以把在处理事件时把 useCapture 设置为 false 是比较安全，也实现兼容浏览器的效果。

document.onload 和 document.ready 的区别。

页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。

dangerouslySetInnerHTML

getInitialState: function() {
  return {html: '我想让它换行显示
,我想让它换行显示
'};
}

这段代码放在正常的html 页面中，它是会还行的，在React中则不会，因为react不会自动帮你解析代码，显示出来的结果还是：我想让它换行显示
,我想让它换行显示

原因：不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。净化用户的输入来显示的时候，经常会出现错误，不合适的净化也是导致网页攻击的原因之一。我们的设计哲学是让确保安全应该是简单的，开发者在执行“不安全”的操作的时候应该清楚地知道他们自己的意图。dangerouslySetInnerHTML 这个 prop 的命名是故意这么设计的，以此来警告，它的 prop 值（一个对象而不是字符串）应该被用来表明净化后的数据。这么做的意义在于，{__html:...} 背后的目的是表明它会被当成 "type/taint" 类型处理。这种包裹对象，可以通过方法调用返回净化后的数据，随后这种标记过的数据可以（注意_html是两个）被传递给 dangerouslySetInnerHTML。这个功能主要被用来与 DOM 字符串操作类库一起使用，所以提供的 HTML 必须要格式清晰（例如：传递 XML 校验）

说说你对语义化的理解？

1.去掉或样式丢失的时候能让页面呈现清晰的结构：html本身是没有表现的，我们看到例如

是粗体，字体大小2em，加粗；是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。
3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）。
4.有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。
5.便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

零碎的知识点