兄弟们今日份面试题来了~~~
11:微格式,前端中怎么考虑微格式
微格式(Microformats)是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式
作用:
a、在捉取Web内容时,能够更为准确地识别内容块的语义;
b、对内容进行操作,包括提供访问、校对,还可以将其转化成其他的相关格式,提供给外部程序和Web服务使用。
应用例子:
当用手机浏览某公司的网站时,手机浏览器识别出了网页中的 hCard 信息。这个 hCard 标记了该公司的多种联络方式,手机浏览器很聪明地提示我“是否保存到通讯录”,于是我很经松地保存了我所需要的信息
12:从用户刷新网页开始,一次 js 请求一般情况下有哪些地方会有缓存处理?
DNS缓存,CDN缓存,客户端(浏览器缓存),服务器缓存
DNS缓存是指在正常访问ip之后,系统会将这个ip存储起来,当再次访问的时候,系统就会把本地的DNS缓存提取显示,等于是加速了网址的解析。
CDN是Content Delivery NetWork的简称,即‘内容分发网络'的意思,主要用于分地域的集群服务器,当用户浏览网站请求数据时,CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求。
服务器缓存就是存放频繁访问内容的服务器。
13:一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验。
a. 图片懒加载,滚动到相应位置才加载图片。
b. 图片预加载,如果为幻灯片、相册等,将当前展示图片的前一张和后一张优先下载。
c. 使用CSSsprite,SVGsprite,Iconfont、Base64等技术,如果图片为css图片的话。
d. 如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。
14:你如何理解 HTML 结构的语义化?
A:在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:裸奔时也好看;
B:用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
C:有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
D:方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备),更好的方式来渲染网页;
E:便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
15:以前端角度出发,有哪些注意事项有利于SEO?
(1).维护网站,提高内容质量,保持更新
(2).网站结构布局优化:尽量简单、开门见山,提倡扁平化结构。
(3).控制首页链接数量,要适中
(4).导航优化:
a:尽量采用文字方式
b:搭配图片导航,但是图片代码一定要进行优化,img标签必须添加“alt”和“title”属性
c:应该加上面包屑导航
(5).控制页面的大小:减少http请求,提高网站的加载速度
(6).适量的关键词和网页描述
title标题,强调重点即可,
meta keywords标签:关键词,列重要关键字即可
meta description标签:网页描述,要高度概括
body中的标签:尽量让代码语义化
a标签:页内链接,要加 “title” 属性加以说明
img应使用 “alt” 属性加以说明
strong、em标签 : 需要强调时使用
巧妙利用CSS布局
谨慎使用 display:none
保留文字效果
16:对DOM设置CSS样式的方式有哪些?
A:外部样式表,引入一个外部 css 文件
B:内部样式表,将 css 代码放在 <head> 标签内部,<style>里
C:内联样式,将 css 样式直接定义在 HTML 元素内部