H5前端准备

1.简述一下你对 HTML 语义化的理解？并写出一段语义化的 HTML？

词义化就是指依据內容的结构型（內容词义化），挑选适合的标识（编码词义化），有利于开发人员阅读文章和写成更雅致的编码的另外，让电脑浏览器的网络爬虫和设备非常好的分析。

用正确的标签做正确的事情

html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析

语义化的 HTML 在没有CSS 的情况下也能呈现较好的内容结构与代码结构

搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于SEO;

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

HTML5 增加了许多语义化标签如:header footer nav article ……

语义化 HTML 示例：

<!-- 这是开放的 -->

<header>

<h1>header</h1>

</header>

<section>

main

</section>

<aside>aside</aside>

<footer>

footer

</footer>

2. HTML5 有哪些新特性、移除了那些元素？如何处理 HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 是定义 HTML 标准的最新的版本。该术语表示两个不同的概念：

它是一个新版本的 HTML 语言，具有新的元素，属性和行为，

它有更大的技术集，允许更多样化和强大的网站和应用程序。这个集合有时称为

HTML5 和朋友，通常缩写为HTML5。

HTML5 新特性：

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能

的增加绘画 canvas;

用于媒介回放的 video 和 audio 元素;

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失

sessionStorage 的数据在浏览器关闭后自动删除

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

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

新的技术 webworker, websocket, Geolocation

移除元素：

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

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

处理 HTML5 新标签的浏览器兼容问题：

IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这

些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式。

可直接使用成熟的框架、比如 html5shiv

<!--[if lt IE 9]>

<script src="html5shiv.js"></script>

<![endif]-->

如何区分 HTML 和 HTML5:

DOCTYPE 声明

新增元素

3. 为什么要初始化 CSS 样式(reset css)？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初

始化往往会出现浏览器之间的页面显示差异

最简单粗暴的

* {

margin: 0;

padding: 0;

}

更好的选择 Normalize.css 相比于传统的 CSS reset，Normalize.css 是一种现代的、为

HTML5 准备的优质替代方案

Reset CSS:只选对的，不选"贵"的，因根据具体项目来做选择权衡，不应该滥用

4. css 定义的权重？

页面显示样式的优先级取决于其“特殊性”’，特殊性越高，就显示最高的，当特殊性相等

时，显示后者

特殊性表述为 4 个部分：0,0,0,0

一个选择器的特殊性如下确定：

对于选择器是#id 的属性值,特殊性值为：0,1,0,0

对于属性选择器，class 或伪类，特殊性值为：0,0,1,0

对于标签选择器或伪元素，特殊性值为：0,0,0,1

通配符‘*’对特殊性值为：0,0,0,0

内联样式特殊性值为：1,0,0,0

5. 讲讲 position 的值relative 和 absolute 的区别？

absolute：生成绝对定位的元素，相对于值不为 static 的第一个父元素进行定位

relative：生成相对定位的元素，相对于其正常位置进行定位

6. 如何水平垂直居中 div？（至少给出 2 种解决方法）

1.absolute + transform:

<div>

<div>Demo</div>

</div>

<style>

.parent{

position: relative;

}

.child {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

</style>

2.inline-block + text-align + table-cell + vertical-align

<div>

<div>Demo</div>

</div>

<style>

.parent{

text-align: center;

display: table-cell;

vertical-align: middle;

}

.child {

display: inline-block;

}

</style>

3.flex +justify-content + align-items

<div>

<div>Demo</div>

</div>

<style>

.parent{

display: flex;

justify-content: center; /* 水平居中*/

align-items: center; /*垂直居中*/

}

</style>

更多布局示例请移步 CSS常见布局解决方案 垂直居中，水平居中，各种布局

7. 渐进增强 VS 优雅降级，你怎么看？

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基

本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和

修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack

使其可以在低版本浏览器上正常浏览

二者如何抉择： 这是个人观点。。。

8. JavaScript 的数据类型

javascript 有六种基本数据类型：Undefined，Null，Boolean，Symbol(es6)，Number 和 String

还有一种复杂数据类型：对象

9. JavaScript 数组去重？(简述思路即可)

遍历数组法： 这应该是最简单的去重方法（实现思路：新建一新数组，遍历数组，值

不在新数组就加入该新数组中）

// 遍历数组去重法

function unique(arr){

var_arr = []

//遍历当前数组

for(var i= 0; i < arr.length; i++){

//如果当前数组的第 i 已经保存进了临时数组，那么跳过，

//否则把当前项 push 到临时数组里面

if (_arr.indexOf(arr[i]) == -1) _arr.push(arr[i])

}

return _arr

}

注意点：indexOf 为 ES5 的方法，注意浏览器兼容，需要自己实现 indexOf

对象键值对(hash) 法：速度快，高效，占用更大的内存换取更快的时间，用 JavaScript

中的 Object 对象来当做哈希表，hash 去重的核心是构建了一个 hash 对象来替代 indexOf

// hash 去重法

function unique(arr){

var _arr = [],

hash= {}

for (var i = 0; i < arr.length; i++) {

var item = arr[i]

var key = typeof(item) + item

// 对象的键值只能是字符串, typeof(item) + item 来去分 1 和'1'的情况

if(hash[key] !== 1){

_arr.push(item)

hash[key] = 1

}

}

return _arr

}

炫酷的 es6 Set 数据结构:ES6 提供了新的数据结构 Set。它类似于数组，但是成员的

值都是唯一的，没有重复的值

function unique(arr){

return Array.from(new Set(arr))

// Array.from 方法用于将两类对象转为真正的数组：

// 类似数组的对象（array-like object）和可遍历（iterable）的对象

}

关于 JavaScript 数组去重，还有很多很多可以讲，篇幅有限，这里介绍了几种常规的，更

多的自己去探索

10. 看如下 JavaScript代码，给出代码运行结果？（并简述原因)

var a = 2

function foo() {

console.log(a) // 1.???

console.log(bar()) // 2.???

vara = 1

function bar(){

return a

}

console.log(bar()) // 3.???

}

foo()

console.log(a) // 4.???

代码运行结果： 1: undefined，2: undefined，3: 1，4: 2

这里考察了 JavaScript 的作用域和变量提升。

在 JavaScript 中，函数、变量的声明都会被提升（hoisting）到该函数或变量所在的 scope

的顶部

JavaScript 采用词法作用域(lexical scoping)，也就是静态作用域，函数作用域在函数定义时

就决定了 ，同时在 es6 前 JavaScript 是没有块级区域(block-level scope)，而只有函数域

(function-level scope)。（在 es6 前我们可过闭包来实现类似块级作用域的效果）所谓函数作

用域就是：变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的

var a = 2

function foo() {

// var a --> 变量提升

console.log(a) // 1.???

// 虽然在函数作用域里，这个 a 还未声明，

// 实际上由于变量提升此刻的在函数头部已经定义了 a 只是尚未赋值

// 所以 1 处的值是 undefined

console.log(bar()) // 2.???

// 理解了第一个第二个也不难了

// 结果也为 undefined

vara = 1

function bar(){

return a

}

console.log(bar()) // 3.???

// 此刻 a 已经被赋值 1

// 结果为 1

}

foo()

console.log(a) // 4.???

// 函数作用域不会对全局作用域产生影响，

// 结果为 2

11. 使用原生 ajax 获取 Linus Torvalds 的 GitHub 信息，并将 JSO N 字符串解析为 JSON 对象，并讲讲对 JSON 的了解

这是对 ajax 与 json 的考察

ajax 的全称：Asynchronous Javascript And XML，异步传输+js+xml 现在差不多都用 JSON

创建 XMLHttpRequest 对象,也就是创建一个异步调用对象

创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息

设置响应 HTTP 请求状态变化的函数

发送 HTTP 请求

获取异步调用返回的数据

数据处理

下面就来贴代码吧：

var api= 'https://api.github.com/users/torvalds'

var xhr = new XMLHttpRequest()// 创建 XMLHttpRequest 对象

if(window.XMLHttpRequest){ // 兼容处理

xhr = new XMLHttpRequest()

}else{

xhr = new ActiveXObject('Microsoft.XMLHTTP')// 兼容 ie6 以下下

}

xhr.open('get',api,true) //设置请求信息

xhr.send() //提交请求

//等待服务器返回内容

xhr.onreadystatechange = function() {

if ( xhr.readyState == 4 && xhr.status == 200 ) {

console.log(JSON.parse(xhr.responseText)) // 使用 JSON.parse 解析 JSON 字符串

}

}

上面这端代码应该就是最简单的一个完整的 AJax，当然了，你可以对它进行各种封装，甚

至结合 promise，async/await。。。鸟枪换炮

JSON(JavaScriptObject Notation) 是一种轻量级的数据交换格式。它是基于 JavaScript 的一

个子集。数据格式简单, 易于读写, 占用带宽小 如：{"age":"12", "name":"back"}

JSON.parse() 方法解析一个 JSON 字符串

JSON.stringify() 方法将一个JavaScript 值转换为一个 JSON 字符串

eval 也能解析 JSON 字符串，但不推荐

关于 JSON 就不多说了，前面写过一篇 JSON 入门

12. 简单谈谈前端性能优化

减少 http 请求次数：CSS Sprites, JS、CSS 源码压缩、图片大小控制合适；网页 Gzip，

CDN托管，data缓存 ，图片服务器。

减少 DOM 操作次数，优化 javascript 性能。

少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。

尽量避免使用 CSS Expression（css 表达式)又称 Dynamic properties(动态属性)。

图片预加载，将样式表放在顶部，将脚本放在底部。

谈谈你对前端性能优化的理解

a. 请求数量：合并脚本和样式表，CSSSprites，拆分初始化负载，划分主域

b. 请求带宽：开启 GZip，精简 JavaScript，移除重复脚本，图像优化，将 icon 做成字体

c. 缓存利用：使用 CDN，使用外部 JavaScript 和 CSS，添加 Expires 头，减少 DNS 查找，配置 ETag，使 AjaX 可缓存

d. 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出

e. 代码校验：避免 CSS 表达式，避免重定向

web storage 和 cookie 的区别

a. Cookie 的大小是受限的

b. 每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费了带宽

c. cookie还需要指定作用域，不可以跨域调用

d. Web Storage 拥有 setItem,getItem 等方法，cookie 需要前端开发者自己封装 setCookie，

getCookie

e. Cookie 的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而 Web Storage

仅仅是为了在本地“存储”数据而生

f. IE7、IE6 中的 UserData 通过简单的代码封装可以统一到所有的浏览器都支持 web storage

请说说你对标签语义化的理解？

a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于

标签来确定上下文和各个关键字的权重；

c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

d. 便于团队开发和维护，语义化更具可读性，遵循 W3C 标准的团队都遵循这个标准，可以

减少差异化。

简述一下 src 与 href 的区别

src 用于替换当前元素；href 用于在当前文档和引用资源之间确立联系。

src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位

置

href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或

当前文档（链接）之间的链接

一次完整的 HTTP 事务是怎样的一个过程？

基本流程：

a. 域名解析

b. 发起 TCP 的 3 次握手

c. 建立 TCP 连接后发起 http 请求

d. 服务器端响应 http 请求，浏览器得到 html 代码

e. 浏览器解析 html 代码，并请求 html 代码中的资源

f. 浏览器对页面进行渲染呈现给用户

JS

1. JS 继承的三种方式

（1）原型继承，这种原型继承的特点：既继承了父类的模板，又继承了父类的原型对

象。优点是继承了父类的模板，又继承了父类的原型对象，缺点就是父类实例传参，不

是子类实例化传参，不符合常规语言的写法。

（2）类继承（借用构造函数的方式继承），这种原型继承的特点：继承了父类的模板，

不继承了父类的原型对象。优点是方便了子类实例传参，缺点就是不继承了父类的原型

对象

（3）混合继承（原型继承和类继承），这种原型继承的特点：既继承了父类的模板，又

继承了父类的原型对象。优点方便了子类实例传参，缺点就是 Boy.pertotype = new

Persion() 函数又实例一次，函数内部变量又重复实例一次，大程序时候会很好性能。

一次 js 请求一般情况下有哪些地方会有缓存处理？

a. 浏览器端存储

b. 浏览器端文件缓存

c. HTTP 缓存 304

d. 服务器端文件类型缓存

e. 表现层&DOM 缓存

null 和 undefined 的区别：

1、null 用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。Null 表示“没有对象”，即该处不应该有值。典型的用法是：

（1）作为函数的参数，表示该函数的参数不是对象

（2）作为对象原型链的终点。

2、当声明的变量还未被初始化时，变量的默认值为 undefined，undefined 表示“缺少值”，

就是此处应该有一个值，但是还没有定义。

（1）变量被声明了，但没有赋值时，就等于 undefined。

（2）调用函数时，应该提供的参数没有提供，该参数就等于 undefined

（3）对象没有赋值的属性，该属性的值为 undefined

（4）函数没有返回值时，默认返回 undefined

New 命令发生什么

1、创建一个新对象

2、将构造函数的作用域赋给新对象（this）

3、执行构造函数中的代码（为新对象添加属性）

4、返回该对象。

本文来源于：H5前端准备-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。