2024年Web前端性能优化(2)，12个View绘制流程高频面试题

最新推荐文章于 2026-06-28 21:24:42 发布

原创最新推荐文章于 2026-06-28 21:24:42 发布 · 869 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

程序员

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

HTML5有哪些新特性？
Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?
如何实现浏览器内多个标签页之间的通信？
⾏内元素有哪些？块级元素有哪些？空(void)元素有那些？⾏内元素和块级元素有什么区别？
简述⼀下src与href的区别？
cookies,sessionStorage,localStorage 的区别？
HTML5 的离线储存的使用和原理？
怎样处理移动端 1px 被渲染成 2px 问题？
iframe 的优缺点？
Canvas 和 SVG 图形的区别是什么？

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

问：0.1 + 0.2 === 0.3 嘛？为什么？
JS 数据类型
写代码：实现函数能够深度克隆基本类型
事件流
事件是如何实现的？
new 一个函数发生了什么
什么是作用域？
JS 隐式转换，显示转换
了解 this 嘛，bind，call，apply 具体指什么
手写 bind、apply、call
setTimeout(fn, 0)多久才执行，Event Loop
手写题：Promise 原理
说一下原型链和原型链的继承吧
数组能够调用的函数有那些？
PWA使用过吗？serviceWorker的使用原理是啥？
ES6 之前使用 prototype 实现继承
箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？
事件循环机制（Event Loop）

一名专业的前端开发也是一名优秀的重构，因为在页面中经常会有各种不合理的嵌套和重复定义的CSS样式，我不是要你重构页面，只是希望你在碰到这种情况的时候解决这些问题。如这样的HTML： 1

3 … 4

或者这样的CSS:

body .box .border ul li p strong span{color:#000}

以上都是对HTML和CSS非常糟糕的使用方法。正确理解：

HTML是一门标记语言，使用合理的HTML标签前你必须了解其属性，比如Flow Elements，Metadata Elements ，Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。

CSS是用来渲染页面的，也是存在渲染效率的问题。CSS选择符是从右向左进行匹配的，这里对css选择符按照开销从小到大的顺序梳理一下：

ID选择符 #box

类选择符 .box

标签 div

伪类和伪元素 a:hover

当页面被触发引起回流（reflow）的时候，低效的选择符依然会引发更高的开销，所以请避免低效。

使用CDN加速（内容分发网络）

基本原理：

CDN的全称是Content Delivery Network，即内容分发网络。

“其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。” - 百度百科。

上面几句话有多少能安安心心看完的，所以我还是通过说故事再来介绍一遍吧，顺便补一句，故事出处不明，^_：

古代打仗大家一定都知道，由于古代的交通很不发达，所以当外族进攻的时候往往不能及时的反击，等朝廷征完兵再把兵派往边境的时候那些侵略者却是早已不见了踪影，这个让古代的帝王很是郁闷。后来帝王们学聪明了，都将大量的兵员提前派往边境驻扎，让他们平时屯田，战时当兵，这样的策略起到了很显著的作用。不足之处：

实时性不太好是CDN的致命缺陷。随着对CDN需求的逐渐升温，这一缺陷将得到改进，使来自于远程服务器的网络内容网页与复本服务器或缓存器中的网页保持同步。解决方法是在网络内容发生变化时将新的网络内容从服务器端直接传送到缓存器，或者当对网络内容的访问增加时将数据源服务器的网络内容尽可能实时地复制到缓存服务器。

将CSS和JS放到外部文件中引用，CSS放头，JS放尾基本原理：

注：这个是很基础且必须遵循的知识点，可是为了文章的完整性勉为其难加进来吧，嘿嘿。

引入外部文件好处是显而易见的，而且是项目稍稍复杂一点的时候就有必要了这样做了。

易维护、易扩展，方便管理和重复利用。正确的方式：

JavaScript是浏览器中的霸主，为什么这么说，因为在浏览器在执行JavaScript代码时，不能同时做其它事情，即每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的还是外链的），JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。

因为这个阻塞的特点，建议把JavaScript代码放到标签以前，这样既能有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放。

HTML规范清楚指出CSS要放包含在页面的区域内，这里就不多解释了。

精简CSS和JS文件基本原理：

有一条非常重要的准则一直没有提到，就是CSS和JavaScript的压缩，直接减少下载的文件体积。我个人经常使用的方式是使用 YUI Compressor，它的特点是：移除注释；移除额外的空格；细微优化；标识符替换。

YUI Compressor是java程序，如果你对java很熟悉的话可快速的上手使用yuicompressor.jar；如果你对java很陌生也没关系，一样可以使用YUI Compressor，下面介绍其使用方式。 YUI Compressor的配置和使用：

先配置使用环境：

1.先确保电脑中是否安装了JDK

2.再配置必要的环境变量(细节不能三两句说清，所以不知道如何设置还是搜索吧)

3.在cmd界面，输入javac可测试是否安装成功

使用方法可从cmd到进入yuicompressor.jar所在磁盘，我以自己的yuicompressor-2.4.2.jar为例：

1.压缩JS

java -jar yuicompressor-2.4.2.jar api.js > api.min.js

2.压缩CSS

java -jar yuicompressor-2.4.2.jar style.css > style.min.css

Web前端性能优化

当然，还有另一种更傻瓜式的使用方式，赶兴趣的朋友自己可去多尝试下。

压缩图片和使用图片Sprite技术

基本原理:

注：其实压缩图片和图片精灵是两个方面的技术，可是既然都是关于图片的优化还是放到一块吧。

现在由于工作的细分，专业的前端工程师已经少有机会去切图了，可是关于图片压缩还是得略微了解，一般图片压缩的方式有：

1.缩小图片分辨率；

2.改变图片格式；

3.降低图片保存质量。

关于图片精灵(Sprite)技术就和我们工作直接相关，不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求，前端优化的第一条就是减少请求数，最直接有效的方法是使用图片精灵（CSS Sprite）。图片精灵就是把许多图片放到一张大图片里面，通过CSS来显示图片的一部分。

至于图片精灵的操作细节就不多做介绍了，网上相关内容很多。

注意控制Cookie大小和污染基本原理和使用方法：

有关Cookie的基础和高级知识可以去看本人写过的一篇文章《JavaScript 操作 Cookie》。

因为Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Coockie，使Coockie体积尽量小以减少对用户响应的影响；

使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响；
Cookie是有生命周期的，所以请注意设置合理的过期时间，合理地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。
附上学习资料
点击领取https://jq.qq.com/?_wv=1027&k=5Mu0X5J

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。

户的响应时间。
附上学习资料
点击领取https://jq.qq.com/?_wv=1027&k=5Mu0X5J

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。

[外链图片转存中…(img-UbJ0TWKX-1715362372350)]
[外链图片转存中…(img-kyE70Eyf-1715362372351)]

标签

#前端 #面试 #学习