共计 5679 个字符，预计需要花费 15 分钟才能阅读完成。
1、<img> 的 title 和 alt 有什么区别
alt 属性和 title 属性相同点：
它们都会出现浮层，显示自己设置的图片相关的内容。
alt 属性和 title 属性不同点：
alt 属性:1. 当图片加载不出来的时候，就会在图片未显示的地方出现一段 alt 设置的属性内容。这个属性的作用是为了给未加载的图片显示提示信息，即使在网络比较差的时候，用户也可以知道图片的内容，方便用户浏览网页。同时在程序员对网站维护的时候也能更快的查找到问题。2. 浏览器的搜索引擎可以通过 alt 属性的文字描述来获取图片。
title 属性：title 属性可以用在任何的元素上，当用户把鼠标移动到元素上时，就会显示预先设置的 title 的内容，起到对图片说明的作用，实质上就是对图片的解释和备注。
如果图片设置了 title 属性和 alt 属性，鼠标悬停或者经过图片区域的时候，只会显示 title 属性设置的内容。
2、从浏览器地址栏输⼊ url 到显示⻚⾯的步骤
浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收⽂件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS 等）进⾏语法解析，建⽴相应的内部数据结构
（如 HTML 的 DOM）；
载⼊解析到的资源⽂件，渲染⻚⾯，完成。
3、HTTP 状态码及其含义
1XX：信息状态码
100 Continue 继续，⼀般在发送 post 请求时，已发送了 http header 之后服务端
将返回此信息，表示确认，之后发送具体参数信息
2XX：成功状态码
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
3XX：重定向
301 Moved Permanently 请求的⽹⻚已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使⽤ GET 请求新的 URI。
304 Not Modified ⾃从上次请求后，请求的⽹⻚未修改过。
4XX：客户端错误
400 Bad Request 服务器⽆法理解请求的格式，客户端不应当尝试再次使⽤相同的内
容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁⽌访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
5XX: 服务器错误
500 Internal Server Error 最常⻅的服务器端错误。
503 Service Unavailable 服务器端暂时⽆法处理请求（可能是过载或维护）。
4、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 新标签
浏览器⽀持新标签后，还需要添加标签默认的样式
当然也可以直接使⽤成熟的框架、⽐如 html5shim
5、请描述⼀下 cookies，sessionStorage 和 localStorage 的区别？
cookie 是⽹站为了标示⽤户身份⽽储存在⽤户本地终端（Client Side）上的数据（通常
经过加密）
cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回
传递
sessionStorage 和 localStorage 不会⾃动把数据发给服务器，仅在本地保存
存储⼤⼩：
cookie 数据⼤⼩不能超过 4k
sessionStorage 和 localStorage 虽然也有存储⼤⼩的限制，但⽐ cookie ⼤得多，可以达到 5M 或更⼤
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据
sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除
cookie 设置的 cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭
6、⾏内元素有哪些？块级元素有哪些？空 (void) 元素有那些？⾏内元素和块级元素有什么区别？
⾏内元素有：a b span img input select strong
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4… p
空元素：
<img> <input> <link> <meta>
⾏内元素不可以设置宽⾼，不独占⼀⾏
块级元素可以设置宽⾼，独占⼀⾏
7、Canvas 和 SVG 有什么区别？
svg 绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点，能够⽅便的绑定事件或⽤来修改。canvas 输出的是⼀整幅画布
svg 输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯⻮。⽽ canvas 输出标量画布，就像⼀张图⽚⼀样，放⼤会失真或者锯⻮
8、如何在⻚⾯上实现⼀个圆形的可点击区域？
svg
border-radius
纯 js 实现 需要求⼀个点在不在圆上简单算法、获取⿏标坐标等等
9、浏览器的内核分别是什么
IE : trident 内核
Firefox：gecko 内核
Safari : webkit 内核
Opera : 以前是 presto 内核，Opera 现已改⽤ Google – Chrome 的 Blink 内核
Chrome:Blink (基于 webkit，Google 与 Opera Software 共同开发)
10、viewport
// width 设置 viewport 宽度，为⼀个正整数，或字符串‘device-width’
// device-width 设备宽度
// height 设置 viewport ⾼度，⼀般设置了宽度，会⾃动解析出⾼度，可以不⽤设置
// initial-scale 默认缩放⽐例（初始缩放⽐例），为⼀个数字，可以带⼩数
// minimum-scale 允许⽤户最⼩缩放⽐例，为⼀个数字，可以带⼩数
// maximum-scale 允许⽤户最⼤缩放⽐例，为⼀个数字，可以带⼩数
// user-scalable 是否允许⼿动缩放
怎样处理 移动端 1px 被 渲染成 2px 问题
局部处理
mate 标签中的 viewport 属性，initial-scale 设置为 1
rem 按照设计稿标准⾛，外加利⽤ transfrome 的 scale(0.5) 缩⼩⼀倍即可；
全局处理
mate 标签中的 viewport 属性，initial-scale 设置为 0.5
rem 按照设计稿标准⾛即可
11、简述⼀下 src 与 href 的区别
src ⽤于替换当前元素，href ⽤于在当前⽂档和引⽤资源之间确⽴联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所
在位置；在请求 src 资源时会将其指向的资源下载并应⽤到⽂档内，例如 js 脚本，
img 图⽚和 frame 等元素
<script src =”js.js”></script> 当浏览器解析到该元素时，会暂停其他
资源的下载和处理，直到将该资源加载、编译、执⾏完毕，图⽚和框架等元素
也如此，类似于将所指向资源嵌⼊当前标签内。这也是为什么将 js 脚本放在底
部⽽不是头部
href 是 Hypertext Reference 的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚
点）或当前⽂档（链接）之间的链接，如果我们在⽂档中添加
<link href=”common.css” rel=”stylesheet”/> 那么浏览器会识别该⽂档为 css ⽂
件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤ link ⽅
式来加载 css，⽽不是使⽤ @import ⽅式
12、display: none; 与 visibility: hidden; 的区别
display:none ; 会让元素完全从渲染树中消失，渲染的时候不占据任何空间；
visibility: hidden ; 不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可⻅
display: none ; 是⾮继承属性，⼦孙节点消失由于元素从渲染树消失造成，通过修改⼦孙节点属性⽆法显示；visibility: hidden; 是继承属性，⼦孙节点消失由于继承了 hidden，通过设置 visibility: visible; 可以让⼦孙节点显式
修改常规流中元素的 display 通常会造成⽂档重排。修改 visibility 属性只会造成本元素的重绘。
读屏器不会读取 display: none ; 元素内容；会读取 visibility: hidden; 元素内容
13、link 与 @import 的区别
1. link 是 HTML ⽅式，@import 是 CSS ⽅式
2. link 最⼤限度⽀持并⾏下载，@import 过多嵌套导致串⾏下载，出现 FOUC (⽂档样式
短暂失效)
3. link 可以通过 rel=”alternate stylesheet” 指定候选样式
4. 浏览器对 link ⽀持早于 @import，可以使⽤ @import 对⽼浏览器隐藏样式
5. @import 必须在样式规则之前，可以在 css ⽂件中引⽤其他⽂件
6. 总体来说：link 优于 @import
14、清除浮动的⼏种⽅式，各⾃的优缺点
⽗级 div 定义 height
结尾处加空 div 标签 clear:both
⽗级 div 定义伪类:after 和 zoom（推荐）
⽗级 div 定义 overflow:hidden
⽗级 div 也浮动，需要定义宽度
结尾处加 br 标签 clear:both
15、css3 有哪些新特性
新增各种 css 选择器
圆⻆ border-radius
多列布局
阴影和反射
⽂字特效 text-shadow
线性渐变
旋转 transform
16、CSS3 新增伪类有那些？
p:first-of-type 选择属于其⽗元素的⾸个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其⽗元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其⽗元素唯⼀的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其⽗元素的唯⼀⼦元素的每个 <p> 元素。
p:nth-child(2) 选择属于其⽗元素的第⼆个⼦元素的每个 <p> 元素。
:after 在元素之前添加内容, 也可以⽤来做清除浮动。
:before 在元素之后添加内容。
:enabled 已启⽤的表单元素。
:disabled 已禁⽤的表单元素。
:checked 单选框或复选框被选中。
17、CSS 优先级算法如何计算？
!important 大于一切 > 内联 1000 > id 100 > class 10 > tag 1 ;
18、介绍⼀下标准的 CSS 的盒⼦模型？低版本 IE 的盒⼦模型有什么不同的？
有两种，IE 盒⼦模型、W3C 盒⼦模型；
盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；
区 别：IE 的 c ontent 部分把 border 和 padding 计算了进去;
19、如果需要⼿动写动画，你认为最⼩时间间隔是多久，为什么？（阿⾥）
多数显示器默认频率是 60Hz，即 1 秒刷新 60 次，所以理论上最⼩间隔为 — 1/60*1000ms = 16.7ms
20、如何美化 CheckBox
<label> 属性 for 和 id
隐藏原⽣的 <input>
:checked + <label>
21、rgba()和 opacity 的透明效果有什么不同？
rgba() 和 opacity 都能实现透明效果，但最⼤的不同是 opacity 作⽤于元素，以及元素内的所有内容的透明度，
⽽ rgba() 只作⽤于元素的颜⾊或其背景⾊。（设置 rgba 透明的元素的⼦元素不会继承透明效果！）
22、[“1”, “2”, “3”].map(parseInt) 答案是多少
[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix)，其中 radix 表示解析时⽤的基数。
map 传了 3 个(element, index, array)，对应的 radix 不合法导致解析失败。
23、闭包
闭包就是能够读取其他函数内部变量的函数
闭包是指有权访问另⼀个函数作⽤域中变量的函数，创建闭包的最常⻅的⽅式就是在⼀个
函数内创建另⼀个函数，通过另⼀个函数访问这个函数的局部变量, 利⽤闭包可以突破作⽤链域
闭包的特性：
. 函数内再嵌套函数
. 内部函数可以引⽤外层的参数和变量
. 参数和变量不会被垃圾回收机制回收
说说你对闭包的理解
使⽤闭包主要是为了设计私有的⽅法和变量。闭包的优点是可以避免全局变量的污染，缺
点是闭包会常驻内存，会增⼤内存使⽤量，使⽤不当很容易造成内存泄露。在 js 中，函数即
闭包，只有函数才会产⽣作⽤域的概念
闭包 的最⼤⽤处有两个，⼀个是可以读取函数内部的变量，另⼀个就是让这些变量始终保持在内存中
闭包的另⼀个⽤处，是封装对象的私有属性和私有⽅法
好处：能够实现封装和缓存等；
坏处：就是消耗内存、不正当使⽤会造成内存溢出的问题
使⽤闭包的注意点
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很⼤，所以不能滥⽤闭包，否则会造成⽹⻚的性能问题，在 IE 中可能导致内存泄露
解决⽅法是，在退出函数之前，将不使⽤的局部变量全部删除
24、介绍 js 的基本数据类型
Undefined、Null、Boolean、Number、String
25、如何使⽤ CSS 实现硬件加速？
⼀般触发硬件加速的 CSS 属性有 transform、opacity、filter，为了避免 2D 动画，在 开始和结束的时候的 repaint 操作，⼀般使⽤ tranform:translateZ(0)