一、HTML常见题目
01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？
声明帮助浏览器正确地显示网页 严格模式 ：是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法。
混杂模式：则是一种向后兼容的解析方法，说的透明点就是可以实现IE5.5以下版本浏览器的渲染模式。
02、HTML5为什么只需要写？
在html4.01中，声明引用DTD,因为HTML4.01基于SGML。
DTD规定了标记语言的规则，这样浏览器才能正确的呈现内容。
html5不基于SGMl,所以不需要引用DTD。
03、行内元素有哪些？块级元素有哪些？空(void)元素有那些？
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
04、页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; （3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题; (4) link支持使用js控制DOM去改变样式，而@import不支持;
05、介绍一下你对浏览器内核的理解？
主要分成两个部分：渲染引擎(Render Engine)和JS引擎。
06、常见的浏览器内核有哪些？
Trident内核：IE，360，搜过浏览器；
Gecko内核：Netscape6及以上版本，
Presto内核：Opera
Blink内核：Opera；
Webkit内核：Safari，Chrome
07、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
新增元素 内容元素：article、header，footer,section,nav,aside
表单元素：calendar，date，time，number,url,search;
多媒体：video,audio;
控件元素： websockt,webwork
绘画：canvas;
存储：localStorage;sessionStorage
移除元素 big font basefont,s,tt,u,frame.iframe
08、如何区分HTML和HTML5？
1）在文档类型声明上不同： HTML是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。
2）在结构语义上不同： HTML：没有体现结构语义化的标签，通常都是这样来命名的
，这样表示网站的头部。HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：
09、简述一下你对HTML语义化的理解？
⒈用正确的标签做正确的事情
⒉HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；
⒊即使在没有样式CSS情况下也以一种文档格式显示，并且时任意阅读的；
⒋搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；
⒌时阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
10、HTML5的离线储存怎么使用，工作原理能不能解释一下？
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。
之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
1、页面头部像下面一样加入一个manifest的属性；
2、在cache.manifest文件的编写离线存储的资源；
3、在离线状态时，操作window.applicationCache进行需求实现。
更新缓存：一旦应用被缓存，它就会保持缓存直到发生下列情况：
1.用户清空浏览器缓存
2.manifest 文件被修改（参阅下面的提示）
3.由程序来更新应用缓存
二、CSS类的题目
01、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
1）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
2）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 、padding
02、CSS选择符有哪些？哪些属性可以继承？
- 1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a:hover, li:nth-child）
* 可继承的样式： font-size font-family color, UL LI DL DD DT;
* 不可继承的样式：border padding margin width height ;
03、CSS优先级算法如何计算？
优先级为: 同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
!important > id > class > tag important 比 内联优先级高
04、CSS3新增伪类有那些？
p:last-of-type 选择其父元素的最后的一个P元素
p:last-child 选择其父元素的最后子元素(一定是P才行)
p:first-of-type 选择其父元素的首个P元素
p:first-child 选择其父元素的首个p元素(一定是p才行)
05、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
1、 body{
display: flex;
justify-content: center;
align-items: center;
}
2、 .outerbox {
float: left;
position: relative;
left: 50%;
}
.innerbox {
float: left;
position: relative;
right: 50%;
}
3、 .center{
position: absolute; /绝对定位/
width: 500px;
height:300px;
background: red;
margin: 0 auto; /水平居中/
left: 0; /此处不能省略，且为0/
right: 0; /此处不能省略，且为0/
}
06、display有哪些值？说明他们的作用。
07、position的值relative和absolute定位原点是？
08、CSS3有哪些新特性？
1. CSS3实现圆角（border-radius），阴影（box-shadow），边框图片border-image
2. 对文字加特效（text-shadow、），强制文本换行（word-wrap），线性渐变（linear-gradient）
3.旋转,缩放,定位,倾斜：transform:rotate(90deg)、 scale(0.85,0.90) 、translate(0px,-30px)、 skew(-9deg,0deg);
4. 增加了更多的CSS选择器、多背景、rgba()；
5. 在CSS3中唯一引入的伪元素是 ::selection ；
6. 媒体查询(@media)，多栏布局（flex）
09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景？
10、用纯CSS创建一个三角形的原理是什么？
1、采用的是均分原理,把矩形分为4等份,这4等份其实都是边框
2、实现方式, 核心就是给块级元素设置宽高为0,设置边框的宽度,不需要显示的边框使用透明色;
三、JavaScript类的题目
01、JavaScript 中 this 是如何工作的 this 永远指向函数运行时所在的对象，而不是函数创建时所在的对象
var x = 0;
var foo = { x:1, bar:{
x:2,
baz: function () {
console.log(this.x)
} } }
var a = foo.bar.baz foo.bar.baz() // 2
a() //0
02、请解释原型继承 的原理。
当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止。
03、什么是闭包 (closure)，如何使用它，为什么要使用它？
04、.call 和 .apply 的区别是什么？
1、apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
2、apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
3、apply 、 call 、bind 三者都可以利用后续参数传参，call和bind一个一个写，apply传入数组；
4、bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。
05、请指出 JavaScript 宿主对象 (host objects) 和原生对象 (native objects) 的区别？
06、请指出以下代码的区别：
function Person(){}、
var person = Person()、
var person = new Person()？
第一个是声明定义一个Person函数
第二个是直接调用Person()函数，并将返回值赋值给变量person
第三个是创建了一个Person实例对象
07、请解释变量声明提升 (hoisting)。
var 表达式和 function 声明都将会被提升到当前作用域的顶部。
变量 var myvar = 'my value'; (function() {
// var myvar = undefined
变量声明被提升到了这个位置。
alert(myvar); // undefined
var myvar = 'local value';
})();
函数
function myFunc(){
alert('Hello');
}
myFunc(); // 第一次调用 输出yeah；
很奇怪吧
function myFunc(){
alert('yeah');
}
myFunc(); // 还是输出 yeah！
JavaScript 执行引擎并非一行一行地分析和执行程序，而是一段一段地分析执行的。
而且，在同一段程序的分析执行中，定义式的函数语句会被提取出来优先执行。
函数定义执行完之后，才会按顺序执行其他语句代码。
也就是说，在第一次调用 myfunc之前，第一个函数语句定义的代码逻辑，已被第二个函数定义语句覆盖了。
所以，两次都调用都是执行最后一个函数逻辑了。
08、什么是 “use strict”; ? 使用它的好处和坏处分别是什么？
1. 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
2. 消除代码运行的一些不安全之处，保证代码运行的安全；
3. 提高编译器效率，增加运行速度；
4. 为未来新版本的Javascript做好铺垫。
注：经过测试 IE6,7,8,9 均不支持严格模式。
缺点： 现在网站的 JS 都会进行压缩，一些文件用了严格模式，而另一些没有。
这时这些本来是严格模式的文件，被 merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。
09、什么是事件循环 (event loop)？
浏览器运行时是多进程，浏览器渲染进程是多线程，包含GUI渲染线程，js引擎线程，事件触发线程，定时器线程，异步请求线程等， 平时说js是单线程就是指js引擎线程。
js分为同步和异步，在js引擎线程(主线程)上执行，创建执行栈，一旦执行栈中所有的同步任务执行完毕，js引擎空闲下来，就会读取任务队列，按照一定的优先级放置到执行栈中，继续执行。
event loop 在代码层面应该类似于while(true){}的循环【纯属猜测 ('∀') 】
10、请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。
同步方法调用一旦开始，调用者必须等到方法调用返回后，才能继续后续的行为。
异步方法调用更像一个消息传递，一旦开始，方法调用就会立即返回，调用者就可以继续后续的操作。
而，异步方法通常会在另外一个线程中，“真实”地执行着。
整个过程，不会阻碍调用者的工作。
四、开发及性能优化类题目
01、如何规避javascript多人开发函数重名问题？
作用域，并且保证每个作用域不重复 采用面向对象开发吧，面向对象非常适合团队化开发，这样可以最大化的减少代码耦合的几率，项目也容易维护。
02、请说出三种减低页面加载时间的方法.
a. 尽量减少页面中重复的HTTP请求数量
b. 服务器开启gzip压缩
c. css样式的定义放置在文件头部
d. Javascript脚本放在文件末尾
e. 压缩合并Javascript、CSS代码
f. 使用多域名负载网页内的多个文件、图片
03、说说你所了解到的Web攻击技术。
（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法 的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。
04、说说你说了解的前端性能优化方法？
一、页面内容优化 减少http请求次数 减少DNS查询次数 避免页面跳转 缓存ajax 延迟加载（一般用在图片多的页面中，滚动时才加载） 预加载 减少DOM元素数量 减少iframe数量 避免404
二、css优化 将样式表置顶将 （CSS放在 HEAD中，防止浏览器有可能还未下载和解析到 CSS就已经开始渲染页面） 避免css表达式 用link代替@import 避免使用filters css文件合并与压缩
三、js代码优化 将脚本置底（将脚本内容在页面信息内容加载后再加载） 使用外部javascript和css文件 去除重复脚本，避免重复的资源请求 减少DOM访问（修改和访问DOM元素会造成页面的重绘和重排，循环对DOM操作更是减慢页面加载速度） js文件合并与压缩
四、图片优化 优化图片大小 尽量使用css sprite（精灵图也叫雪碧图） 不要在html中缩放图片 使用小且可缓存的favicon.ico
五、减少Cookie传输 Cookie包含在每次请求和响应中，太大的Cookie会严重影响数据传输，因此哪些数据需要写入Cookie需要慎重考虑，尽量减少Cookie中传输的数据量。
六、浏览器端使用缓存 CSS、JavaScript、Logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次HTTP请求都需要的，如果将这些文件缓存在浏览器中，可以极好地改善性能。
用法：通过设置HTTP头中的Cache-Control和Expires属性，可设定浏览器缓存，缓存时间可以是数天，甚至是数月。
七、服务器端使用压缩 在服务器端对文件进行压缩，在浏览器对文件解压缩，可有效减少通信传输的数据量。文本文件的压缩率可达80%以上，因此HTML、CSS、JavaScript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。
05、前端开发中，如何优化图像？图像格式的区别？
优化图像：
1、不用图片，尽量用css3代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。
2、 使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！
3.、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。
基本上，内容图片多为照片之类的，适用于JPEG。 而修饰图片通常更适合用无损压缩的PNG。 GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。
4、按照HTTP协议设置合理的缓存。
5、使用字体图标webfont、CSS Sprites等。
6、用CSS或JavaScript实现预加载。
7、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。
区别：
1、gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。
2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。
3、png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。
后面的数字代表这种PNG格式最多可以索引和存储的颜色值。
关于透明：PNG8支持索引透明和alpha透明;
PNG24不支持透明;
而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明;
优缺点：
1、能在保证最不失真的情况下尽可能压缩图像文件的大小。
2、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。
06、浏览器是如何渲染页面的？
1. 解析HTML
2. 构建DOM树
3. DOM树与CSS样式进行附着构造呈现树
4. 布局
5. 绘制
07、页面重构怎么操作？
页面重构就是根据原有页面内容和结构的基础上，通过div+css写出符合web标准的页面结构。
具体实现要达到以下三点：
1. 结构完整，可通过标准验证
2. 标签语义化，结构合理
3. 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化
08、什么叫优雅降级和渐进增强？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。
由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。
当浏览器支持时，它们会自动地呈现出来并发挥作用。
09、前端需要注意哪些SEO？如何做SEO优化?
HTML：
1.标签的有开有合。
2.避免冗余代码，例如去除空格字符。
3.合理利用标签语义化。
4.合理的嵌套规则，避免行元素内嵌套块元素。
5.img标签内需要添加title属性和alt属性。
6.a标签内需要添加title属性。
7.Meta标签的优化（过去搜索引擎优化的重要手法，现在已经不是关键因素，但仍不可忽略）
主要包括：
Meta description、Meta keywords的设置
关键字密度要适度，通常为2%-8%，也就是说你的关键字必须 在 页面中出现若干次，
或者在搜索引擎允许的范围内，要避免堆砌关键字。
8.页面标题，必须列出信息的标题、网站的名称以及相关关键字，避免堆关键字。
9.合理使用注释。
10.尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容
11.文本缩进不要使用特殊符号 应当使用CSS进行设置。
版权符号不要使用特殊符号 ©
可以直接使用输入法，拼“banquan”，
选择序号5就能打出版权符号。
CSS:
1.避免将css代码写在标签内。
2.如果css代码量少，可直接写在头部。否则请使用外部引入的方式。
3.请不要使用通配符选择器 *{margin:0;padding:0;}
这不仅仅因为它是缓慢和低效率的方法，而且还会导致一 些不必要的元素也重置了外边距和内边距。
4.css代码缩写可以提高你写代码的速度，精简你的代码量，包括margin，padding，border ，font， background和颜色值等。
5.利用css继承，如果一个父元素内有多个子元素拥有相同的样式，可将相同的样式定义在元素上。
6.如果多个元素拥有相同的样式，可定义一个通用的class或使用群组选择器。
7.使用背景图合并技术。
8.适当的代码注释。
9.谨慎使用 display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。
JS
1采用外部引入的方法。
2.合理合并JS代码，可减少服务器的压力。
3.良好的JS代码习惯。例如：减少页面重绘，减少作用域链上的查找次数。
10、平时如何管理你的项目？
1. 先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等
2. 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）
3. 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）
4. 页面进行标注（例如 页面 模块 开始和结束）
5. CSS 跟 HTML 分文件夹并行存放，命名都得统一（例如 style.css）
6. JS 分文件夹存放 命名以该 JS 功能为准的英文翻译
7. 图片采用整合的 images.png png
8 格式文件使用 尽量整合在一起使用方便将来的管理
11、浏览器缓存 Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。
Memory Cache 也就是内存中的缓存，主要包含的是当前中页面中已经抓取到的资源,
Cache-Control Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，
但是什么都能存储到磁盘中 Push Cache（推送缓存）是 HTTP/2 中的内容，
当以上三种缓存都没有命中时，它才会被使用。
