html、css简述面试题

hTML， HTTP，web综合问题

一、前端须要注意哪些SEO

• 合理的title、description、keywords：搜索对着三项的权重逐个减少，title值强调重点便可，重要关键词出现不要超过2次，并且要靠前，不一样页面title要有所不一样；description把页面内容高度归纳，长度合适，不可过度堆砌关键词，不一样页面description有所不一样；keywords列举出重要关键词便可
• 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容必定会被抓取
• 重要内容不要用js输出：爬虫不会执行js获取内容
• 少用iframe：搜索引擎不会抓取iframe中的内容
• 非装饰性图片必须加alt
• 提升网站速度：网站速度是搜索引擎排序的一个重要指标

二、<img>的title和alt有什么区别

• 一般当鼠标滑动到元素上的时候显示
• alt是<img>的特有属性，是图片内容的等价描述，用于图片没法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

三、HTTP的几种请求方法用途

• 一、GET方法

  • 发送一个请求来取得服务器上的某一资源

• 二、POST方法

  • 向URL指定的资源提交数据或附加新的数据

• 三、PUT方法

  • 跟POST方法很像，也是想服务器提交数据。可是，它们之间有不一样。PUT指定了资源在服务器上的位置，而POST没有

• 四、HEAD方法

  • 只请求页面的首部

• 五、DELETE方法

  • 删除服务器上的某资源

• 六、OPTIONS方法

  • 它用于获取当前URL所支持的方法。若是请求成功，会有一个Allow的头包含相似“GET,POST”这样的信息

• 七、TRACE方法

  • TRACE方法被用于激发一个远程的，应用层的请求消息回路

• 八、CONNECT方法

  • 把请求链接转换到透明的TCP/IP通道

四、从浏览器地址栏输入url到显示页面的步骤

• 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
• 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
• 浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，创建相应的内部数据结构（如HTML的DOM）；
• 载入解析到的资源文件，渲染页面，完成。

五、如何进行网站性能优化

• content方面

  1. 减小HTTP请求：合并文件、CSS精灵、inline Image
  2. 减小DNS查询：DNS缓存、将资源分布到恰当数量的主机名
  3. 减小DOM元素数量

• Server方面

  1. 使用CDN
  2. 配置ETag
  3. 对组件使用Gzip压缩

• Cookie方面

  1. 减少cookie大小

• css方面

  1. 将样式表放到页面顶部
  2. 不使用CSS表达式
  3. 使用<link>不使用@import

• Javascript方面

  1. 将脚本放到页面底部
  2. 将javascript和css从外部引入
  3. 压缩javascript和css
  4. 删除不须要的脚本
  5. 减小DOM访问

• 图片方面

  1. 优化图片：根据实际颜色须要选择色深、压缩
  2. 优化css精灵
  3. 不要在HTML中拉伸图片

六、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 服务器端暂时没法处理请求（多是过载或维护）。

七、语义化的理解

• 用正确的标签作正确的事情！
• html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
• 在没有样式CSS状况下也以一种文档格式显示，而且是容易阅读的。
• 搜索引擎的爬虫依赖于标记来肯定上下文和各个关键字的权重，利于 SEO。
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

八、介绍一下你对浏览器内核的理解？

• 主要分红两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

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

• JS引擎则：解析和执行javascript来实现网页的动态效果
• 最开始渲染引擎和JS引擎并无区分的很明确，后来JS引擎愈来愈独立，内核就倾向于只指渲染引擎

九、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

十、HTML5的离线储存怎么使用，工做原理能不能解释一下？

• 在用户没有与因特网链接时，能够正常访问站点或应用，在用户与因特网链接时，更新用户机器上的缓存文件

• 原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，经过这个文件上的解析清单离线存储资源，这些资源就会像cookie同样被存储了下来。以后当网络在处于离线状态下时，浏览器会经过被离线存储的数据进行页面展现

• 如何使用：

  • 页面头部像下面同样加入一个manifest的属性；
  • 在cache.manifest文件的编写离线存储的资源
  • 在离线状态时，操做window.applicationCache进行需求实现

1 2 3 4 5 6 7 8 9

CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html

十一、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

• 在线的状况下，浏览器发现html头部有manifest属性，它会请求manifest文件，若是是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源而且进行离线存储。若是已经访问过app而且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，而后浏览器会对比新的manifest文件与旧的manifest文件，若是文件没有发生改变，就不作任何操做，若是文件改变了，那么就会从新下载文件中的资源并进行离线存储。

• 离线的状况下，浏览器就直接使用离线存储的资源。

十二、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

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

• 存储大小：

  • cookie数据大小不能超过4k
  • sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大

• 有期时间：

  • localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除
  • cookie 设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭

1三、iframe有那些缺点？

• iframe会阻塞主页面的Onload事件
• 搜索引擎的检索程序没法解读这种页面，不利于SEO
• iframe和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载
• 使用iframe以前须要考虑这两个缺点。若是须要使用iframe，最好是经过javascript动态给iframe添加src属性值，这样能够绕开以上两个问题

1四、WEB标准以及W3C标准是什么?

• 标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离

1五、xhtml和html有什么区别?

• 一个是功能上的差异

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

• 另外是书写习惯的差异

  • XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素

1六、Doctype做用? 严格模式与混杂模式如何区分？它们有何意义?

• 页面被加载的时，link会同时被加载，而@imort页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
  import只在IE5以上才能识别，而link是XHTML标签，无兼容问题
  link方式的样式的权重 高于@import的权重
• <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签以前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档
• 严格模式的排版和 JS 运做模式是 以该浏览器支持的最高标准运行
• 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。 DOCTYPE不存在或格式不正确会致使文档以混杂模式呈现

1七、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？

• 行内元素有：a b span img input select strong
• 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
• 空元素：<br> <hr> <img> <input> <link> <meta>
• 行内元素不能够设置宽高，不独占一行
• 块级元素能够设置宽高，独占一行

1八、HTML全局属性(global attribute)有哪些

• class:为元素设置类标识
• data-*: 为元素增长自定义属性
• draggable: 设置元素是否可拖拽
• id: 元素id，文档内惟一
• lang: 元素内容的的语言
• style: 行内css样式
• title: 元素相关的建议信息

1九、Canvas和SVG有什么区别？

• svg绘制出来的每个图形的元素都是独立的DOM节点，可以方便的绑定事件或用来修改。canvas输出的是一整幅画布
• svg输出的图形是矢量图形，后期能够修改参数来自由放大缩小，不会是真和锯齿。而canvas输出标量画布，就像一张图片同样，放大会失真或者锯齿

20、HTML5 为何只须要写 <!DOCTYPE HTML>？

• HTML5 不基于 SGML，所以不须要对DTD进行引用，可是须要doctype来规范浏览器的行为
• 而HTML4.01基于SGML,因此须要对DTD进行引用，才能告知浏览器文档所使用的文档类型

2一、如何在页面上实现一个圆形的可点击区域？

• svg
• border-radius
• 纯js实现 须要求一个点在不在圆上简单算法、获取鼠标坐标等等

2二、网页验证码是干吗的，是为了解决什么安全问题

• 区分用户是计算机仍是人的公共全自动程序。能够防止恶意破解密码、刷票、论坛灌水
• 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试

$CSS部分

一、css sprite是什么,有什么优缺点

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

• 优势：

  • 减小HTTP请求数，极大地提升页面加载速度
  • 增长图片信息重复度，提升压缩比，减小图片大小
  • 更换风格方便，只需在一张或几张图片上修改颜色或样式便可实现

• 缺点：

  • 图片合并麻烦
  • 维护麻烦，修改一个图片可能须要重新布局整个图片，样式

二、display: none;与visibility: hidden;的区别

• 联系：它们都能让元素不可见

• 区别：

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

三、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

四、什么是FOUC?如何避免

• Flash Of Unstyled Content：用户定义样式表加载以前浏览器使用默认样式显示文档，用户样式加载渲染以后再重新显示文档，形成页面闪烁。
• 解决方法：把样式表放到文档的head

五、如何建立块级格式化上下文(block formatting context),BFC有什么用

• 建立规则：

  • 根元素
  • 浮动元素（float不是none）
  • 绝对定位元素（position取值为absolute或fixed）
  • display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素
  • overflow不是visible的元素

• 做用：

  • 能够包含浮动元素
  • 不被浮动元素覆盖
  • 阻止父子元素的margin折叠

六、display,float,position的关系

• 若是display为none，那么position和float都不起做用，这种状况下元素不产生框
• 不然，若是position值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。
• 不然，若是float不是none，框是浮动的，display根据下表进行调整
• 不然，若是元素是根元素，display根据下表进行调整
• 其余状况下display的值为指定值
• 总结起来：绝对定位、浮动、根元素都须要调整display

七、清除浮动的几种方式，各自的优缺点

• 父级div定义height
• 结尾处加空div标签clear:both
• 父级div定义伪类:after和zoom
• 父级div定义overflow:hidden
• 父级div也浮动，须要定义宽度
• 结尾处加br标签clear:both
• 比较好的是第3种方式，好多网站都这么用

八、为何要初始化CSS样式?

• 由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别。
• 固然，初始化样式会对SEO有必定的影响，但鱼和熊掌不可兼得，但力求影响最小的状况下初始化

九、css3有哪些新特性

• 新增各类css选择器
• 圆角 border-radius
• 多列布局
• 阴影和反射
• 文字特效text-shadow
• 线性渐变
• 旋转transform

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 单选框或复选框被选中

十、display有哪些值？说明他们的做用

• block 象块类型元素同样显示。
• none 缺省值。象行内元素类型同样显示。
• inline-block 象行内元素同样显示，但其内容象块类型元素同样显示。
• list-item 象块类型元素同样显示，并添加样式列表标记。
• table 此元素会做为块级表格来显示
• inherit 规定应该从父元素继承 display 属性的值

十一、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不一样的？

• 有两种， IE盒子模型、W3C盒子模型；
• 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
• 区 别： IE的content部分把 border 和 padding计算了进去;

十二、CSS优先级算法如何计算？

• 优先级就近原则，同权重状况下样式定义最近者为准
• 载入样式以最后载入的定位为准
• 优先级为: !important > id > class > tag important 比 内联优先级高

1三、对BFC规范的理解？

• 它决定了元素如何对其内容进行定位,以及与其余元素的关系和相互做用

1四、谈谈浮动和清除浮动

• 浮动的框能够向左或向右移动，直到他的外边缘碰到包含框或另外一个浮动框的边框为止。因为浮动框不在文档的普通流中，因此文档的普通流的块框表现得就像浮动框不存在同样。浮动的块框会漂浮在文档普通流的块框上

1五、position的值， relative和absolute定位原点是

• absolute：生成绝对定位的元素，相对于 static 定位之外的第一个父元素进行定位
• fixed：生成绝对定位的元素，相对于浏览器窗口进行定位
• relative：生成相对定位的元素，相对于其正常位置进行定位
• static 默认值。没有定位，元素出如今正常的流中
• inherit 规定从父元素继承 position 属性的值

1六、display:inline-block 何时不会显示间隙？(携程)

• 移除空格
• 使用margin负值
• 使用font-size:0
• letter-spacing
• word-spacing

1七、PNG,GIF,JPG的区别及如何选

• GIF

  • 8位像素，256色
  • 无损压缩
  • 支持简单动画
  • 支持boolean透明
  • 适合简单动画

• JPEG

  • 颜色限于256
  • 有损压缩
  • 可控制压缩质量
  • 不支持透明
  • 适合照片
• PNG
  • 有PNG8和truecolor PNG
  • PNG8相似GIF颜色上限为256，文件小，支持alpha透明度，无动画
  • 适合图标、背景、按钮

1八、行内元素float:left后是否变为块级元素？

• 浮动后，行内元素不会成为块状元素，可是能够设置宽高。行内元素要想变成块状元素，占一行，直接设置display:block;。但若是元素设置了浮动后再设置display:block;那就不会占一行。

1九、在网页中的应该使用奇数仍是偶数的字体？为何呢？

• 偶数字号相对更容易和 web 设计的其余部分构成比例关系

20、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的做用

• 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素
• 用于区分伪类和伪元素

2一、若是须要手动写动画，你认为最小时间间隔是多久，为何？（阿里）

• 多数显示器默认频率是60Hz，即1秒刷新60次，因此理论上最小间隔为1/60＊1000ms ＝ 16.7ms

2二、CSS合并方法

• 避免使用@import引入多个css文件，可使用CSS工具将CSS合并为一个CSS文件，例如使用Sass\Compass等

2三、CSS不一样选择器的权重(CSS层叠的规则)

• ！important规则最重要，大于其它规则
• 行内样式规则，加1000
• 对于选择器中给定的各个ID属性值，加100
• 对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加10
• 对于选择其中给定的各个元素标签选择器，加1
• 若是权值同样，则按照样式规则的前后顺序来应用，顺序靠后的覆盖靠前的规则

2四、列出你所知道能够改变页面布局的属性

• position、display、float、width、height、margin、padding、top、left、right、`

2五、CSS在性能优化方面的实践

• css压缩与合并、Gzip压缩
• css文件放在head里、不要用@import
• 尽可能用缩写、避免用滤镜、合理使用选择器

2六、CSS3动画（简单动画的实现，如旋转等）

• 依靠CSS3中提出的三个属性：transition、transform、animation
• transition：定义了元素在变化过程当中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
• transform：定义元素的变化结果，包含rotate、scale、skew、translate。
• animation：动画定义了动做的每一帧（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

2七、base64的原理及优缺点

• 优势能够加密，减小了http请求
• 缺点是须要消耗CPU进行编解码

$HTML， HTTP，web综合问题

• 一、前端须要注意哪些SEO
• 二、<img>的title和alt有什么区别
• 三、HTTP的几种请求方法用途
• 四、从浏览器地址栏输入url到显示页面的步骤
• 五、如何进行网站性能优化
• 六、HTTP状态码及其含义
• 七、语义化的理解
• 八、介绍一下你对浏览器内核的理解
• 九、html5有哪些新特性、移除了那些元素？
• 十、HTML5的离线储存怎么使用，工做原理能不能解释一下？
• 十一、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢
• 十二、请描述一下 cookies，sessionStorage 和 localStorage 的区别
• 1三、iframe有那些缺点？
• 1四、WEB标准以及W3C标准是什么?
• 1五、xhtml和html有什么区别?
• 1六、Doctype做用? 严格模式与混杂模式如何区分？它们有何意义?
• 1七、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？
• 1八、HTML全局属性(global attribute)有哪些
• 1九、Canvas和SVG有什么区别？
• 20、HTML5 为何只须要写 <!DOCTYPE HTML>？
• 2一、如何在页面上实现一个圆形的可点击区域？
• 2二、网页验证码是干吗的，是为了解决什么安全问题

$CSS部分

• 一、css sprite是什么,有什么优缺点
• 二、display: none;与visibility: hidden;的区别
• 三、link与@import的区别
• 四、什么是FOUC?如何避免
• 五、如何建立块级格式化上下文(block formatting context),BFC有什么用
• 七、清除浮动的几种方式，各自的优缺点
• 八、为何要初始化CSS样式?
• 九、css3有哪些新特性
• 十、display有哪些值？说明他们的做用
• 十一、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不一样的？
• 十二、CSS优先级算法如何计算？
• 1三、对BFC规范的理解？
• 1四、谈谈浮动和清除浮动
• 1五、position的值， relative和absolute`定位原点是
• 1六、display:inline-block 何时不会显示间隙？(携程)
• 1七、PNG,GIF,JPG的区别及如何选
• 1八、行内元素float:left后是否变为块级元素？
• 1九、在网页中的应该使用奇数仍是偶数的字体？为何呢？
• 20、::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的做用
• 2一、若是须要手动写动画，你认为最小时间间隔是多久，为何？（阿里）
• 2二、CSS合并方法
• 2三、CSS不一样选择器的权重(CSS层叠的规则)
• 2四、列出你所知道能够改变页面布局的属性
• 2五、CSS在性能优化方面的实践
• 2六、CSS3动画（简单动画的实现，如旋转等）
• 2七、base64的原理及优缺点

$JavaScript

• 一、闭包
• 二、说说你对做用域链的理解
• 三、JavaScript原型，原型链 ? 有什么特色？
• 四、请解释什么是事件代理
• 五、Javascript如何实现继承？
• 六、谈谈This对象的理解
• 七、事件模型
• 八、new操做符具体干了什么呢?
• 九、Ajax原理
• 十一、模块化开发怎么作？
• 十二、异步加载JS的方式有哪些？
• 1三、那些操做会形成内存泄漏？
• 1四、XML和JSON的区别？
• 1五、谈谈你对webpack的见解
• 1七、常见web安全及防御原理
• 1八、用过哪些设计模式？
• 1九、为何要有同源限制？
• 20、offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
• 2一、javascript有哪些方法定义对象
• 2二、常见兼容性问题？
• 2二、说说你对promise的了解
• 2三、你以为jQuery源码有哪些写的好的地方
• 2五、Node的应用场景
• 2六、谈谈你对AMD、CMD的理解
• 2七、那些操做会形成内存泄漏？
• 2八、web开发中会话跟踪的方法有哪些
• 2九、介绍js的基本数据类型
• 30、介绍js有哪些内置对象？
• 3一、说几条写JavaScript的基本规范？
• 3二、JavaScript有几种类型的值？，你能画一下他们的内存图吗？
• 3三、javascript建立对象的几种方式？
• 3四、eval是作什么的？
• 3五、null，undefined 的区别？
• 3六、[“1”, “2”, “3”].map(parseInt) 答案是多少？
• 3七、javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？
• 3八、JSON的了解？
• 3九、js延迟加载的方式有哪些？
• 40、同步和异步的区别?
• 4一、渐进加强和优雅降级
• 4二、defer和async
• 4三、说说严格模式的限制
• 4四、attribute和property的区别是什么？
• 4五、谈谈你对ES6的理解
• 4六、ECMAScript6 怎么写class么，为何会出现class这种东西?
• 4七、什么是面向对象编程及面向过程编程，它们的异同和优缺点
• 4八、从你本身的理解来看，你是如何理解面向对象编程的，它解决了什么问题，有什么做用
• 4九、对web标准、可用性、可访问性的理解

$编程题

• 一、写一个通用的事件侦听器函数
• 二、如何判断一个对象是否为数组
• 三、冒泡排序
• 四、快速排序
• 五、编写一个方法 求一个字符串的字节长度

$其余

• 一、谈谈你对重构的理解
• 二、什么样的前端代码是好的
• 三、对前端工程师这个职位是怎么样理解的？它的前景会怎么样？
• 四、你以为前端工程的价值体如今哪
• 五、平时如何管理你的项目？

人事面

• 面试完你还有什么问题要问的吗
• 你有什么爱好?
• 你最大的优势和缺点是什么?
• 你为何会选择这个行业，职位?
• 你以为你适合从事这个岗位吗?
• 你有什么职业规划?
• 你对工资有什么要求?
• 如何看待前端开发？
• 将来三到五年的规划是怎样的？

常问

• 自我介绍
• 你的项目中技术难点是什么？遇到了什么问题？你是怎么解决的？
• 你认为哪一个项目作得最好？
• 最近在看哪些前端方面的书？
• 平时是如何学习前端开发的？
• 你最有成就感的一件事
• 你是怎么学习前端的

$HTML， HTTP，web综合问题

一、前端须要注意哪些SEO

• 合理的title、description、keywords：搜索对着三项的权重逐个减少，title值强调重点便可，重要关键词出现不要超过2次，并且要靠前，不一样页面title要有所不一样；description把页面内容高度归纳，长度合适，不可过度堆砌关键词，不一样页面description有所不一样；keywords列举出重要关键词便可
• 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容必定会被抓取
• 重要内容不要用js输出：爬虫不会执行js获取内容
• 少用iframe：搜索引擎不会抓取iframe中的内容
• 非装饰性图片必须加alt
• 提升网站速度：网站速度是搜索引擎排序的一个重要指标

二、<img>的title和alt有什么区别

• 一般当鼠标滑动到元素上的时候显示
• alt是<img>的特有属性，是图片内容的等价描述，用于图片没法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

三、HTTP的几种请求方法用途

• 一、GET方法

  • 发送一个请求来取得服务器上的某一资源

• 二、POST方法

  • 向URL指定的资源提交数据或附加新的数据

• 三、PUT方法

  • 跟POST方法很像，也是想服务器提交数据。可是，它们之间有不一样。PUT指定了资源在服务器上的位置，而POST没有

• 四、HEAD方法

  • 只请求页面的首部

• 五、DELETE方法

  • 删除服务器上的某资源

• 六、OPTIONS方法

  • 它用于获取当前URL所支持的方法。若是请求成功，会有一个Allow的头包含相似“GET,POST”这样的信息

• 七、TRACE方法

  • TRACE方法被用于激发一个远程的，应用层的请求消息回路

• 八、CONNECT方法

  • 把请求链接转换到透明的TCP/IP通道

四、从浏览器地址栏输入url到显示页面的步骤

• 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
• 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
• 浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，创建相应的内部数据结构（如HTML的DOM）；
• 载入解析到的资源文件，渲染页面，完成。

五、如何进行网站性能优化

• content方面

  1. 减小HTTP请求：合并文件、CSS精灵、inline Image
  2. 减小DNS查询：DNS缓存、将资源分布到恰当数量的主机名
  3. 减小DOM元素数量

• Server方面

  1. 使用CDN
  2. 配置ETag
  3. 对组件使用Gzip压缩

• Cookie方面

  1. 减少cookie大小

• css方面

  1. 将样式表放到页面顶部
  2. 不使用CSS表达式
  3. 使用<link>不使用@import

• Javascript方面

  1. 将脚本放到页面底部
  2. 将javascript和css从外部引入
  3. 压缩javascript和css
  4. 删除不须要的脚本
  5. 减小DOM访问

• 图片方面

  1. 优化图片：根据实际颜色须要选择色深、压缩
  2. 优化css精灵
  3. 不要在HTML中拉伸图片

六、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 服务器端暂时没法处理请求（多是过载或维护）。

七、语义化的理解

• 用正确的标签作正确的事情！
• html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
• 在没有样式CSS状况下也以一种文档格式显示，而且是容易阅读的。
• 搜索引擎的爬虫依赖于标记来肯定上下文和各个关键字的权重，利于 SEO。
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

八、介绍一下你对浏览器内核的理解？

• 主要分红两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

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

• JS引擎则：解析和执行javascript来实现网页的动态效果
• 最开始渲染引擎和JS引擎并无区分的很明确，后来JS引擎愈来愈独立，内核就倾向于只指渲染引擎

九、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

十、HTML5的离线储存怎么使用，工做原理能不能解释一下？

• 在用户没有与因特网链接时，能够正常访问站点或应用，在用户与因特网链接时，更新用户机器上的缓存文件

• 原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，经过这个文件上的解析清单离线存储资源，这些资源就会像cookie同样被存储了下来。以后当网络在处于离线状态下时，浏览器会经过被离线存储的数据进行页面展现

• 如何使用：

  • 页面头部像下面同样加入一个manifest的属性；
  • 在cache.manifest文件的编写离线存储的资源
  • 在离线状态时，操做window.applicationCache进行需求实现

1 2 3 4 5 6 7 8 9

CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html

十一、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

• 在线的状况下，浏览器发现html头部有manifest属性，它会请求manifest文件，若是是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源而且进行离线存储。若是已经访问过app而且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，而后浏览器会对比新的manifest文件与旧的manifest文件，若是文件没有发生改变，就不作任何操做，若是文件改变了，那么就会从新下载文件中的资源并进行离线存储。

• 离线的状况下，浏览器就直接使用离线存储的资源。

十二、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

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

• 存储大小：

  • cookie数据大小不能超过4k
  • sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大

• 有期时间：

  • localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除
  • cookie 设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭

1三、iframe有那些缺点？

• iframe会阻塞主页面的Onload事件
• 搜索引擎的检索程序没法解读这种页面，不利于SEO
• iframe和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载
• 使用iframe以前须要考虑这两个缺点。若是须要使用iframe，最好是经过javascript动态给iframe添加src属性值，这样能够绕开以上两个问题

1四、WEB标准以及W3C标准是什么?

• 标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离

1五、xhtml和html有什么区别?

• 一个是功能上的差异

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

• 另外是书写习惯的差异

  • XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素

1六、Doctype做用? 严格模式与混杂模式如何区分？它们有何意义?

• 页面被加载的时，link会同时被加载，而@imort页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
  import只在IE5以上才能识别，而link是XHTML标签，无兼容问题
  link方式的样式的权重 高于@import的权重
• <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签以前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档
• 严格模式的排版和 JS 运做模式是 以该浏览器支持的最高标准运行
• 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。 DOCTYPE不存在或格式不正确会致使文档以混杂模式呈现

1七、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？

• 行内元素有：a b span img input select strong
• 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
• 空元素：<br> <hr> <img> <input> <link> <meta>
• 行内元素不能够设置宽高，不独占一行
• 块级元素能够设置宽高，独占一行

1八、HTML全局属性(global attribute)有哪些

• class:为元素设置类标识
• data-*: 为元素增长自定义属性
• draggable: 设置元素是否可拖拽
• id: 元素id，文档内惟一
• lang: 元素内容的的语言
• style: 行内css样式
• title: 元素相关的建议信息

1九、Canvas和SVG有什么区别？

• svg绘制出来的每个图形的元素都是独立的DOM节点，可以方便的绑定事件或用来修改。canvas输出的是一整幅画布
• svg输出的图形是矢量图形，后期能够修改参数来自由放大缩小，不会是真和锯齿。而canvas输出标量画布，就像一张图片同样，放大会失真或者锯齿

20、HTML5 为何只须要写 <!DOCTYPE HTML>？

• HTML5 不基于 SGML，所以不须要对DTD进行引用，可是须要doctype来规范浏览器的行为
• 而HTML4.01基于SGML,因此须要对DTD进行引用，才能告知浏览器文档所使用的文档类型

2一、如何在页面上实现一个圆形的可点击区域？

• svg
• border-radius
• 纯js实现 须要求一个点在不在圆上简单算法、获取鼠标坐标等等

2二、网页验证码是干吗的，是为了解决什么安全问题

• 区分用户是计算机仍是人的公共全自动程序。能够防止恶意破解密码、刷票、论坛灌水
• 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试

$CSS部分

一、css sprite是什么,有什么优缺点

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

• 优势：

  • 减小HTTP请求数，极大地提升页面加载速度
  • 增长图片信息重复度，提升压缩比，减小图片大小
  • 更换风格方便，只需在一张或几张图片上修改颜色或样式便可实现

• 缺点：

  • 图片合并麻烦
  • 维护麻烦，修改一个图片可能须要重新布局整个图片，样式

二、display: none;与visibility: hidden;的区别

• 联系：它们都能让元素不可见

• 区别：

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

三、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

四、什么是FOUC?如何避免

• Flash Of Unstyled Content：用户定义样式表加载以前浏览器使用默认样式显示文档，用户样式加载渲染以后再重新显示文档，形成页面闪烁。
• 解决方法：把样式表放到文档的head

五、如何建立块级格式化上下文(block formatting context),BFC有什么用

• 建立规则：

  • 根元素
  • 浮动元素（float不是none）
  • 绝对定位元素（position取值为absolute或fixed）
  • display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素
  • overflow不是visible的元素

• 做用：

  • 能够包含浮动元素
  • 不被浮动元素覆盖
  • 阻止父子元素的margin折叠

六、display,float,position的关系

• 若是display为none，那么position和float都不起做用，这种状况下元素不产生框
• 不然，若是position值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。
• 不然，若是float不是none，框是浮动的，display根据下表进行调整
• 不然，若是元素是根元素，display根据下表进行调整
• 其余状况下display的值为指定值
• 总结起来：绝对定位、浮动、根元素都须要调整display

七、清除浮动的几种方式，各自的优缺点

• 父级div定义height
• 结尾处加空div标签clear:both
• 父级div定义伪类:after和zoom
• 父级div定义overflow:hidden
• 父级div也浮动，须要定义宽度
• 结尾处加br标签clear:both
• 比较好的是第3种方式，好多网站都这么用

八、为何要初始化CSS样式?

• 由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别。
• 固然，初始化样式会对SEO有必定的影响，但鱼和熊掌不可兼得，但力求影响最小的状况下初始化

九、css3有哪些新特性

• 新增各类css选择器
• 圆角 border-radius
• 多列布局
• 阴影和反射
• 文字特效text-shadow
• 线性渐变
• 旋转transform

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 单选框或复选框被选中

十、display有哪些值？说明他们的做用

• block 象块类型元素同样显示。
• none 缺省值。象行内元素类型同样显示。
• inline-block 象行内元素同样显示，但其内容象块类型元素同样显示。
• list-item 象块类型元素同样显示，并添加样式列表标记。
• table 此元素会做为块级表格来显示
• inherit 规定应该从父元素继承 display 属性的值

十一、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不一样的？

• 有两种， IE盒子模型、W3C盒子模型；
• 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
• 区 别： IE的content部分把 border 和 padding计算了进去;

十二、CSS优先级算法如何计算？

• 优先级就近原则，同权重状况下样式定义最近者为准
• 载入样式以最后载入的定位为准
• 优先级为: !important > id > class > tag important 比 内联优先级高

1三、对BFC规范的理解？

• 它决定了元素如何对其内容进行定位,以及与其余元素的关系和相互做用

1四、谈谈浮动和清除浮动

• 浮动的框能够向左或向右移动，直到他的外边缘碰到包含框或另外一个浮动框的边框为止。因为浮动框不在文档的普通流中，因此文档的普通流的块框表现得就像浮动框不存在同样。浮动的块框会漂浮在文档普通流的块框上

1五、position的值， relative和absolute定位原点是

• absolute：生成绝对定位的元素，相对于 static 定位之外的第一个父元素进行定位
• fixed：生成绝对定位的元素，相对于浏览器窗口进行定位
• relative：生成相对定位的元素，相对于其正常位置进行定位
• static 默认值。没有定位，元素出如今正常的流中
• inherit 规定从父元素继承 position 属性的值

1六、display:inline-block 何时不会显示间隙？(携程)

• 移除空格
• 使用margin负值
• 使用font-size:0
• letter-spacing
• word-spacing

1七、PNG,GIF,JPG的区别及如何选

• GIF

  • 8位像素，256色
  • 无损压缩
  • 支持简单动画
  • 支持boolean透明
  • 适合简单动画

• JPEG

  • 颜色限于256
  • 有损压缩
  • 可控制压缩质量
  • 不支持透明
  • 适合照片
• PNG
  • 有PNG8和truecolor PNG
  • PNG8相似GIF颜色上限为256，文件小，支持alpha透明度，无动画
  • 适合图标、背景、按钮

1八、行内元素float:left后是否变为块级元素？

• 浮动后，行内元素不会成为块状元素，可是能够设置宽高。行内元素要想变成块状元素，占一行，直接设置display:block;。但若是元素设置了浮动后再设置display:block;那就不会占一行。

1九、在网页中的应该使用奇数仍是偶数的字体？为何呢？

• 偶数字号相对更容易和 web 设计的其余部分构成比例关系

20、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的做用

• 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素
• 用于区分伪类和伪元素

2一、若是须要手动写动画，你认为最小时间间隔是多久，为何？（阿里）

• 多数显示器默认频率是60Hz，即1秒刷新60次，因此理论上最小间隔为1/60＊1000ms ＝ 16.7ms

2二、CSS合并方法

• 避免使用@import引入多个css文件，可使用CSS工具将CSS合并为一个CSS文件，例如使用Sass\Compass等

2三、CSS不一样选择器的权重(CSS层叠的规则)

• ！important规则最重要，大于其它规则
• 行内样式规则，加1000
• 对于选择器中给定的各个ID属性值，加100
• 对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加10
• 对于选择其中给定的各个元素标签选择器，加1
• 若是权值同样，则按照样式规则的前后顺序来应用，顺序靠后的覆盖靠前的规则

2四、列出你所知道能够改变页面布局的属性

• position、display、float、width、height、margin、padding、top、left、right、`

2五、CSS在性能优化方面的实践

• css压缩与合并、Gzip压缩
• css文件放在head里、不要用@import
• 尽可能用缩写、避免用滤镜、合理使用选择器

2六、CSS3动画（简单动画的实现，如旋转等）

• 依靠CSS3中提出的三个属性：transition、transform、animation
• transition：定义了元素在变化过程当中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
• transform：定义元素的变化结果，包含rotate、scale、skew、translate。
• animation：动画定义了动做的每一帧（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

2七、base64的原理及优缺点

• 优势能够加密，减小了http请求
• 缺点是须要消耗CPU进行编解码