面试总结（三）
1.语义化
HTML中不同的元素代表不同的含义，使用具有含义的元素来书写HTML文档，即是语义化。
选择合适的语义标签搭建的HTML文档，不仅便于开发着阅读、维护，也能让浏览器爬虫技术轻松解析。
可访问性、可检索性、国际化、复用性。
常见的h5语义化标签：https://blog.csdn.net/mafan121/article/details/80649634
注意事项：
- 尽量少使用div和span标签，如果语义不明显的时候尽量用p标签代替div。
- 尽量不要使用纯样式标签，如：
b、font、u等,使用css设置样式。也可用strong代替b，用em代替i - 不用用标签来代替样式实现，例如：
h1~h6 <figure>和<figcaption/>可用于给图片加图注效果。- 表格的每个部分都有明确的语义化标签，不可混淆。
- 表单内容应该包含在
<filedset/>分组中，并使用<lengend>定义表单分组下的标题。 - 表单元素应该和
<label>关联,明确表单元素的语义表示
2.浏览器对象
浏览器对象包括：Winodw、Navigator、Screen、History、Location。
Window:浏览器打开的窗口。Navigator:浏览器基本信息。Screen:浏览器显示屏幕的信息。History:用户访问过的URL历史记录Location:当前URL相关信息。
HTML DOM对象包括：Document、Element、Attribute、Event
Document:每个HTML文档都有Document对象，可以对页面元素进行访问。Element：HTML元素对象，代表一个元素节点。Attribute:表示HTML的属性。Event：表示HTML的事件。
JavaScript引用对像包含：Array、Date、Math、Regexp、Function
3.CSS3
- 过渡（
transition） - 动画（
animation） - 形态转换（
transform、transform-origin） - 阴影（
box-shadow） - 边框（
border-image、border-radius） - 背景（
background-clip、background-origin、background-size） - 滤镜（
filter） - 盒子模型（
box-sizing） - 媒体查询（
@media） - 栅格（
grid） - 弹性盒子（
flex） - 渐变（
-webkit-linear-gradient） - 颜色（
rgba、hsla） - 文字（
work-break、word-wrap、text-overflow、text-shadow） - 倒影（
-webkit-box-reflect）
可参考：https://juejin.im/post/5a0c184c51882531926e4294#heading-31
flex布局：https://blog.csdn.net/mafan121/article/details/78518793
4.ES6
箭头函数、Map/Set、let/const、字符串模板、类支持、默认参数、模块化、解构、循环、Promise、Symbol、对象扩展。
参考：https://blog.csdn.net/mafan121/article/details/59726295
5.call、apply、bind的区别
三者都是可以用来修改上下文的引用指针（this）。
call、apply立即执行，bind返回一个新的函数，且修改函数的内部this。
参考:https://blog.csdn.net/mafan121/article/details/52922149
6. 数组的常用方法
| 方法 | 描述 |
|---|---|
| concat() | 连接两个或更多的数组，并返回结果。 |
| join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
| pop() | 删除并返回数组的最后一个元素 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| reverse() | 颠倒数组中元素的顺序。 |
| shift() | 删除并返回数组的第一个元素 |
| slice() | 从某个已有的数组返回选定的元素 |
| sort() | 对数组的元素进行排序 |
| splice() | 删除元素，并向数组添加新元素。 |
| toSource() | 返回该对象的源代码。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| toLocaleString() | 把数组转换为本地数组，并返回结果。 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 |
| valueOf() | 返回数组对象的原始值 |
ES6相关方法：find、findIndex、filter、some、every、map、forEach、fill、includes、keys、values、entries、reduce、form、of。
参考：https://www.cnblogs.com/sqh17/p/8529401.html
7.js类型判断的方法
常用的js类型判断有4种方法：
-
typeof
数组和null判断不准确，都将返回object
-
instanceof
主要用于判断一个对象是否是某个引用类型的实例，无法判断基础类型，例如string、number
-
constructor
可以判断所有内型，但是如果对象的原型被修改了，那么将判断不准确。
-
Object.prototype.toString.call()
可以对所有的数据类型做判断，推荐使用
8.websocket协议
websocket是一个应用层协议，它必须依赖http协议进行一次握手，握手成功后数据即可从TCP通道传输。
websocket由HTTP握手+TCP双工连接组成。
轮询：客户端发送一次请求，服务端返回一次响应，连接中断。
长轮询：客户端发起一次请求，服务端服务挂起，当客户端再来请求，直接响应，连接不中断。
websocket：客户端发起一次请求，服务端建立连接，协议切换，此时服务端可主动向客户端推送消息，而长轮询不行。
参考：https://blog.csdn.net/mafan121/article/details/51067593
9.HTML页面优化
-
减少请求数量，合并请求
-
减小请求文件的体积大小
压缩css、js等资源文件
-
合理利用缓存
Cache-control、Expires、ETag、Last-Modified -
异步加载资源/预加载资源
可将js放在body中，避免加载阻塞。css放在head中避免页面变形。
对于图片可采用懒加载的方式，另外也可对图片进行合并处理做成雪碧图。
head中的代码都是同步加载，且
<Style>中的代码将阻塞页面渲染，所有应尽量少用style。 -
减少DNS查找，避免重定向
浏览器同域名下的最大连接数为4或6，如果资源分布在不同域名下，将增加dns的查找时间
10.页面渲染
-
浏览器将 HTML 解析成
DOM 树，当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。从上至下依次解析。 -
解析
DOM Tree的同时也会将CSS 解析成CSS Rule Tree。 -
当
DOM Tree和CSS Rule Tree都解析完成后，才会2者合并生成Render Tree。display:none 不会被挂载到 Render Tree 上面
-
计算出每个节点在屏幕中的位置,绘制页面。
注意：
-
默认情况下，css被视为阻塞渲染资源，遇到阻塞的Css时，将会延迟JavaScript的执行和页面渲染
-
<script>和<Style>都将阻塞DOM树构建，所以<script>的引用位置相当重要，一般放在body末尾加速dom解析。 -
我们可以使用
defer和async来改变script加载阻塞状态。defer：可视为将资源放在了页面底部。
async：当资源下载完成后立即执行，有可能会在
DOMContentLoaded前执行从而导致解析错误。
重绘和重排
-
重绘（repaint或redraw）：指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
触发重绘的条件：改变元素外观属性。如：color，background-color等。
-
重排（重构/回流/reflow）：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。
11. 清除浮动
为父级元素添加如下样式：
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 为兼容IE6,IE7，因为ie6,ie7不能用after伪类 */
.clearfix{
zoom:1;
}
BFC:块级格式化上下文。它是块级盒布局出现的区域，也是浮动层元素交互的区域。
能造成块级格式化上下文的方式有如下几种：
- 根元素或其它包含它的元素
- 浮动元素 (元素的 float 不是 none)
- 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
- 内联块 (元素具有 display: inline-block)
- 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
- 具有overflow 且值不是 visible 的块元素，
- display: flow-root
- column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
- 一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
bfc的作用：
- 使bfc内部元素不会到处跑，
- 和浮动元素产生边界
扫一扫
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
