前言
好记性不如烂笔头。
从事Web前端这份工作也好几年了，以前去Web前端应聘岗位的时候，总是会问到一些我知识盲点，又或者是一些高频专业题目答不上来，导致我错失良机，无法进入心仪的企业工作。是的，记性不好，就要拿小本本记下来。
常识
- 主流浏览器内核
IE 浏览器（Trident 内核）
Microsoft Edge 浏览器（EdgeHTML 内核/ Blink 内核）
Firefox 浏览器（Gecko 内核）
Safari 浏览器（Webkit 内核）
Chrome 浏览器（Blink内核，WebKit内核中WebCore分支）
从2018年12月，Microsoft Edge已经开始改用Blink内核。
延伸：
浏览器如何运作
How browsers worktaligarsiel.com
- 网页宽度
电脑端网页（PC Web）
一般宽度在 950 - 1200px 之间。
移动端网页（mobile Web）
一般宽度以主流iphone屏幕的逻辑分辨率之间。
延伸：
iphone系列屏幕参数。
Viewport Size for iPhone / Device-width for Apple iPhones / CSS Media Queries for iPhone | YesVizyesviz.com现在知道为什么很多人都喜欢使用iphone的原因吧，移动端网页尺寸是以iphone屏幕尺寸设计的。
- 资源路径
"."--代表目前所在的目录。
".."--代表上一层目录。
"/"--代表根目录。
开发引用相对路径，生产发布引用绝对路径（确保路径指向资源的唯一性）。
- xhtml、html、html5区别
xhtml必须要小写。
xhtml必须要严格嵌套标签。
<b><i></i></b>xhtml必须要标签成对出现。
<b></b>xhtml必须要属性值加双引号。
<div class="title">This is a title</div>xhtml必须要区分结构标签与内容标签 。
<!-- 正确 -->
<table>
<tr>
<th>
<p>This is a title</p>
</th>
</tr>
</table>
<!-- 错误 -->
<p>
<table></table>
</p>html5规范元素标签，丰富新的元素标签（<header>、<footer>、<section>）。
html5支持音频和视频播放，无需依赖Flash插件。
html5微数据（标签itemscope、itemprop、itemref、itemtype、itemid属性）。
html5提供更丰富离线存储（Storage、IndexedDB、Web SQL）。
html5提供全双工通信（WebSocket）。
其实我们一般是使用xhtml规范，而不是html规范。
严格来讲，把html5翻译成h5，既不严谨又不规范的说法。是中国互联网媒体断章取义，认为用html5语言实现的移动营销网站称呼为h5网站，html5是一种文档标记语言，是一门技术名词。时至今日，已经成为移动营销网站代言词。
- html标签不区分大小写
<!-- 正确 -->
<div></div>
<!-- 正确 -->
<DIV></DIV>建议一律使用小写字母。主要方便阅读理解。
对于javascript的mvvm框架（vue，react，angularjs）组件标签，会采用大写母开头的标签。
- css文件放在头部，js文件在尾部
不一定，<script>标签可以通过 async与 defer 属性控制js文件加载顺序。
如果使用Webpack等打包工具构建的Web前端项目，无需手动添加这些属性。
延伸：
<script>developer.mozilla.org
- 资源文件需要加版本号
解决缓存更新问题。
<!-- 版本号添加方式 -->
<!-- 方式一 -->
<link rel="stylesheet" href="main.css?v=xxx">
<!-- 方式二 -->
<link rel="stylesheet" href="main.xxx.css">建议使用Webpack等打包工具生成版本号。
- 网页编码
一律采用utf-8编码方式。
<meta charset="UTF-8" />- 网页语言
需要国际化就设置lang属性，利于SEO优化。
<html lang="zh-CN">- 网页安全色
注意网页的安全色，避免超出安全色而导致在不同平台设备上页面色值出现偏差的问题。
延伸：
网页安全色参考
Web Safe Colors | HTML Color Codeswebsafecolors.info- IE浏览器与W3C标准的盒子模型区别
W3C盒子模型的宽度指内容宽度，不计内边距、外边距、边框。
IE盒子模型的宽度指内容宽度，包含内边距与边框。
时代变了，了解一下即可，不必过分深究，因为IE盒子模型的问题已经成为历史。
延伸：
旧版本浏览器css兼容问题。
Jeff Clayton's CSS Hack Test Pagebrowserstrangeness.github.iocss hack 不是W3C的规范，css hack是Jeff Clayton等人研究各种浏览器里面的源码得出来的一种兼容方案（补丁），请避免使用css hack。
旧版本浏览器css兼容处理方案集合。
https://github.com/logeshpaul/CSS-Hacksgithub.com- CommonJS、Promises/A、UMD、AMD与CMD规范
CommonJS
不局限于浏览器的js模块化规范，如：nodejs应用服务端。
Promises/A
异步编程模式的一个结果，指then方法返回成功或失败的结果规范。
let myPromise = new Promise(function(resolve, reject) {
// 处理异步方法
...
// 成功处理
resolve();
// 失败处理
reject();
});
// 等待执行完
myPromise.then(
function(value) {
// 成功回调处理
},
function(error) {
// 失败回调处理
}
);
UMD
通用模块定义，AMD与CommonJS结合，指前后端跨平台。
AMD
异步模块定义，指js模块提前加载，主要应用于前端。（预加载）
CMD
普通用模块定义，指js模块按需加载，主要应用于前端。（懒加载，国内seajs提出的一种规范，国外没有这种说法，简单理解为AMD的一种变种）
- DOM回流
DOM元素在页面的改变布局时触发浏览器的运算。
触发DOM回流的情况：
- 在页面中插入、删除或更新DOM元素。（appendChild, removeChild方法）
- 修改页面上的内容。（innerHTML方法）
- 移动DOM元素。（设置drag属性）
- 动画DOM元素。（css 动画效果）
- 测量元素的大小。（设置offsetHeight，scrollWidth属性值，getComputedStyle方法）
- 更改元素的类名。
- 添加或删除样式表 （add与remove方法）
- 调整窗口的大小 （resize方法）
- 滚动页面（scroll方法 ）
- DOM重绘
DOM元素在页面不改变布局的情况下，出现不一样的现象。
触发DOM重绘的情况：
1.修改DOM元素显现。（设置outline, visibility, background属性）
回流必定触发重绘，而重绘不一定触发回流。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
