当前位置: 首页 > 编程日记 > 正文

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

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

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

相关文章:

C语言基础(12)-输入和输出

1. int scanf(const char *format, ...) 说明:scanf用于通过控制台输入字符串。 注意: (1).通过scanf()函数输入的字符串,系统会自动在其后面补一个0,scanf默认回车和空格都是代表输入完成,这样会导致无法输入一个完整的字符串。 …

java static 可见性_Java多线程 synchronized与可见性的关系以及可见性问题总结

作者:七里香的编程之路出自:OSCHINA原文:my.oschina.net/u/4098550/blog/4548274能保证可见性的措施除了volatile 可以让变量保证可见性外.happens-before九大规则. 都是能够保证可见性的. 其中就包含了锁操作(synchronized 和 lock) 和 vola…

表达式树 java_表达树—构建表达式树、获取表达式(二)

public classExprTree {//最后访问头结点public BinaryTreeNode buildExprTree(char postfixExpr[],intsize){LinkedList stacknewLinkedList();BinaryTreeNode nodenull;for(int i0;inodenewBinaryTreeNode();node.setLeft(null);node.setRight(null);node.setData(postfixExp…

python 客户端 如何获取手机_Python学习---Django的request扩展[获取用户设备信息]

关于Django的request扩展【获取用户设备信息】settings.pyINSTALLED_APPS [...app01, # 注册app]STATICFILES_DIRS (os.path.join(BASE_DIR, "statics"),) # 现添加的配置,这里是元组,注意逗号TEMPLATES [...DIRS: [os.path.join(BASE_DIR, templates)…

: error c2062: 意外的类型“int”_Go 命令行解析 flag 包之扩展新类型

上篇文章 说到,除布尔类型 Flag,flag 支持的还有整型(int、int64、uint、uint64)、浮点型(float64)、字符串(string)和时长(duration)。flag 内置支持能满足大…

java英文字符串大小写转换 必须使用_【Java基础】之字符串大小写转换不利用API....

public class UpStr{static String str "AbcDeFdDSfgdsadeADFSAFCfdsa";public String transformUpperOrLower(String str, String type){//将字符串转换为char数组char[] ch str.toCharArray();if (type null || type.length() 0 || type.equals(""))…

.net core 17

转载于:https://www.cnblogs.com/qingwengang/p/6297486.html

vue中子组件和子组件之间怎么通信_vue.js组件之间如何通信?

vue.js组件之间如何通信?下面本篇文章就来给大家介绍一下Vue.js组件间通信方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。平时在使用Vue框架的业务开发中,组件不仅仅要把模板的内容进行复用,更…

以太坊RLP机制分析

目录 1 RLP 定义 2 RLP 编码规则 3 RLP 编码实例 4 RLP 分析 1 RLP 定义 RLP,即 Recursive Length Prefix, 递归长度前缀编码,是以太坊数据序列化的主要方法, 具有较好的数据处理效率,尤其是将长度和类型统一作为前缀,…

Android Studio导入Eclipse项目的两种方法

Android Studio导入Eclipse项目有两种方法,一种是直接把Eclipse项目导入Android Studio,另一种是在Eclipse项目里面进行转换,然后再导入Android Studio。 1. 直接导入 打开Android Studio,如果里面已经打开了项目,选择…

mediawiki java api_维基百科 MediaWiki API 解析

使用开放的 API 做一个自己的小项目,是一个很好的学习方法。但好像开放的 API 选择并不多。这里给大家多一个选择,简单介绍一下维基百科使用的 MediaWiki API。简介先简单介绍几个容易混淆的概念。WikiWiki 是一种在网络上开放且可供多人协同创作的超文本…

elasticdump安装_elasticsearch导出、导入工具-elasticdump

elasticsearch导出、导入工具-elasticdumpelasticsearch 数据导入到本地,或本地数据导入到elasticsearch中,或集群间的数据迁移,可以用elasticsearch的工具—elasticdumpelasticdump 可以用用npm安装本地运行,也可以用docker容器运…

mysql 无法登陆_MySQL root用户无法登录原因及解决办法

MySQL root密码正确,却怎么也bai无法du从本地登录MySQL登录提示ERROR 1045 (28000): Access denied for user rootlocalhost (using password: YES)可能原因是mysql库中bai的user表缺少一个root指向host:localhost的数据项,只有一个root指向h…

Spring Boot启动过程(二)

书接上篇 该说refreshContext(context)了,首先是判断context是否是AbstractApplicationContext派生类的实例,之后调用了强转为AbstractApplicationContext类型并调用它的refresh方法。由于AnnotationConfigEmbeddedWebApplicationContext继承自EmbeddedW…

dom vue 加载完 执行_前端面试题——Vue

前言前几天整理了一些 html css JavaScript 常见的面试题(https://segmentfault.com/u/youdangde_5c8b208a23f95/articles),然后现在也是找了一些在 Vue 方面经常出现的面试题,留给自己查看消化,也分享给有需要的小伙伴。如果文章中有出现纰…

查看某个存储过程

show create procedure 存储过程的名称; ##主从同步是会同步存储过程的 转载于:https://www.cnblogs.com/yangxiaochu/p/9397108.html

java中的分页 效率考虑_面试官:数据量很大,分页查询很慢,有什么优化方案?...

当需要从数据库查询的表有上万条记录的时候,一次性查询所有结果会变得很慢,特别是随着数据量的增加特别明显,这时需要使用分页查询。对于数据库分页查询,也有很多种方法和优化的点。下面简单说一下我知道的一些方法。准备工作为了…

dede 后台 mysql_织梦dedecms使用Mysql8.0无法登录后台的解决办法

1//只允许用户名和密码用0-9,a-z,A-Z,,_,.,-这些字符2$this->userName preg_replace("/[^0-9a-zA-Z_!\.-]/", , $username);3$this->userPwd preg_replace("/[^0-9a-zA-Z_!\.-]/", , $userpwd);4$pwd substr(md5($this->userPwd), 5, 20);56$d…

怎样对拍、如何对拍、对拍模板

我写了一个对拍模板,套上直接可以用,还有使用说明在里面,这里附上github网站。 对拍全套模板 转载于:https://www.cnblogs.com/yichuan-sun/p/9624162.html

二叉树线索化示意图_103-线索化二叉树思路图解

2.网上数据结构和算法的课程不少,但存在两个问题:1)授课方式单一,大多是照着代码念一遍,数据结构和算法本身就比较难理解,对基础好的学员来说,还好一点,对基础不好的学生来说,基本上…

linux环境下搭建osm_web服务器一(Postgresql配置及osm2pgsql原始数据导入):

Postgresql配置及osm2pgsql原始数据导入 2012年,Ubuntu 12.04LTS发布,又一个长效支持版,我们又该更新OpenStreetMap服务器了,这次,将详细在博客中记录配置过程。关于前面对OpenStreetMap的介绍,参考我的博文…

Java开发买低压本还是标压本_标压和低压,笔记本怎么选才最香?

华为最近发布了新款 MateBook 13/14 2020 锐龙版笔记本电脑,与之前的产品相比,它们都采用了 AMD 锐龙标压处理器。在体验这两款产品的同时,我一直在思考两个问题:它们与低压处理器相比强在哪里,以及是否值得购买。按照…

php mysql 备注_php,mysql备注信息1

/*---------------------------------------------------------------------------------------如何彻底地删除表?如果你不需要一个表了,你可以使用DROP.语法如下:DROP TABLE tablename例如:DROP TABLE employee_dataQuery OK,0 rows affected(0.01 sec);--------------------…

JSP和Servlet学习笔记1 - 访问配置

1. 访问 WebContent 目录下的 JSP 文件 在 WebContent 目录下的文件可以直接在浏览器中访问。新建一个 test.jsp 文件 <% page language"java" contentType"text/html; charsetISO-8859-1"pageEncoding"ISO-8859-1"%> <!DOCTYPE htm…

unity人物旋转移动代码_Unity3D研究院之脚本实现模型的平移与旋转(六)

123 说&#xff1a;雨松大大&#xff0c;有个问题想请教一下&#xff0c;我用UNET构建了个小场景&#xff0c;在电脑上可以客户端可以连接到服务器&#xff0c;Windows和Linux都可以&#xff0c;发布到安卓缺连不了&#xff0c;这是问什么呢说&#xff1a;求教一下&#xff0c;…

博客园的第一篇博文

以后所有技术相关的文章都记录在博客园啦&#xff0c;加油&#xff01;转载于:https://www.cnblogs.com/dabenniu/p/6337549.html

java后台分页插件怎么写_Java分页技术(从后台传json到前台解析显示)

0 这是一篇我在初学习过程中&#xff0c;遇到的动态数据分页显示的问题&#xff0c;前台采用Ajax传给后台&#xff0c;后台在访问数据库取出分页数据再转换为json格式传递给前台&#xff0c;前台再解析显示到表格中。在此写出我在做的过程中遇到的问题&#xff0c;可以让其他人…

c 应用程序mysql_MySQL C 语言应用程序接口开发教程

从数据库中取回数据在这个实例中我们从表中取回数据。步骤&#xff1a;(1)创建连接(2)执行查询(3)获取结果集(4)提取所有可用的记录(5)释放结果集实例程序打印 writers 表中所有的记录(姓名)。#include #include int main(int argc, char * argv[]){MYSQL * conn;MYSQL_RES * r…

GreenPlum学习笔记:基础知识

一、介绍 GreenPlum分布式数据仓库&#xff0c;大规模并行计算技术。 无共享/MPP核心架构Greenplum数据库软件将数据平均分布到系统的所有节点服务器上&#xff0c;所以节点存储每张表或表分区的部分行&#xff0c;所有数据加载和查询都是自动在各个节点服务器上并行运行&…

java 套接字关联的通道_Java 通道教程 – NIO 2.0

# Java 通道教程 – NIO 2.0> 原文&#xff1a; [https://howtodoinjava.com/java7/nio/java-nio-2-0-channels/](https://howtodoinjava.com/java7/nio/java-nio-2-0-channels/)通道是继[**缓冲区**](//howtodoinjava.com/java-7/nio/java-nio-2-0-working-with-buffers/ &…