看了一本比较老的书 《大工不巧的 web 前端设计修炼之道 》，侧重说设计方面的内容，也包含很多实现方面需秉持的原则，还有 SEO 等内容.
看了另一个“入门级”的书 《JavaScript DOM 编程艺术》，内容不是很多，强调了关于 DOM 操作我们应该注意的一些事，重要的话反复提及，还附有例子和实现解释
算是零零碎碎的记录一些，罗列，没有细化。。
设计方面
设计简洁，操作方便
有效利用留白，突然重点..
内容、信息结构 “减肥”
37signal：“ 坚持做重要的事情，好的创意可以搁置一旁。留下你认为产品应该拥有的，然后砍去一半，把功能削减只剩下最重要的为止，如此循环。”
80% 的有用部分来自于 20% 的功能。强化 20% 的基本功能
User-Centered 以用户为中心
只出现用户关注的信息 （大数据时代）
关注的信息显示在醒目的位置
操作简便，尊重习惯
简单点，降低视觉噪声
用户特性：
> 喜欢扫描而不是浏览
重要信息放在醒目的位置
层次清晰，一目了然（去掉暗礁，明确可交互部分）
尊重习惯。避免重复造轮子（比如：购物车图标..）
> 喜欢尝试
响应要够快
容错性要够高
> 喜欢勉强应付
能用就行
当然对于掌握了方法的人，会有更好的体验
视觉配色 - 平衡网站色系
暖色系 红 橙 黄
冷色系 绿 蓝 紫
中性色系 黑 白 灰
流行配色：
> 单色系配色（同一色调） 稳重
> 相似色配色（相同色度，12色彩轮中的相邻几种颜色）
> 互补色配色（12色彩轮中相对的2中颜色） 动感
> 三色配色（12色彩环中 选择等边三角形三个顶点颜色）
代码实现
性能优化
最佳实践
结构 HTML | 表现 CSS | 行为 JS
分离 HTML CSS JS
合并脚本，压缩脚本，剔除重复，合理缓存 （80% 的时间在下载资源）
利用 sprite，而不是多张小图。但是合并图集不利于后期修改，所以合并那些比较稳定不会变的背景图
可访问性，可用性
无论用户是否健康，是否有部分身体缺陷都能正常地访问网站，理解网站的内容。比如视力受损可以让浏览器读出内容，没有鼠标可以通过键盘操作==..
两个具体的点
a 标签的 href 应该指向有效的地址，可以用 js 来特色的操作并阻止默认跳转
img 标签的 src 也最好指向有效的图片， alt 属性也很有必要
HTML
良好的标记就是一切
语义化，保证在没有 CSS 的情况下，也可以良好显示
可用性，保证在禁用 JS 的情况下，所有的链接可达
减少标签使用，避免过度使用 div span..
CSS
避免使用 CSS 表达式，避免使用滤镜
合并图集
JS
首先思考：增加的行为是否必要 ？避免滥用 JS
向后兼容（保证老版浏览器不会因为脚本而死掉，能力检测）
平稳退化（确保网页在没有 JS 的情况下也可正常工作，利于 SEO）
渐进增强，满足此原则的代码都支持平稳退化
减少访问 DOM
不要做太多假设（别假设浏览器拥有你希望它有的本事，能力检测）
分离脚本
JS 脚本放在末尾，加载 JS 脚本会停止页面的加载
简单的表单校验放在客户端，减轻服务端压力
DOM
重要的内容从一开始就应该包括在标记里（利于SEO），不应滥用 DOM 动态加载
那些只用来做交互的元素最好用 DOM 去创建，而不是加一些备用标签并隐藏他们（禁用 JS 时会显示出来这些无用信息）
Ajax
异步加载页面内容，实现局部更新
依赖 JS，所以可能会有浏览器不支持（禁用 JS 时）， 搜索引擎爬虫也不会抓取到有关内容
SEO
搜索引擎优化，以文本为基础的
应用程序对于 SEO 不是很敏感也不是很必须
vue 的设计是不利于 SEO 的，但通常也没有谁会用它来做门户网站。