更多课程 选择中心

Web培训
达内IT学院

400-111-8989

Web培训

2020年Web前端面试题汇总(五)

  • 发布:Web前端培训
  • 来源:web前端面试
  • 时间:2020-06-17 14:08

今天小编要跟大家分享的文章是关于2020年Web前端面试题汇总。由于内容较多小编分开为大家介绍,今天来和小编一起看一看第五部分的内容,希望这些面试题能够对正准备找Web前端相关工作的小伙伴们有所帮助。下面来和小编一起看一看吧!

2020年Web前端面试题汇总

1.请说明ECMAScript, JavaScript, Jscript之间的关系?

ECMAScript提供脚本语言必须遵守的规则、

细节和准则,是脚本语言的规范。

比如:ES5,ES6就是具体的一js版本。

JavaScript是ECMAScript的一个分支版本,

JavaScript 实现了多数 ECMA-262 中

描述的 ECMAScript 规范,但存在少数差异。

JScript是微软公司对ECMA-262语言规范的

一种实现,除了少数例外(这是为了保持向后兼容 ),

微软公司宣称JScript完全实现了ECMA标准.

关系:

JavaScript和JScript都是ECMAScript的版本分支,

二者在语法上没有多大的区别;

只不过一个是NetScape公司的, 一个是微软的;

IE系列默认是JScript, 其它的则反之用JavaScript。

2. 页面加载过程中可能触发哪些事件? 它们的顺序是?

页面加载时,大致可以分为以下几个步骤:

1) 开始解析HTML文档结构

2) 加载外部样式表及JavaScript脚本

3) 解析执行JavaScript脚本

4) DOM树渲染完成

5) 加载未完成的外部资源

6) 页面加载成功

执行顺序:

1) document readystatechange事件

2) document DOMContentLoaded事件

3) window load事件

3. 函数中在声明变量a前使用a会产生错误吗? 为什么?

不会, JS中能够进行变量作用域提升,

把所有变量、函数的声明提升到当前

作用域的最前面, 但不进行赋值操作;

所以可能造成获取的值是undefined。

4. 什么是hash, 以及hashchange事件?

先了解下什么是hash:hash即URL中"#"字符后面的部分。

a) 使用浏览器访问网页时,

如果网页URL中带有hash,

页面就会定位到id(或name)

与hash值一样的元素的位置;

b) hash还有另一个特点,

它的改变不会导致页面重新加载;

c) hash值浏览器是不会随请求发送到服务器端的;

d) 通过window.location.hash属性获取和设置hash值。

window.location.hash值的变化会直接

反应到浏览器地址栏(#后面的部分会发生变化),

同时,浏览器地址栏hash值的变化也会触发

window.location.hash值的变化,

从而触发onhashchange事件。

再来了解下什么是hashchange事件:

a) 当URL的片段标识符更改时,

将触发hashchange事件(跟在#符号后面的URL部分,包括#符号)b)

hashchange事件触发时,

事件对象会有hash改变前的URL(oldURL)和hash改变后的URL(newURL)两个属性。

5. 什么是CDN, CDN对于网站有什么意义, 它有什么样的缺点?

CDN又称为内容分发网络; 本意在于

尽可能避开互联网上有可能影响数据

传输速度和稳定性的瓶颈和环节,

使内容传输的更快、更稳定。

主要目的:

解决因分布、带宽、服务器性能带来的访问延迟问题,

适用于站点加速、点播、直播等场景。

使用户可就近取得所需内容,解决 Internet网络拥挤的状况,

提高用户访问网站的响应速度和成功率。

缺点:

a) 实施复杂 , 投资大;

b) 目前大部分的CDN还只是对静态内容加速,

对动态加速效果不好;

而双线对动态加速的效果跟静态是一样的。

6. 你能描述一下渐进增强和优雅降级之间的不同吗?

定义:

优雅降级(graceful degradation):

一开始就构建站点的完整功能,

然后针对浏览器测试和修复

渐进增强(progressive enhancement):

一开始只构建站点的最少特性,

然后不断针对各浏览器追加功能。

优雅降级和渐进增强都关注于同一网站

在不同设备里不同浏览器下的表现程度。

区别:

“优雅降级”观点认为应该针对那些最高级、

最完善的浏览器来设计网站。

而将那些被认为“过时”或有功能缺失的浏览器下

的测试工作安排在开发周期的最后阶段,并把测试

对象限定为主流浏览器(如 IE、Mozilla 等)的

前一个版本。

“渐进增强”观点则认为应关注于内容本身。

总结:"优雅降级"就是首先完整地实现整个网站,

包括其中的功能和效果. 然后再为那些无

法支持所有功能的浏览器增加候选方案,

使之在旧式浏览器上以某种形式降级体验

却不至于完全失效。"渐进增强"则是从浏览器支持的基本功能开始,

首先为所有设备准备好清晰且语义化的html及

完整内容, 然后再以无侵入的方法向页面增加无

害于基础浏览器的额外样式和功能。

当浏览器升级时, 它们会自动呈现并发挥作用。

7. 请说说浏览器内核的组成?

浏览器的结构:

用户界面(UI) - 包括菜单栏、工具栏、地址栏、

后退/前进按钮、书签目录等,也就是能看到的除

了显示页面的主窗口之外的部分;

浏览器引擎(Rendering engine)-也被称为浏览器

内核、渲染引擎,主要负责取得页面内容、整理信息

(应用CSS)、计算页面的显示方式,然后会输出到

显示器或者打印机;

JS解释器 - 也可以称为JS内核,主要负责处理

javascript脚本程序,一般都会附带在浏览器

之中,例如chrome的V8引擎;

网络部分 - 主要用于网络调用,例如:HTTP请求,

其接口与平台无关,并为所有的平台提供底层实现;

UI后端 - 用于绘制基本的窗口部件,比如组合框和窗口等。

数据存储 - 保存类似于cookie、storage等数据部分,

HTML5新增了web database技术,一种完整的轻量级客

户端存储技术。

主要浏览器:

IE、Firefox、Safari、Chrome、Opera。

它们的浏览器内核(渲染引擎):

IE--Trident

FF(Mozilla)--Gecko

Safari--Webkit

Chrome--Blink(WebKit的分支)

Opera--原为Presto,现为Blink

8. 为什么利用多个域名来请求网络资源会更有效?

动静分离需求,使用不同的服务器处理请求。

处理动态内容的只处理动态内容,不处理别的,

提高效率。

突破浏览器并发限制, 同一时间针对同一域名

下的请求有一定数量限制。超过限制数目的请

求会被阻止。不同浏览器这个限制的数目不一样。

Cookieless, 节省带宽,尤其是上行带宽一般比下

行要慢。用户的每次访问,都会带上自己的cookie

,久而久之耗费的带宽还是挺大的。

假如weibo 的图片放在主站域名下,那么用户

每次访问图片时,request header 里就会带有

自己的cookie ,header 里的cookie 还不能压缩,

而图片是不需要知道用户的cookie 的,所以这部分带

宽就白白浪费了。

避免不必要的安全问题(比如: 上传js窃取主站cookie之类的)

节约主域名的连接数,从而提高客户端网络带宽的利用率,

优化页面响应。

9. 说说前端开发中, 如何进行性能优化?

1) 减少http请求次数:css spirit,data uri;

2) JS,CSS源码压缩;

3) 前端模板 JS+数据,减少由于HTML标签导致

的带宽浪费,前端用变量保存AJAX请求结果,每

次操作本地变量,不用请求,减少请求次数;

4) 用innerHTML代替DOM操作,减少DOM操作次数;

5) 用setTimeout来避免页面失去响应;

6) 用hash-table来优化查找;

7) 当需要设置的样式很多时设置className而不

是直接操作style;

8) 少用全局变量;

9) 缓存DOM节点查找的结果;

10)避免使用CSS Expression;

11)图片预载;

12)避免在页面的主体布局中使用table,

table要等其中的内容完全下载之后才会显示出来,

显示比div+css布局慢;

13)控制网页在网络传输过程中的数据量;

比如: 启用GZIP压缩或者保持良好的编程习惯,

避免重复的CSS,JavaScript代码,

多余的HTML标签和属性。

10. 从前端角度出发, 谈谈做好网站seo需要考虑什么?

1) 语义化html标签;

2) 合理的title, description, keywords;

3) 重要的html代码放前面;

4) 少用iframe, 搜索引擎不会抓取iframe中的内容

5) 图片加上alt

以上就是小编今天为大家分享的关于2020年Web前端面试题汇总(五)的文章,希望本篇文章能够对想要参加Web前端面试的小伙伴们有所帮助,想要了解更多Web前端相关知识记得关注达内Web培训官网。最后祝愿小伙伴们面试成功,成为一名优秀的Web前端工程师

【免责声明:本文图片及文字信息均由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。】

预约申请免费试听课

填写下面表单即可预约申请免费试听!怕钱不够?可就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:2020年Web前端面试题汇总(四)
下一篇:2020年Web前端面试题汇总(六)

2020年前端面试题汇总之算法和应用

2020年前端面试题汇总之常见性能优化

2020年前端面试题汇总之Webpack

Web前端面试必备面试题整理

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省