你不可错过的前端面试题(二)

时间 2019-11-07

标签不可错过端面试题繁體版

原文原文链接

1、前端须要注意的SEO

（1）合理的 title、description 和 keywords，他们的搜索权重逐个减少
title 强调重点便可，重要关键词出现不要超过2次，并且要靠前，不一样页面 title 要有所不一样；description 把页面内容高度归纳，长度合适，不可过度堆砌关键词，不一样页面 description 有所不一样；keywords 列举出重要关键词便可。javascript

（2）语义化的 HTML 代码，符合 W3C 规范
语义化代码让搜索引擎容易理解网页。css

（3）重要内容 HTML 代码放在最前
搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容必定会被抓取。html

（4）重要内容不要用JavaScript输出
爬虫不会执行JavaScript获取内容。前端

（5）少用iframe
搜索引擎不会抓取 <iframe>（内联框架）中的内容。java

（6）非装饰性图片必须加 altgit

（7）提升网站速度
网站速度是搜索引擎排序的一个重要指标。github

2、网页验证码的做用

（1）区分用户是计算机仍是人的公共全自动程序。能够防止恶意破解密码、刷票、论坛灌水。web

（2）有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试。canvas

3、网页中使用字体

在网页中应该使用偶数字体，偶数字号相对奇数字号更容易和 web 设计的其余部分构成比例关系。

4、浏览器内核

1. 两部分

渲染引擎(layout engineer或Rendering Engine)和JS引擎。

2. 渲染引擎

负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，而后会输出至显示器或打印机。浏览器的内核的不一样对于网页的语法解释会有不一样，因此渲染的效果也不相同。全部网页浏览器、电子邮件客户端以及其它须要编辑、显示网络内容的应用程序都须要内核。segmentfault

3. JS引擎

解析和执行JavaScript来实现网页的动态效果。

最开始渲染引擎和JS引擎并无区分的很明确，后来JS引擎愈来愈独立，内核就倾向于只指渲染引擎。

5、浏览器标准模式和怪异模式的区别

（1）“标准模式”(Standards Mode) 页面按照 HTML 与 CSS 的定义渲染。

（2）“怪异模式”(Quirks Mode)浏览器为兼容很早以前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。

（3）标准模式的排版和 JS 运做模式是以该浏览器支持的最高标准运行。

（4）怪异模式，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。 <!doctype>不存在或格式不正确会致使文档以怪异模式呈现。

6、渐进加强

1. 概念

渐进加强是指在WEB设计时强调可访问性、语义化HTML标签、外部样式表和脚本。保证全部人都能访问页面的基本内容和功能同时为高级浏览器和高带宽用户提供更好的用户体验。

2. 原则

（1）全部浏览器都必须能访问基本内容

（2）全部浏览器都必须能使用基本功能

（3）全部内容都包含在语义化标签中

（4）经过外部CSS提供加强的布局

（5）经过非侵入式、外部JavaScript提供加强功能

7、link和@import的区别

（1）link是XHTML标签，无兼容问题；而@import只在 IE5 以上才能识别。

（2）页面被加载的时，link会同时被加载；而@import引用的CSS会等到页面被加载完再加载。

（3）link方式的样式的权重高于 @import的权重。

（4）link能够经过rel="alternate stylesheet"指定候选样式。

（5）@import必须在样式规则以前，能够在CSS文件中引用其余文件。

总结

link优于@import

8、PNG、JPG和GIF区别

PNG	JPG	GIF
PNG8和truecolor PNG，PNG8颜色上限为256	颜色上限为256	8位像素，256色
文件小	有损压缩，可控制压缩质量	无损压缩
支持alpha透明度	不支持透明	支持boolean透明
无动画		支持简单动画
适合背景、图标、按钮	适合照片

9、Canvas和SVG的区别

（1）canvas输出的是一整幅画布。

（2）svg绘制出来的每个图形的元素都是独立的DOM节点，可以方便的绑定事件或用来修改。

（3）canvas输出标量画布，就像一张图片同样，放大会失真或者锯齿。

（4）svg输出的图形是矢量图形，后期能够修改参数来自由放大缩小，不会是真和锯齿。

10、ssessionStorage、localStorage和cookie

1. 概念

（1）sessionStorage、localStorage、cookie都是在浏览器端存储的数据。

（2）sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，能够方便的在web请求之间保存数据。有了本地数据，就能够避免数据在浏览器和服务器间没必要要地来回传递。

（3）sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage 是在同源的同学口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即便刷新页面或进入同源另外一页面，数据仍然存在。关闭窗口后，sessionStorage 即被销毁。同时“独立”打开的不一样窗口，即便是同一页面，sessionStorage 对象也是不一样的。

（4）cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（一般通过加密），cookie数据始终在同源的http请求中携带（即便不须要），也会在浏览器和服务器间来回传递。

2. 数据发送

（1）sessionStorage和localStorage不会自动把数据发送到服务器端，仅在本地保存。

（2）cookies会把数据发送到服务器端。

3. 存储大小

（1）cookie数据大小不能超过4k。

（2）sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。

4. 有期时间

（1）cookie 设置的过时时间以前一直有效，即便窗口或浏览器关闭。

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

（3）localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。

11、XHTML和HTML的对比

1. XHTML

（1） xhtml 语法要求严格，区分大小写。

（2）元素必须被正确嵌套，必须有根元素。

（3）每一个 DOM 必需要闭合；空标签也必须闭合,例如<img />, <br/>, <input />等。

（4）属性值使用双引号。一旦遇到错误，马上中止解析，并显示错误信息。

2. HTML

可兼容各大浏览器、手机以及 PDA，而且浏览器也能快速正确地编译网页。

12、<!doctype>的特色

（1）<!doctype>声明必须处于HTML文档的头部，在<html>标签以前，HTML5中不区分大小写。

（2）<!doctype>声明不是一个HTML标签，是一个用于告诉浏览器当前HTMl版本的指令。

（3）现代浏览器的html布局引擎经过检查doctype决定使用兼容模式仍是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。

十3、HTML5 <!DOCTYPE HTML>标签

（1）在HTML4.01中<!doctype>声明指向一个DTD，因为HTML4.01基于SGML，因此DTD指定了标记规则以保证浏览器正确渲染内容。

（2）HTML5不基于SGML，因此不用指定DTD，可是须要<!doctype>来规范浏览器的行为。

十4、HTML5的新特性

1. 增长的元素

（1）绘画 canvas

（2）用于媒介回放的 video 和 audio 元素

（3）本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除

（4）语意化更好的内容元素，好比 article、footer、header、nav、section

（5）表单控件，calendar、date、time、email、url、search

（6）新技术，webworker, websocket, Geolocation

2. 移除的元素

（1）纯表现的元素，basefont，big，center，font, s，strike，tt，u

（2）对可用性产生负面影响的元素，frame，frameset，noframes

十5、HTML全局属性(global attribute)

全局属性是全部HTML元素共有的属性; 它们能够用于全部元素，即便属性可能对某些元素不起做用。

属性	描述
accesskey	提供了一种使用快捷键访问当前元素的途径
class	为元素设置类标识，多个类名用空格分开，class容许css和javascript经过class选择器或者相似下面的DOM方法来选择和访问element
contenteditable	指定元素内容是否可编辑
contextmenu	自定义鼠标右键弹出菜单内容
data-*	为元素增长自定义属性
dir	设置元素文本方向
draggable	设置元素是否可拖拽
dropzone	设置元素拖放类型： copy, move, link
hidden	这个布尔（Boolean）属性表示element尚未或是再也不存在。样式上会致使元素不显示，可是不能用这个属性实现样式效果
id	惟一的标识，它在整个document里应该是惟一的。当须要连接（使用片断标识符，锚点），执行脚本，控制样式时，能够用它来定位识别元素。
lang	元素内容的的语言
spellcheck	是否启动拼写和语法检查
style	行内css样式
tabindex	设置元素能够得到焦点，经过tab能够导航
title	元素相关的建议信息
translate	元素和子孙节点内容是否须要本地化

参考文章全局属性-HTML（超文本标记语言）| MDN

十6、<img>的title和alt区别

（1）title 是 global attributes（全局属性）之一，用于为元素提供附加的 advisory information。一般当鼠标滑动到元素上的时候显示。

（2）alt 是 <img> 的特有属性，是图片内容的等价描述，用于图片没法加载时显示、读屏器阅读图片。可提升图片可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

十7、初始化CSS样式

（1）浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别。

（2）初始化样式会对SEO有必定的影响，但鱼和熊掌不可兼得，力求影响最小的状况下初始化CSS样式。

十8、CSS合并方法

（1）避免使用@import引入多个CSS文件。

（2）可使用CSS工具将CSS合并为一个CSS文件，例如使用 Sass、Compass 等。

十9、CSS Sprite

1. 概念

将多个小图片拼接到一个图片中。经过 background-position 和元素尺寸调节须要显示的背景图案。

2. 优势

（1）减小HTTP请求数，极大地提升页面加载速度

（2）增长图片信息重复度，提升压缩比，减小图片大小

（3）更换风格方便，只需在一张或几张图片上修改颜色或样式便可实现

3. 缺点

（1）图片合并麻烦

（2）维护麻烦，修改一个图片可能须要重新布局整个图片，样式。

二10、display: none;和visibility: hidden;

1. 联系

他们都能让元素不可见。

2. 区别

display:none;	visibility: hidden;
会让元素彻底从渲染树消失，渲染时不占据任何空间	不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见
非继承属性，子孙节点消失因为元素从渲染树消失形成，经过修改子孙节点属性没法显示；	继承属性，子孙节点消失因为继承了hidden，经过设置visibility: visible;可让子孙节点显式
修改常规流中元素的display一般会形成文档重排。	修改visibility属性只会形成本元素的重绘。
读屏器不会读取display: none;元素内容；	会读取visibility: hidden;元素内容

二11、行内元素、块级元素和空元素

行内元素	块级元素	空元素
a	div	meta
span	h1-h6	link
img	p	img
b	ul-li	input
strong	dl-dt-dd	br
input		hr
select

二12、行内元素浮动

（1）行内元素浮动后，不会成为块级元素，可是能够设置宽和高。

（1）行内元素转换为块级元素，占一行，直接设置 display:block; 但若元素设置浮动后，再设置 display:block;则就不会占一行。

二十3、盒模型

（1）在怪异模式下，盒模型为IE盒模型而非标准模式下的W3C 盒模型，在 IE 盒模型中

box width = content width + padding left + padding right + border left + border right
box height = content height + padding top + padding bottom + border top + border bottom

（2）而在 W3C 标准的盒模型中，box 的大小就是 content 的大小。

二十4、Viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

（1）width 设置viewport宽度，为一个正整数，或字符串‘device-width’

（2）device-width 设备宽度

（3）height 设置viewport高度，通常设置了宽度，会自动解析出高度，能够不用设置

（4）initial-scale 默认缩放比例（初始缩放比例），为一个数字，能够带小数

（5）minimum-scale 容许用户最小缩放比例，为一个数字，能够带小数

（6）maximum-scale 容许用户最大缩放比例，为一个数字，能够带小数

（7）user-scalable 是否容许手动缩放

阅读更多
本文在GitHub的地址 GitHub Front-end-questions