前端面试题--刷题进行时（题目答案总结）

最近开始用琐碎的时间看看前端基础的面试题目，很久之前记录的一些题目都没有答案，这回开始每天总结几道，查询记录下答案，顺便也贴到这里来，方便查询。

告知浏览器是以什么文档标准解析文档；
严格模式：标准模式；混杂模式：兼容模式、混杂模式
意义：如果只存在严格模式，那很多旧网站必会受到影响；如果只存在兼容模式，则又回到浏览器大混乱时代，没有统一的标准，每个浏览器都有自己的解析模式。

html5不基于SGML，不需要对DTD进行引用，但需要doctype来规范浏览器的行为，不存在严格模式和兼容模式，有相对宽容的语法，已经尽可能的实现了向后兼容。
SGML是标准通用标记语言，比HTML、xml更老的标准

行内：a、b、span、input、button、select、strong、label、em、textarea
块级：div、p、 ul 、 li、 h1-h6、 dl、 dt、 dd、 blockquate
空（没有内容的HTML元素）：br、 meta、 img 、 hr、 link、 input

1、link是XHTML标签，可以引用css、RSS、定义rel属性；import只能引入css
2、打开页面是link跟页面同时加载；import 加载完界面后加载
3、link无兼容问题；import低版本浏览器不支持
4、link 支持使用javascript控制DOM改变样式，import不支持

分为渲染引擎和js引擎：
渲染引擎负责取得网页的内容（HTML、css等）、整理讯息（加载css）、计算网页的显示方式，然后输出到浏览器或打印机。内核不同显示第效果也不同。
js引擎：解析和执行js来实现网页动态效果。
webkit：谷歌浏览器内核--渲染速度快、源码清晰、兼容性较差
trident：IE、360、低版本对h5等一些支持度差
Gecko：火狐--消耗内存多，有丰富开发接口

webkit：谷歌
trident：IE、360，搜狗
gecko：火狐

针对位置、图标、存储、多任务等功能的添加：
拖拽释放API、地理API
语义化更好的标签：audio、video、header、footer、

根据内容的结构化，选择合适的标签，便于开发者阅读和优雅的编写代码。
why：
为了在没有css的情况下，页面也能呈现很好的结构（为了好看）
用户体验更好：例如title、alt等用于解释名词或者信息
有利于SEO：和搜索引擎建立更好的沟通，有利于爬虫抓取更多的有效信息。
方便其他设备解析，比如阅读器等
便于团队开发和维护，语义化具有更好的可读性，减少差异化。
注意什么？
尽可能少的应用无语义的标签 比如div和span
在语义不明显时，比如可以使用div和p，尽量用p，具有上下间距更好兼容
不使用纯样式标签，比如font 、b 等，改用css设置
需要强调的可用strong
表格标题用caption，表头thead，主题tbody，底部tfoot，表头和一般单元格要分开，表头用th，一般用td
每个input 都要对应label 说明文本

使用：头部添加manifest属性

image.png

manitest文件格式：

CACHE MANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

/ /offline.html

（1）CACHE：需要离线缓存的文件，不用写页面自身
（2）NETWORK：文件只能在线情况下访问，不缓存。
（3）FALLBACK：若一地个资源访问失败，则访问这里的资源，比如404页面

工作原理：
基于一个新建的.appcache文件，通过这个文件上的结息清单离线存储资源，这些资源就会像cookie一样被存储，之后网络处于离线状态时，浏览器会通过离线缓存的文件加载页面，和cookie文件一样，h5的离线缓存也需要服务器环境。

在线情况下，浏览器发现HTML文件头部有manifest属性，浏览器会请求manifest文件，如果第一次访问，则按照文件中内容下载对应资源缓存；下次在线访问时，如果资源已被缓存，则浏览器直接读取缓存文件，然后对比新的manifest和旧的manifest文件，如果有变化，则重新下载文件内容进行缓存，若没有变化则不作任何操作；离线加载时会直接获取缓存文件加载。

1、首先获取html，然后构建dom树
2、其次根据css构建render树，render树中不包含定位和几何信息
3、最后构建布局数，布局是含有元素的定位和几何信息

浏览器的重构指的是改变每个元素外观时所触发的浏览器行为，比如颜色，背景等样式发生了改变而进行的重新构造新外观的过程。重构不会引发页面的重新布局，不一定伴随着回流，回流指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置的，他的开销是非常大的，
回流可以理解为渲染树需要重新进行计算，一般最好触发元素的重构，避免元素的回流；比如通过通过添加类来添加css样式，而不是直接在DOM上设置，当需要操作某一块元素时候，最好使其脱离文档流，这样就不会引起回流了，比如设置position：absolute或者fixed，或者display：none，等操作结束后在显示

!important > 内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配符选择器

JavaScript

基本数据类型：Number，String，Boolean，Undefined，Null
复杂数据类型：Object，Array，Function，RegExp，Date，Error
全局数据类型：Math

闭包简单的说就是一个函数能访问外部函数的变量，这就是闭包，比如说：

function a(x){
       var tem=3;
      function b(y){
          console.log(x+y+(++tem));
     }
}

a函数中的b函数就是闭包了，b函数可以使用a函数的局部变量，参数，最典型的闭包应该是下面这样，将定义在函数中的函数作为返回值

function a(x){
       var tem=3;
      function b(y){
          console.log(x+y+(++tem));
     }
return b;
}

闭包的另一种作用是隔离作用域，请看下面这段代码

for(var i=0;i<2;i++){
     setTimeout(function(){
             console.log(i);
       },0);
}

上面这段代码的执行结果是2,2而不是0,1，因为等for循环出来后，执行setTimeout中的函数时，i的值已经变成了2，这就是没有隔离作用域所造成的，请看下面代码

for(var i=0;i<2;i++){
      (function(i){
             setTimeout(function(){
              console.log(i);
        },0)
    })(i);
}

这样就会输出0,1，我们的立即执行函数创建了一个作用域，隔离了外界的作用域，闭包的缺点是，因为内部闭包函数可以访问外部函数的变量，所以外部函数的变量不能被释放，如果闭包嵌套过多，会导致内存占用大，要合理使用闭包。