您的位置: 首页  >  文章  >  面试集锦（三）

面试集锦（三）

分类: 文章 • 2025-03-16 15:49:45

面试总结（三）

1.语义化

HTML中不同的元素代表不同的含义，使用具有含义的元素来书写HTML文档，即是语义化。

选择合适的语义标签搭建的HTML文档，不仅便于开发着阅读、维护，也能让浏览器爬虫技术轻松解析。

可访问性、可检索性、国际化、复用性。

面试集锦（三）

常见的h5语义化标签：https://blog.****.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

  1. 过渡（transition）
  2. 动画（animation）
  3. 形态转换（transform、transform-origin）
  4. 阴影（box-shadow）
  5. 边框（border-image、border-radius）
  6. 背景（background-clip、background-origin、background-size）
  7. 滤镜（filter）
  8. 盒子模型（box-sizing）
  9. 媒体查询（@media）
  10. 栅格（grid）
  11. 弹性盒子（flex）
  12. 渐变（-webkit-linear-gradient）
  13. 颜色（rgba、hsla）
  14. 文字（work-break、word-wrap、text-overflow、text-shadow）
  15. 倒影（-webkit-box-reflect）

可参考：https://juejin.im/post/5a0c184c51882531926e4294#heading-31

flex布局：https://blog.****.net/mafan121/article/details/78518793

4.ES6

箭头函数、Map/Set、let/const、字符串模板、类支持、默认参数、模块化、解构、循环、Promise、Symbol、对象扩展。

参考：https://blog.****.net/mafan121/article/details/59726295

5.call、apply、bind的区别

三者都是可以用来修改上下文的引用指针（this）。

call、apply立即执行，bind返回一个新的函数，且修改函数的内部this。

参考:https://blog.****.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.****.net/mafan121/article/details/51067593

9.HTML页面优化

  • 减少请求数量，合并请求

  • 减小请求文件的体积大小

    压缩css、js等资源文件

  • 合理利用缓存

    Cache-control、Expires、ETag、Last-Modified

  • 异步加载资源/预加载资源

    可将js放在body中，避免加载阻塞。css放在head中避免页面变形。

    对于图片可采用懒加载的方式，另外也可对图片进行合并处理做成雪碧图。

    head中的代码都是同步加载，且

10.页面渲染

面试集锦（三）

  1. 浏览器将 HTML 解析成DOM 树，当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。从上至下依次解析。

  2. 解析DOM Tree的同时也会将CSS 解析成CSS Rule Tree。

  3. 当DOM Tree和CSS Rule Tree都解析完成后，才会2者合并生成Render Tree。

    display:none 不会被挂载到 Render Tree 上面

  4. 计算出每个节点在屏幕中的位置,绘制页面。

注意：

  • 默认情况下，css被视为阻塞渲染资源，遇到阻塞的Css时，将会延迟JavaScript的执行和页面渲染

  • <script>和<Style>都将阻塞DOM树构建，所以<script>的引用位置相当重要，一般放在body末尾加速dom解析。

  • 我们可以使用defer和async来改变script加载阻塞状态。

    defer：可视为将资源放在了页面底部。

    async：当资源下载完成后立即执行，有可能会在DOMContentLoaded前执行从而导致解析错误。

相关推荐