devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端最全面试题_前端3年面试题

作者：小蓝xlanll | 2024-05-23 06:09:00

赞

踩

前端3年面试题

文章目录

前言：

今天给朋友们分享一到三年前端最全的面试题（其中包括HTML，CSS，JS，React，Vue，NodeJS，版本仓库的使用，互联网基础知识）。

一、选择工作时的注意事项

请看此链接：笔者个人选择工作的经验分享

二、面试流程，以及电话面试，HR面试的模拟问题以及面试礼仪

请看此链接：面试流程以及面试技巧全分析(不管你有几年经验看了以后都会提高你的面试成功几率)

三、HTML,CSS面试题：

1. 高频：

  1. 请讲一下HTML5的特点。
    答案：https://www.h5course.com/a/2015050292.html

  2. html5新特性：
    答案：https://www.w3cschool.cn/html5/html5-intro.html在这里插入图片描述

  3. 你知道的语义化的标签有哪些？
    答案：这个链接里不仅讲了几个常见的H5新的语义化元素，还在最下方介绍了如何使不兼容这些标签的浏览器还能够按照我们预期的样子进行展示【如果要看更多的语义化标签请自行百度】：https://www.runoob.com/html/html5-semantic-elements.html

  4. 为什么要使用HTML5的语义化标签？
    答案：去掉或样式丢失的时候能让页面保留基本样式呈现清晰的结构。利于SEO。减少团队差异化。

  5. CSS3新增了哪些特性？
    答案：CSS新特性详细讲解

  6. 请讲一下CSS3动画的优点。
    答案：代码比较简单，再就是性能好，浏览器会对其进行优化。

  7. 如何写宽高自适应的APP？
    答案：请访问：前端项目自适应屏幕的技巧

  8. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更高的体验。
    答案：使用精灵图，将小规格的图片整合为一张精灵图，减少浏览器请求次数。【http2.0可以不考虑此问题】
    使用图片懒加载：【笔者感觉这篇文章写的不错：】https://zhuanlan.zhihu.com/p/55311726

  9. 图片懒加载原理？
    答案：没有在展示区域的图片不给他设置src属性，即将展示那个图片的时候去设置它的src属性。

  10. CSS中可以通过哪些属性，使得一个DOM元素不显示在浏览器的可视范围内？
    答案：
    display: none;
    visibility: hidden;
    opacity: 0;
    还有其他的很多思路：
    比如使用定位移出可视界面外然后overflow:hidden起来。
    再比如translate改变XYZ轴位置隐藏等等。

  11. rgba()和opacity的透明效果有什么不同？
    答案：opacity透明子元素会跟着透明（继承），rgba()的透明子元素则不会继承。

  12. 请描述display:none；visibility:hidden；opacity:0;三者的区别；
    答案：在这里插入图片描述

  13. 你知道的css让元素垂直水平居中的方法有哪些？
    答案：请访问：元素垂直水平居中的方法

  14. 请讲一下盒模型。
    答案：css盒模型分俩种：IE盒子模型和标准盒子模型。
    在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
    IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

  15. BFC是什么？【个人感觉过时了，但是面字节被问到了】
    答案：BFC是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

  16. 你开发过程中遇到过最棘手的html与css问题是什么？
    参考答案：可随意举例：
    比如：做左侧sidebar导航，具体可看：左侧sidebar和整体分开滚动，并在X轴正常显示二级菜单
    比如：安卓和ios兼容问题

  17. HTML/CSS页面重绘与回流
    答案：https://www.cnblogs.com/leetom/archive/2011/01/20/2845920.html

2. 中频：

  1. grid布局有过了解么？
    答案：CSS新布局之display: grid;详细介绍
  2. img的alt与title有何异同？strong与em的异同？
    答案：
    alt：用来指定替换文字【图片加载失败展示】。
    title：用来提供建议性文字【移入显示】。
    strong：粗体强调标签。
    em：斜体强调标签。
  3. 请描述一下渐进增强与优雅降级。
    答案：渐进增强是向前【高版本浏览器】兼容。优雅降级是向后【低版本浏览器】兼容。
  4. CSS有哪些选择器？
    答案：最全CSS知识整理
  5. 行内元素和块级元素的区别是什么？行内元素的padding和margin可设置么？
    答案：
    块级元素总是独占一行。width，height，padding，margin都可以控制。
    行内元素和相邻的行内元素在同一行，width，height与padding-top,padding-bottom,还有margin-top,margin-bottom不可控制，其余可控制。
  6. 请讲一下px，em的区别。
    答案：px和em都是长度单位。但是px是固定的，指定多少就是多少。em是根据父级元素的大小变化的。
    拓展：浏览器默认字体大小是16px。所以未经调整的浏览器都符合：1em=16px这个计算规则。
  7. SASS和LESS是什么？为什么要使用它们？
    答案：CSS预处理器，通过编程的方式来开发CSS，可实现代码简写与复用等。
    使用它们是因为：结构清晰，便与拓展、
    减少无意义的机械劳动、
    可以轻松实现多重继承。
  8. 对WEB标准以及W3C的理解与认识。
    答案：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、能被更多的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
  9. css样式优先级算法如何计算？
    答案：!important > id > class > 标签
    !important比内联样式优先级高；
    优先级就近原则，样式定义最近者为准；
    以最后载入的样式为准；
  10. 实现： 左侧元素固定宽度， 右侧元素自适应【字节面试题】换个方式可以提左右宽度固定，中间自适应。
    答案：
    1、flex布局，左侧固定宽度，右侧主体flex: 1
    2、左侧固定宽度 + float，右侧主体 margin-left
    3、左侧固定宽度 + 绝对定位，右侧主体 margin
    4、左侧固定宽度，右侧calc计算
    5、左侧固定宽度 + float，右侧 overflow: auto
    6、左侧固定宽度 + float，右侧 display: flex

最终效果：在这里插入图片描述

  1. css中的z-index的权重问题请讲讲你所了解的一些规则。
    答案：css的z-index权重问题【最简洁，没有废话】

3. 低频：

  1. 每个HTML文件里面都有一个很重要的东西，Doctype，知道这是干什么的么？
    答案：<!DOCTYPE>声明位于文档中最前面的位置，处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。（重点：告诉浏览器按照何种规范解析页面）
  2. 请讲一下圣杯布局和双飞翼布局。
    圣杯布局与双飞翼布局都是双边固定宽度，中间自适应的布局。
  3. 如何更改input的样式？
    答案：请访问：更改input复选框、输入框以及上传文件的样式
  4. div+css的布局较table布局有什么优点？
    答案： 改版的时候更方便，只要改css文件。页面加载速度更快、结构化清晰、页面显示简介。表现与结构相分离。易于优化（seo）搜索引擎更友好，排名更容易靠前。
  5. 知道什么是微格式吗？谈谈理解。
    答案：微格式是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。
    优点：将智能数据添加到网页上，让网页内容在搜索引擎结果页面可以显示额外的提示。（应用范例：豆瓣）
  6. 超链接被访问过后hover样式就不出现的问题是什么？如何解决？
    答案：被点击访问过的超链接样式不在具有hover和active了，解决办法是改变css属性的排列顺序：L-V-H-A（link,visited,hover,active）。
  7. 如何垂直居中一个浮动元素？
    答案：用定位，计算top与left，可以用CSS的函数calc()计算。
  8. CSS的link和import的区别是什么？
    答案：百度很多，自己搜吧。
  9. 前端页面有哪三层构成？分别是什么？作用是什么？
    答案：结构层(HTML - - 设置页面的基本结构)、样式层(CSS - - 修改页面展示给用户的样式加一些小交互)、行为层(JS - - 使用户与页面完美交互)
  10. CSS选择符有哪些？块级元素有哪些？空元素有哪些？
    答案：最全CSS知识整理
  11. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS新增伪类有哪些？
    答案链接同上。
  12. 请说出position的属性值有哪些。每个值的特点作用。
    答案链接同上。
  13. display的属性值有哪些？可以做什么？
    答案链接同上。
  14. 哪些CSS属性可以继承？
    答案链接同上。
  15. 为什么利用多个域名来存储网站资源会更有效？
    答案：CDN缓存更方便；突破浏览器并发限制；节约cookie带宽；节约主域名的连接数，优化页面相应速度；防止不必要的安全问题；

四、JS基础题：

  1. JS的输出输入有哪些？
    答案：JS的输出与输入介绍
  2. JS的数据类型有哪些？
    答案：请访问：JS数据类型详解
  3. 如何判断JS变量的数据类型？
    1. typeof() 部分类型需要结合一下判断来使用，比如数组，正则，日期，null等等
      判断null：
      typeof xx === 'object' && !xx

      • 1
      判断数组：
      typeof xx === 'object' && Boolean(xx.forEach)

      • 1
      判断日期：
      typeof xx === 'object' && Boolean(xx.getDate)

      • 1
      其他类型类似上方的几个判断。
    2. instanceof
    3. constructor
    4. Object.prototype.toString
      关于最重要的Object.prototype.toString请观看：https://blog.csdn.net/weixin_43606158/article/details/93380867
  1. typeof求解的可能值有哪些？
    1. “number”
    2. “string”
    3. “boolean”
    4. “undefined”
    5. “object”
    6. “symbol”
    7. “function”
  2. 数据类型的自动转换和隐式转换你知道哪些？
    • 隐式类型转换：
      • 1 == '1'
      • '1' + 1
      • '1' - 1
    • 显示类型转换：
      • parseInt(str,radix)/parseFloat(str,radix)/Number()转变成数字。
      • Boolean(param)转变成布尔值
      • subString()转变成字符串

详细关于JS数据类型转换的内容请观看：一篇文章搞懂JS转换规则
6. “ == ” 和 “ === ” 还有 “ != ” 和 “ !== ”的区别？
答：“ == ” 和 “ != ”会做数据隐式类型转换，转换完数据类型在做比较。而“ === ” 和 “ !== ”会先判断数据类型，如果俩者的数据类型不一致直接返回false就不会再去做值的比较了。
7. 讲一讲“ || ” 和 “ && ”。
答案：请访问：彻底了解"||“和”&&"
8. “ i++ ” 和 “ ++i ”的区别。
答案：i++是先引用i的值而后将i递增1。
++i是先将i的值加1而后引用它的值。
9. break，renturn，continue三者的区别
答案：return、break与continue的区别
10. 请讲一讲递归。
函数自身调用自身。 详细请看：
①递归
②用递归实现遍历迭代
11. 请讲一下JavaScript的闭包。有什么特点？对页面有什么影响？
答案：JS闭包的理解
12. 你知道哪些算法？
答案：请访问：JS算法小总结
13. 你一般如何调试bug？
答案：请访问：前端调试bug的方法
14. 数组的常用API你知道哪些？
答案：请访问：数组的常用API详解
15. 请讲将数组与伪数组的区别。
答案：请访问：伪数组是什么？伪数组与数组的区别
16. 请讲讲你对面向对象编程的理解。
答案：请访问：面向对象编程(OOP)的概念
17. 请讲讲原型链。
答案：JS原型知识整理
18. 请讲讲继承的方法。
答案：JS继承的六种方法
19. 请讲讲JavaScript作用域。
答案：JS作用域与声名提升
20. 请讲讲变量的声明提升
答案：JS作用域与声名提升
21. 创建对象的方法有哪些？
答案：https://blog.csdn.net/weixin_43606158/article/details/94912023
22. 请讲讲ECMAScript的内置对象。
答案：https://blog.csdn.net/weixin_43606158/article/details/94912023
23. Array在ES5新增遍历的API它们每个的用法，返回值，参数。
答案：数组ES5新增遍历迭代的方法及其区别
24. ES5/ES6新增的哪些东西是你平时开发中常用到的？
答案：ES5/6新特性
25. 列举浏览器对象模型BOM里常用的至少四个对象，并列举window对象的常用方法至少五个。
答案：BOM内容的小整理
26. 请讲一下你知道的性能优化的方法。
答案：提高JS性能的12个技巧
27. 性能指标有哪些
28. 如何发现性能瓶颈
29. 性能调优的常见手段
30. 说说你在项目中如何进行性能优化
31. 事件绑定和普通事件有什么区别？
答案：事件绑定和普通事件的区别
32. IE和其他浏览器事件流的区别。
答案：IE浏览器是事件冒泡，其他浏览器是事件捕获（标准DOM事件流）。
33. IE的标准下有哪些兼容性的写法？
答案：javascript之IE兼容篇
34. 请讲一下this的指向问题。
答案：this的指向
35. 更改this指向的方法有哪些？
答案：更改this指向的方法及其区别
36. 请讲一下bind(),call(),apply()三者的区别。
答案链接同上
37. 手写call方法。
38. 事件委派/事件委托是什么？
答案：事件委派的使用及作用
39. 如何阻止事件冒泡和浏览器默认事件？
答案：浏览器事件默认行为介绍与阻止的方法
JS事件流介绍与阻止事件冒泡
40. 添加，删除，替换，插入到某个节点的方法。
DOM知识详细整理
41. document.load和jquery.ready的区别。
答案：加载页面之前的方法介绍
42. 请讲一下JavaScript的同源策略。
答案：JavaScript的同源策略
43. 请说出你知道的跨域的方法有哪些？最常用的是哪个？怎么使用的？
答案：前端跨域的六种解决方法
44. JavaScript是一门什么样的语言？它有哪些特点？
答案：弱类型语言，类型会做隐式转换，作用域，声名提升。。。
45. 正则表达式构造函数var reg = new RegExp(‘xxx’)与正则表达式字面量var reg = /xxx/有什么不同？
答案：当使用RegExp()构造函数的时候，不仅需要转义引号(即 \’ 表示 ’ )，并且还需要双反斜杠才能表示一个反斜杠。所以我们使用正则表达式字面量的效率更高。
46. JavaScript中callee和caller的作用？
答案：JavaScript中callee和caller的区别
47. 简述JavaScript的DOM里document获取节点的方法，并说出对应作用。
答案：DOM知识详细整理
48. 简述创建函数的几种方式。
答案：JS函数介绍
49. 把script标签放在body结束标签之前和结束标签之后有什么区别？浏览器会怎么解析它们？
答案：如果说放在body的封闭之前，将会阻塞其他资源的加载。如果放在body封闭标签之后，不会影响到body内元素的加载。
50. 请描述iframe的优缺点。
答案：Iframe介绍
51. 请谈谈cookie、localStorage和SessionStorage的区别和特点。
答案：客户端缓存的方法详细介绍
52. JS延迟加载的方式有哪些？
答案：1.script标签的defer和async属性。2.动态创建DOM方式（创建script，插入到DOM中，加载完毕之后callback）。3.按需异步载入js
53. 哪些操作会造成内存泄漏？
答案：内存泄漏指任何对象在您不再拥有或需要它的时候它仍然存在。
会引发内存泄露的情况：1.setTimeout的第一个参数使用字符串而非函数的话，会导致内存泄露。2.闭包。3.控制台日志。4.循环（在俩个对象彼此引用且彼此保留时，就会产生一个循环）。
54. 请说一下JavaScript中的垃圾回收机制。
答案：垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为0（没有其他对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的内存即可回收。
55. 在js中0.1+0.2等于多少？如何让它得到正确答案？
答案：等于0.30000000000000004。原因是因为浮点数运算中产生的误差。
最完善的解决方法：

不管是加减乘除都有这个问题，所以我们可以在传递一个额外的参数然后里面加一个switch判断使用什么计算，这样就是一个通用的计算器了。

function add(param1, param2) {
	return parseFloat((param1 + param2).toFixed(10));
}
add(0.1, 0.2);  // 0.3

  • 1
  • 2
  • 3
  • 4

在这里插入图片描述
关于浮点数加减乘除的问题解决方法请看：https://wudi98.blog.csdn.net/article/details/105530637
56. 你用过axios么？
答案：axios的使用
57. async，promise，settimeout的执行顺序
答案：一篇文章彻底搞懂异步，同步，setTimeout，Promise，async
58. 前端开发这么久了你知道哪些常用的网站？
答案：前端开发应知网站
59. 你写过哪些前端工具（功能）函数？
答案：前端开发常用功能函数总结
60. async/await 和 promise 的区别。
答案：
async/await 是建立在 Promise上的，不能被使用在普通回调以及节点回调
async/await 和 Promises 很像，不阻塞
async/await 代码看起来像同步代码。
Promise代码完全都是Promise的API（then、catch等等），操作本身的语义反而不容易看出来
61. 节流和防抖
答案：JS的节流和防抖实际应用
62. Event Loop，事件循环是什么？
答案:一篇文章彻底搞懂异步，同步，setTimeout，Promise，async【文章末尾做了event loop总结】
nodejs与普通js的Event Loop：https://juejin.im/post/5b8f76675188255c7c653811
63. 如何中断一个请求？
64. for(var i = 0; i <= 5; i++) {console.log(i)}的执行结果，for(var i = 0; i <= 5; i++) {setTimeout(() => {console.log(i)}, 1000)}的执行结果
答案：
普通的循环里面的输出0,1,2,3,4,5
在计时器里面的输出：6,6,6,6,6,6
因为计时器会把每一次执行的函数放到异步队列里面，等到时间到的时候去输出i的时候i已经执行到了6（退出循环时的值）的时候，所以在执行这些function的时候每次都是输出6了。

补充：如果想在计时器当中输出0~5的话，那就用let声明
因为for循环头部的let不仅将i绑定到for循环中，事实上它将其重新绑定到循环体的每一次迭代中，确保上一次迭代结束的值重新被赋值。setTimeout里面的function()属于一个新的域，通过var定义的变量是无法传入到这个函数执行域中的，通过使用let来声明块变量能作用于这个块，所以function就能使用i这个变量了。

  1. 设计模式你知道哪些？
    答案：前端开发的设计模式

五、React面试题：

由于内容过多，于是笔者单独整理了一篇文章，请点击链接： React一到三年面试题总结以及进阶题

dvajs：

  1. reducers与effects的区别：
    答案：reducers是处理同步的操作。effects是处理异步的。effects是generator函数。

六、Vue面试题整理：

由于内容过多，于是笔者单独整理了一篇文章，请点击链接： Vue一到三年面试题总结

七、NodeJS：

  1. 请讲讲NodeJS的优点和缺点，并说出你认为他适合什么开发场景？
    答案：因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求。此外，与Node代理服务器交互的客户端代码是由js编写的，客户端和服务端都用一种语言编写，这是非常美妙的事情。缺点：单进程，单线程，只支持单核CPU，不能充分的利用多核CPU服务器。一旦这个进程崩掉，那么整个web服务就崩掉了。
    适用场景：实时应用，如在线聊天，实时通知推送等等。分布式应用，通过高效的并且I/O使用已有的数据。工具类应用，海量的工具，小到前端压缩部署（如grunt），大到桌面图形界面应用程序。游戏类应用，游戏领域对实时和并发有很高的要求。利用稳定接口提升web渲染能力。前后端编程语言统一，前端人员可以非常快速的切入到服务端开发。（如著名的纯js全栈式MEAN架构。）
  2. 需求：实现一个页面操作不会整夜刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案。
    答案：至少给出思路（url-hash，可以使用已有的history.js之类的）
  3. 讲一讲route、middleware、cluster、nodemon、pm2、server-side rendering之类的。
  4. 什么是前端路由？什么时候适合使用前端路由？前端路由有哪些优点和缺点。
    答案：前端路由就是在不进行后端请求的情况下进行页面跳转。前端路由一般使用在单页应用。优点：用户体验好，不需要每次都从服务器获取，快速展现给用户。缺点：使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
  5. 项目用nodejs做中间件的好处：node做中间层的好处是什么？【笔者个人认为在大多数项目的情况下是弊大于利的】

八、Webpack:

  1. webpack原理，以及常用插件。
  2. webpack打包如何缓存，没更新的包如何让他不重新进行打包

九、版本仓库的使用：

  1. 你了解Git么？
    答案：Git版本仓库介绍
  2. 你了解SVN么？
    答案：SVN简介及使用方法
  3. Git的常用命令你知道哪些？
    答案：Git常用命令介绍
  4. Git你是怎么解决代码冲突的？
    答案：git解决代码冲突
  5. Git你是怎么回退版本的？
    答案：git回退版本
  6. 命令行的命令你知道哪些？
    答案：命令行常用命令

十、电脑相关知识【HTTP的也在这里】：

  1. HTTPS与HTTP的区别？
    答案：http和https的区别
  2. TCP/IP三次握手与四次挥手你了解过么？它的存在意义是什么？
    答案：一篇文章搞懂TCP/IP三次握手与四次挥手，用过手机的都能看懂
    意义：为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。
  3. 常见请求头与响应头你了解哪些？
    答案： 常见的请求头与响应头介绍
  4. 常见状态码及其代表的意义你知道哪些？
    答案：开发过程中常见状态码
  5. 实际开发移动端项目的过程中，你如何使用真机调试呢？
    答案：开发移动端项目在真机上面的调试方法
  6. 请讲讲长连接与短连接。
    答案：https://www.cnblogs.com/gotodsp/p/6366163.html
  7. 如何给网站做seo优化。
    答案：https://baike.baidu.com/item/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E7%AE%97%E6%B3%95
    除了上述描述的那些，其实最重要的是砸钱。。。
  8. 请讲讲浏览器渲染原理。
    答案：https://blog.fundebug.com/2019/01/03/understand-browser-rendering/
  9. HTTP协议中，GET和POST有什么区别？分别适用什么场景？
    答案：get传送的数据长度有限制，因为是放在url中传递参数，如果传递中文参数，需要自己进行编码操作，安全性较低。post是放在报文中，没有限制。【如果服务器做了限制另说，可更改】。
    适用场景：post一般用于数据提交。get一般用于简单的数据查询，严格要求不是那么高的场景。
  10. 一个页面从输入URL到页面加载显示完成，这个过程中都发生了什么？

答案：
1.用户输入
当用户输入关键字并按下回车之后，这意味着当前页面即将要被替换成新的页面，不过在这个流程继续之前，浏览器还给了当前页面一次执行beforeunload事件的机会，beforeunload事件允许页面在退出之前执行一些数据清理操作，还可以询问用户是否要离开当前页面。
2.url请求过程
首先会查找本地hosts文件看是否有缓存，如果没有那么浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。
浏览器与Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。
此时，Web服务器提供资源服务，客户端开始下载资源。
3.准备渲染阶段
默认情况下，chrome会为每个页面分配一个渲染进程，也就是说，每打开一个新页面就会配套创建一个新的渲染进程。
4.渲染阶段
文件解码成功后会开始渲染流程，先会根据HTML创建DOM树，有CSS的话会去构建CSSOM树。如果遇到script标签的话，会判断是否存在async或者defer，前者会并行进行下载并执行js，后者会先下载文件，然后等待HTML解析完成后顺序执行。
如果以上都没有，就会阻塞住流程直到js执行完毕。
CSSOM树和DOM树构建完成后会开始生产Render树，这一步就是确定页面元素的布局、样式等等诸多方面的东西。
在生成Render树的过程中，浏览器就开始调用GPU绘制，合成图层，将内容显示在屏幕上了。

  1. 为什么利用多个域名来存储网站资源会更有效？
    答案：确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他域名访问网站，并且不同的资源放到不同的服务器上有利于减轻单台服务器的压力。
  2. 线程与进程的区别。
    答案：一个程序最少有一个进程，一个进程最少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大的提高了程序的运行效率。
    线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
  3. 讲一讲强缓存和协议缓存？
  4. HTTP/2.0 都有哪些特性？头部压缩的原理？
  5. nginx了解么？你都用来做什么？
  6. 有了【Last-Modified，If-Modified-Since】为何还要有【ETag、If-None-Match】?
  7. CDN加速原理
    答案：CDN供应商会针对TCP等协议进行优化和调整，使正常的TCP三次握手减少到1次，从而减少计算机与计算机、路由之间的信息传递环节，从而达到加速目的

十一、安全方面相关：

  1. 服务端通信安全攻防
    a. HTTPS 原理剖析
    b. HTTPS 降级攻击
  2. 防范常见的web攻击：https://wudi98.blog.csdn.net/article/details/121410712

十二、拓展题：

  1. 前端开发规范了解过么？
    答案：前端开发规范
  2. web前端整体的性能考虑，你的优化思路是什么？
    答案举例：

【参考雅虎优化规则】

  • 减少http请求【精灵图，合理缓存，资源合并、压缩】，图片懒加载
  • 将外部js文件置底
  • 将css放在页面最上面
  • 避免在CSS中使用Expressions
  • 减少关键资源的个数和大小（webpack拆/合包，懒加载等）
  • 减少关键资源RTT【往返时延】的时间（Gzip压缩，边缘节点CDN）
  • JS代码不可占用主线程太久，与首屏无关的脚本加上延后处理（async/defer）属性，与无关的交给Web Worker。
  • CSS用对选择器（尽可能绑定Class或Id），否则会遍历多次。
  1. 移动端的点击事件有延迟，时间是多久？为什么会有这个延迟？
    答案：有300ms的延迟，为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。
  2. 平时如何管理你的项目，如何设计大规模并发架构？
    答案：先期团队必须确定好全局样式(global.css)，编码模式(utf-8)等等，编写习惯必须一致【确定好团队开发代码规范文档】。每个人负责的模块写好注释【模块功能，参数说明，编写时间，编写人】。文件做好分类处理。
  3. 谈谈你认为怎样做才能使项目做的更好。
    答案：考虑问题的深入，在开发时不能仅仅停留在完成任务上，要认真思考及时发现问题。要精益求精，对自己写的代码负责。
  4. 项目中遇到的难点，以及解决思路。
  5. 埋点数据上报的方案做过么？【统计用户的页面浏览时间，退出率，使用人数等等】
  6. 前端架构思考，你是如何考量部门的技术栈的？
  7. 前端重构思考，老项目在新业务紧急与重构技术债务间如何衡量轻重？

十三、TS面试题

  1. js项目如何升级为ts？有何影响？
  2. tslint都能配置哪些功能？对开发流程有何影响？
  3. ts 基础类型都哪些，他们跟js的区别
  4. ts为什么会流行？与ECMA新规范的关系？
  5. 如何理解接口，泛型?
  6. ts中type和interface的区别
    答案：ts中type和interface的区别

十四、工程相关

1. 需求分析

  1. 你如何对需求原型进行理解和拆分
  2. 说说你对功能性需求的理解
  3. 说说你对非功能性需求的理解
  4. 你针对产品提出哪些交互和改进意见
  5. 你如何理解用户痛点

2.设计能力

  1. 说说你在项目中使用过的UML 图
  2. 你如何考虑组件化
  3. 你如何考虑服务化
  4. 你如何进行领域建模
  5. 你如何划分领域边界
  6. 说说你项目中的领域建模
  7. 说说概要设计

3. 设计模式

  1. 你使用过哪些设计模式，请介绍一下分别使用场景以及它们自身
  2. 说说常用开源框架中设计模式使用分析
  3. 说说你对设计原则的理解23种设计模式的设计理念
  4. 设计模式之间的异同，例如策略模式与状态模式的区别
  5. 设计模式之间的结合，例如策略模式 + 简单工厂模式的实践
  6. 设计模式的性能，例如单例模式哪种性能更好。

4. 业务工程

  1. 你系统中的前后端分离是如何做的
  2. 说说你的开发流程
  3. 你和团队是如何沟通的
  4. 你如何进行代码评审
  5. 说说你对技术与业务的理解
  6. 说说你在项目中经常遇到的 Exception
  7. 说说你在项目中遇到感觉最难 Bug，怎么解决的
  8. 说说你在项目中遇到印象最深，最困难的地方，是怎么解决的
  9. 你觉得你们项目还有哪些不足的地方
  10. 你是否遇到过 CPU 100%，如何排查与解决
  11. 你是否遇到过 内存 OOM，如何排查与解决
  12. 说说你对敏捷开发的实践
  13. 说说你对开发运维的实践
  14. 介绍下工作中的一个对自己最有价值的项目，以及在这个过程中的角色

十五、软实力

  1. 说说你的亮点
  2. 说说你最近在看什么书
  3. 说说你觉得最有意义的技术书籍
  4. 工作之余做什么事情
  5. 说说个人发展方向方面的思考
  6. 说说你认为的服务端/前端开发工程师应该具备哪些能力
  7. 说说你认为的架构师是什么样的，架构师主要做什么
  8. 说说你所理解的技术专家

十六、前端三到五年进阶题：

请看：前端三年到五年面试题分享（实例）

持续更新中。。。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/611637
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号