首页 > 前端开发工程师面试题之综合篇

前端开发工程师面试题之综合篇

温馨提示:以下系列的面试题是通过整合网上各位大牛的文章而成,站在巨人的肩膀上,能够让我们更进一步。

1、页面从输入URL到页面加载显示完成,这个过程中都发生了什么?

  1. 输入域名地址
  2. 发送域名地址至DNS服务器并获得对应WEB服务器IP地址
  3. 与WEB服务器建立TCP连接
  4. 服务器的永久重定向响应(从http://example.com到http://example.com)
  5. 浏览器跟踪重定向地址
  6. 服务器处理请求
  7. 服务器返回一个HTTP响应
  8. 浏览器显示HTML
  9. 浏览器发送请求获取的资源(如图片、音频、视频、CSS、JS等等)
  10. 浏览器发送异步请求

 2、浏览器工作原理

  1. 用户界面
  2. 网络
  3. UI后端
  4. 数据存储
  5. 浏览器引擎
  6. 渲染引擎
  7. js解释器

3、浏览器解析过程

流程:解析html以构建DOM树 -> 构建render树 -> 布局render树 -> 绘制render树

4.浏览器内核的理解

主要分为两部分:渲染引擎和JS引擎

渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等)、以及计算网页的显示方式,然后会输出至显示器或打印机。

浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核

JS引擎:解析和执行javascript来实现网页的动态效果

最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎

5.常见的浏览器内核有哪些

  1. Trident内核:IE浏览器
  2. Gecko内核: Netscape6
  3. Presto内核: Opera7以上
  4. Webkit内核: Safari,Chrome等

 6.请描述一下cookies,sessionStorage和localStorage的区别

cookie是网站为了标示用户身份而存储在用户本地终端(Client Side)上的数据(通常经过加密),数据会在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。

存储数据大小:

  cookie:数据大小不能超过4k。

  sessionStorage和localStorage:虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

存储有效时间:

  localStorage::存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;

  sessionStorage: 数据在当前浏览器窗口关闭后自动删除。

  cookie: 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭

 7.请大概描述下页面访问cookie的限制条件

跨域问题,设置了HttpOnly

8.如何实现浏览器内多个标签页之间的通信

调用localStorage、cookies等本地存储方式

9.页面可见性(Page Visibility API)可以有哪些用途

通过visibilityState的值检测页面当前是否可见,以及打开网页的时间等;

在页面被切换到其他后台进程的时候,自动暂停音乐或视频的播放

10.网页验证码是做什么的,是为了解决什么安全问题

含义:区分用户是计算机还是人的公共全自动程序。

安全问题:防止恶意破解密码、刷票、论坛灌水;有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试。

11.性能优化?

  1. 使用CDN
  2. 图片懒加载
  3. 使用外部Javascript和css
  4. 压缩JavaScript、css、字体、图片等等
  5. 优化CSS Sprite
  6. 减少HTTP请求数
  7. 减少DNS查询
  8. 减少DOM操作
  9. 减少DOM元素数量
  10. 把脚本放在页面底部

 

转载于:https://www.cnblogs.com/wanghao123/p/9377747.html

更多相关:

  • 每次当selenium启动chrome浏览器的时候,chrome浏览器很干净,没有插件、没有收藏、没有历史记录,这是因为selenium在启动chrome时为了保证最快的运行效率,启动了一个裸浏览器,这就是为什么需要配置参数的原因,但是有些时候我们需要的不仅是一个裸浏览器。selenium启动配置参数接收是ChromeOption...

  •   当然有部分童鞋反映这样设置了以后,部分css样式表修改了还是不管用,那么我们就需要针对浏览器做点骚操作了: 1.chrome(谷歌浏览器) (1)、F12在调试页面Network中勾选Disable cache (2)、按F5或右键“重新加载”刷新页面内容 (3)、 使用Ctrl+Shift+R或者Ctrl+...

  • 我们的使命是让您了解最新和最酷的Web开发趋势。这就是为什么我们每个月都会发布一些精选的资源,这些资源是我们偶然发现并认为值得您关注的。 1.Tessaract.js 强大的javascript(节点和浏览器)库,用于从图像中提取文本。它能自动检测文本的位置和方向,识别60多种语言,包括中文、阿拉伯语和俄语等。 2.OverlayS...

  • vue 在浏览器控制台怎么调试 谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data,会显示undefined。 解决方案: 再main.js里面声明window.Vue = new Vue window.Vue = n...

  • 本文是西门子开放式TCP通信的第2篇,上一篇我们讲了使用西门子1200PLC作为TCP服务器的程序编写,可以点击下方链接阅读:【公众号dotNet工控上位机:thinger_swj】基于Socket访问西门子PLC系列教程(一)在完成上述步骤后,接下来就是编写上位机软件与PLC之间进行通信。上位机UI界面设计如下图所示:从上图可以看出...

  • 我有一个大型数据集,列出了在全国不同地区销售的竞争对手产品。我希望通过使用这些新数据帧名称中的列值的迭代过程,根据区域将该数据帧分成几个其他区域,以便我可以分别处理每个数据帧-例如根据价格对每个地区的信息进行排序,以了解每个地区的市场情况。我给出了以下数据的简化版本:Competitor Region ProductA Product...

  • 作为一名IT从业者,我来回答一下这个问题。首先,对于具有Java编程基础的人来说,学习Python的初期并不会遇到太大的障碍,但是要结合自己的发展规划来制定学习规划,尤其要重视学习方向的选择。Java与Python都是比较典型的全场景编程语言,相比于Java语言来说,当前Python语言在大数据、人工智能领域的应用更为广泛一些,而且大...

  • 这段时间通过学习相关的知识,最大的变化就是看待事物更加喜欢去了解事物后面的本质,碰到问题后解决问题思路也发生了改变。举个具体的例子,我在学习数据分析,将来会考虑从事这方面的工作,需要掌握的相关专业知识这个问题暂且按下不表,那哪些具体的问题是我需要了解的呢,以下简单罗列:1、了解数据分析师这个岗位在各个地区的需求情况?2、数据分析师的薪...

  • 这一节将开始学习python的一个核心数据分析支持库---pandas,它是python数据分析实践与实战的必备高级工具。对于使用 Python 进行数据分析来说,pandas 几乎是无人不知,无人不晓的。今天,我们就来认识认识数据分析界鼎鼎大名的 pandas。目录一. pandas主要数据结构 SeriesDataFrame二...

  • UE5 Niagara学习教程  课程获取:虚幻引擎5(UE5)实时VFX游戏特效制作入门到精通-云桥网 你会学到什么 我将通过创建各种各样的实时效果来教你虚幻引擎中强大的粒子系统。 我们将从简单的基础知识开始,然后逐渐地,我们将创造更有吸引力和专业的效果。 本课程面向对Niagara一无所知的初学者或想要深入了解实FX游戏...

  • 从零开始学习虚幻引擎5中的实时VFX。   你会学到什么 了解如何创建实时效果 通过创造效果来学习Niagara 了解Niagara是如何运作的 为游戏创造各种各样的效果。 创造风格化的火 创建风格化的爆炸 创造能量球 MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz 语言:英语+中英文字幕(根...

  • Unreal Engine 5: Blueprint Melee Combat AI from Scratch 创建一个动作游戏,以打击2个独特的人工智能,包括一个火蔓延龙! 你会学到什么 学习使用虚幻引擎5的技巧 如何通过蓝图设计和创建人工智能 学会创造两种独特的人工智能 学会在战斗中造成/接受伤害 流派:电子学习| MP...

  • 流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.93 GB |时长:5h 15m 了解如何使用Oculus Quest 2的蓝图在虚幻引擎4中从头开始构建基本的虚拟现实机制 你会学到什么 虚幻引擎蓝图基础 使用虚幻引...

  • 时长:1h 12m |视频:. MP4 1280×720,30 fps(r) |音频:AAC,48000 Hz,2ch |大小解压后:1.08G 含课程文件 语言:英语+中英文字幕(根据原英文字幕机译更准确) 在这节课中,你将学习如何在虚幻引擎5中从头开始创建AAA外观的场景。我将带你从构思到最终的构图和渲染,经历创造这个惊人...