没有合适的资源?快使用搜索试试~ 我知道了~
大厂前端面试宝典大全1
需积分: 0 0 下载量 194 浏览量
2022-12-04
10:54:23
上传
评论
收藏 1.49MB DOCX 举报
温馨提示
试读
107页
大厂前端面试宝典大全1
资源推荐
资源详情
资源评论
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
前
端面试宝典
第一章 内容提要
前端程序员目前就业形势良好,大前端概念深入人心,大前端最大的特点在于一次开发,同时适用于所
有平台,开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端是web统一的时代,利用
web不仅能开发出网站,更可以开发手机端web应用和移动端应用程序。
本书是一本解析前端面试题的书,可以帮助求职者更好的准备面试。本书共包含八章,囊括了目前企业
中常见的面试题类型和考点,包括Html、CSS、Javascript、Vue、计算机网络、数据结构与算法等最常
见的面试题。本书通过技术点解析、代码辅佐的方式,让读者能深刻领会每个考点背后的技术。
本书紧扣面试精髓,对各种技术剖析一针见血,是想找工作的前端程序员和刚毕业学生的面试宝典。
第二章 HTML5面试题
1.
H5的新特性有哪些
画布(Canvas) API
地理(Geolocation) API
音 频 、 视 频 API(audio,video)
localStorage 和 sessionStorage
webworker 和 websocket
header,nav,footer,aside,article,section
web worker是运行在浏览器后台的js程序,他不影响主程序的运行,是另开的一个js线程,可以用
这个线程执行复杂的数据操作,然后把操作结果通过postMessage传递给主线程,这样在进行复杂
且耗时的操作时就不会阻塞主线程了
2.
Label的作用是什么?是怎么用的?
label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控
件上。
3.
HTML5的form如何关闭自动完成功能
给不想要提示的 form 或某个 input 设置为 autocomplete=off
<div style="height:1px;overflow:hidden;background:red"></div>
4.
dom如何实现浏览器内多个标签页之间的通信? (阿里)
1)
WebSocket、SharedWorker;
2)
也可以调用localstorge、cookies等本地存储方式;localstorge另一
个浏览上下文里被添加、修改
或删除时,它都会触发一个事件,我们通 过监听事件,控制它的值来进行页面信息通信;
3)
注意quirks:Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常;
5.
实现不使用 border 画出1px高的线,在不同浏览器的标准模式与怪异模式下都
能保持一致的效果
6.
title与h1的区别、b与strong的区别、i与em的区别?
title属性没有明确意义只表示是个标题,H1则表示层次明确的标题,对页面信息的抓取也有很大的影
响;
strong是标明重点内容,有语气加强的含义,使用阅读设备阅读网络时: <strong> 会重读,而<B>
是展示强调内容。
i内容展示为斜体,me表示强调的文本;
Physical Style Elements -- 自然样式标签
b, i, u, s, pre
Semantic Style Elements -- 语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。
7.
你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Trident内核:IE系列
Gecko内核:Firefox
Webkit内核:Safari
Blink内核:是基于Webkit内核的子项目,使用的浏览器有:
Chrome/opera等除IE、Firefox、Safari之外的几乎所有浏览器
几乎所有国产双内核浏览器(Trident/Blink)如360、猎豹、qq、百度等
8.
每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?
文档声明。
声明位于文档中的最前面的位置,处于
``
标签之前。此标签可告知浏览器文档使用哪种 HTML 或
XHTML 规范。(重点:告诉浏览器按照何种规范解析页面)
<script src =”js.js”></script>
<link href="common.css" rel="stylesheet"/>
IE下如不书写文档声明会使用怪异模式解析网页导致一系列CSS兼容性问题
9.
div+css的布局较table布局有什么优点
正常场景一般都适用div+CSS布局,
优点:
1)
结构与样式分离
2)
代码语义性好
3)
更符合HTML标准规范
4) SEO友好
Table布局的适用场景:
某种原因不方便加载外部CSS的场景,例如邮件正文,此时用table布局可以在无css情况下保持页面布局
正常
10.
img的alt与title有何异同? strong与em的异同
alt(alt text):为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指定替换文字。替换文字
的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
em:表现为斜体,语义表示强调
strong:表现为粗体,语义为强烈语气,强调程度超过em
11.
简述一下src与href的区别
src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。
src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求
src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。
当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片
和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头
部。
href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链
接)之间的链接,如果我们在文档中添加
那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么
建议使用link方式来加载css,而不是使用@import方式。
12.
知道的网页制作会用到的图片格式有哪些
png-8,png-24,jpeg,gif,svg。
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。(是否有关注新技术,新鲜
事物)
科普一下Webp:WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩
体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经
开始测试并使用WebP格式。
在质量相同的情况下,WebP格式图像的体积要比JPEG格式图像小40%
13.
在css/js代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次js
请求一般情况下有哪些地方会有缓存处理
dns缓存,cdn缓存,浏览器缓存,服务器缓存
14.
一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些
图片的加载,给用户更好的体验
1) 图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距离与
页面的距离,如果前者小于后者,优先加载。
2) 如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张优先下载。
3)
如果图片为css图片,可以使用CSSsprite,SVGsprite,Iconfont、Base64等技术。
4) 如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用
户体验。
5) 如果图片展示区域小于图片的真实大小,则因在服务器端根据业务需要先行进行图片压缩,图片压缩
后大小与展示一致
15.
你如何理解HTML结构的语义化
1)
更符合W3C统一的规范标准,是技术趋势。
2)
没有样式时浏览器的默认样式也能让页面结构很清晰。
3)
对功能障碍用户友好。屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。
4)
对其他非主流终端设备友好。例如机顶盒、PDA、各种移动终端。
5)
对SEO友好。
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
16.
谈谈以前端角度出发做好SEO需要考虑什么
搜索引擎主要以:
外链数量和质量,网页内容和结构等来决定某关键字下的网页搜索排名。
前端应该注意网页结构和内容方面的情况:
1)
Meta标签优化:主要包括主题(Title),网站描述(Description)。还有一些其它的隐藏文字比如
Author(作者),Category(目录),Language(编码语种)等,符合W3C规范的语义性标签的使用
2)
如何选取关键词并在网页中放置关键词:搜索就得用关键词。关键词分析和选择是SEO最重要的工作
之一。首先要给网站确定主关键词(一般在5个上下),然后针对这些关键词进行优化,包括关键词密度
(Density),相关度(Relavancy),突出性(Prominency)等等。
17.
html5有哪些新特性、移除了那些元素
新特性:
1) 拖 拽 释 放 (Drag and drop) API 2)
语义化更好的内容标签(header,nav,footer,aside,article,section) 3)
音频、视频API(audio,video)
4) 画 布 (Canvas) API 5)
地理(Geolocation) API
6)
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
7)
sessionStorage 的数据在浏览器关闭后自动删除8)
表单控件,calendar、date、time、email、url、search 9)
新的技术webworker, websocket, Geolocation
移除的元素:
1)纯表现的元素:basefont,big,center,font, s,strike,tt,u;
2)对可用性产生负面影响的元素:frame,frameset,noframes;
18.
如何处理HTML5新标签的浏览器兼容问题
IE8/IE7/IE6支持通过 document.createElement 方法产生的标签,可以利用这一特性让这些浏览器支持
HTML5 新标签,浏览器支持新标签后,还需要添加标签默认的样式(当然最好的方式是直接使用成熟的
框架、使用最多的是html5shim框架):
剩余106页未读,继续阅读
资源评论
hl0406
- 粉丝: 100
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功