前言
好记性不如烂笔头。
从事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![b3fd415bbbbee78f5d801403411355d6.png](https://i-blog.csdnimg.cn/blog_migrate/0bf0b265f7b7979114eb6b7ce983f9d2.jpeg)
- 网页宽度
电脑端网页(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![b4119ba428b4f915849e03048c3e5f0d.png](https://i-blog.csdnimg.cn/blog_migrate/38fcb1f36282660a9380a37f48006e2a.jpeg)
- 资源文件需要加版本号
解决缓存更新问题。
<!-- 版本号添加方式 -->
<!-- 方式一 -->
<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盒子模型的宽度指内容宽度,包含内边距与边框。
![59e63cc9cdeb519312f29a7e9477fe44.png](https://i-blog.csdnimg.cn/blog_migrate/7ef8dabab2eefff1da266ab9c82950e3.png)
时代变了,了解一下即可,不必过分深究,因为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属性)
回流必定触发重绘,而重绘不一定触发回流。