2024年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新

05-29 1222阅读

专项练习–持续更新

HTML篇
CSS篇
JS篇
Vue篇
TypeScript篇
React篇
微信小程序篇
前端面试题汇总大全二（含答案超详细，Vue，TypeScript，React，微信小程序，Webpack 汇总篇）-- 持续更新

前端面试题汇总大全（含答案超详细）-- 持续更新
- 一、HTML 篇
- - - 1.xhtml和html有什么区别
    - 2.行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别
    - 3. 简述一下你对 HTML 语义化的理解？
    - 4. 标签上 title 与 alt 属性的区别是什么？
    - 5. iframe的优缺点？
    - 6. href 与 src？
    - 7.什么是优雅降级渐进增强？
    - 8.HTTP的几种请求方法用途？
    - 9.HTTP状态码都有哪些？
    - 10.DOCTYPE (⽂档类型) 的作⽤？
    - 11.前端需要注意哪些SEO？
    - 12.script标签中defer和async的区别？
    - 13.常用meta标签有哪些？
    - 14.一次完整的HTTP事务是怎么一个过程?
    - 15.HTTP和HTTPS区别？
    - 16.HTTPS是如何实现加密？
    - 17.img的srcset属性作用？
    - 18.WEB标准以及W3C标准是什么?
    - 19.HTML5的离线存储怎么使用？工作原理？
    - 20.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?
    - 21.label的作用是什么？
    - 22.Canvas和SVG区别？
    - 23.head 标签有什么作用，其中什么标签必不可少?
    - 24.严格模式与混杂模式如何区分? 它们有何意义?
    - 25.浏览器乱码的原因是什么？如何解决？
    - 26. 浏览器存储技术 ?
    - 27.CSS定位方式？
    - 28.尽可能多的写出浏览器兼容性问题？解决
    - 29.HTML全局属性(global attribute)有哪些
    - 30.网页验证码是干嘛的，是为了解决什么安全问题
    - 31.为什么利用多个域名来存储网站资源会更有效？
    - 32.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
    - 33.web开发中会话跟踪的方法有哪些
    - 34.title与h1的区别、b与strong的区别、i与em的区别
    - 35.浏览器的内核有哪些？分别有什么代表的浏览器？
    - 36.浏览器是如何渲染页面的？
    - 37.TCP为什么需要三次握手和四次挥手
    - 38.TCP三次握手
    - 39.TCP四次挥手
    - 40.data-属性的作用？
    - 41.HTML5新特性？
    - 42.web worker的理解？如何创建？
    - 43.说下HTML5 drag API
    - 44.Http 短轮询、长轮询
    - 45.canvas绘图基础(直线，三角形，矩形，圆形)
    - 46.TCP和HTTP区别？
    - 二、CSS 篇
    - - 1. 介绍一下 CSS 的盒子模型？
        2.css选择器？
        3. css 选择器优先级？
        4.css中可继承属性？
        5. 垂直居中几种方式？
        6. 简明说一下 CSS link 与 @import 的区别和用法？
        7. rgba和opacity的透明效果有什么不同？
        8.display的属性值及作用
        9.display的block，inline和inline-block区别？
        10. display:none和visibility:hidden的区别？
        11. position的值， relative和absolute分别是相对于谁进行定位的？
        12.隐藏元素的方法有哪些？
        13.transition和animation区别？
        14.伪元素和伪类区别？
        15.对requestAnimationframe的理解
        16.li 与 li 之间有看不见的空白间隔是什么原因引起的? 如何解决?
        17.CSS3新特性
        18.创建图片格式(简述)
        19. 画一条0.5px的直线？
        20. calc, support, media各自的含义及用法？
        21.px和em,rem区别？
        22. 1rem、1em、1vh、1px，vmin，vmax各自代表的含义？
        23. CSS画一个三角形？
        24.元素水平垂直居中
        25.响应式布局原理
        26.CSS定位方式？
        27.css sprite（雪碧图，精灵图）是什么,有什么优缺点？
        28.设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？
        29.margin 和 padding 的使用场景
        30.对line-height的理解，赋值方式
        31.谈谈你对BFC的理解？触发条件？应用场景？
        32.如何实现两栏布局，右侧自适应？三栏布局中间自适应？
        33.说说flexbox（弹性盒布局模型）,以及适用场景？
        34.介绍一下grid网格布局
        35.CSS3动画有哪些？
        36.怎么理解回流跟重绘？什么场景下会触发？
        37.如果要做优化，CSS提高性能的方法有哪些？
        38.如何实现单行／多行文本溢出的省略样式？
        39.让Chrome支持小于12px 的文字方式有哪些？区别？
        40.说说对Css预编语言的理解？有哪些区别?
        41.什么是FOUC？如何避免？
        42.清除浮动的方式，各自优缺点？
        43.在网页中的应该使用奇数还是偶数的字体？为什么呢？
        44.如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
        45.base64的原理及优缺点？
        46.流体布局，圣杯布局，双飞翼布局？
        47.postcss的作用
        48.css有个content属性吗？有什么作用？有什么应用？
        49.水平居中方法
        50.详细说一说css3的animation，transition
        51.什么是css Hack？常见Hack
        52.浏览器是怎样解析CSS选择器的？
        53.抽离样式模块怎么写，说出思路
        54.元素竖向的百分比设定是相对于容器的高度吗？
        55.全屏滚动的原理是什么？用到了CSS的那些属性？
        56.设置元素浮动后，该元素的 display 值会如何变化
        57.display:inline-block 什么时候会显示间隙？
        58.pageX，clientX，screenX，offsetX区别？
        59.如何对不同IE版本浏览器做兼容测试？
        60.border- radius详解
        61.让页面里的字体变清晰，变细用CSS怎么做？
        63.CSS3渐变？
        64.响应式布局和自适应布局的区别 ?
        65.z-index失效的几种情况
        66.float之后display值改为？
        67.css中的锚点
        68.移动端1px问题解决方案
        69.阻止移动端H5开发浏览器默认左右滑动行为
        70.CSS中定位position 和 transform 移动元素的比较
        71.margin-left：auto，margin-right：auto，margin：auto区别
        72.css全屏滚动
        三、HTML / CSS 混合篇
        1. HTML5、CSS3 里面都新增了那些新特性？
        四、JS 篇
        1. JS 数据类型 ?存储上的差别？
        2.数组常用方法？
        3.JavaScript字符串的常用操作方法有哪些？
        4.JavaScript字符串的常用转换方法和模板匹配方法？
        5.JavaScript 中的类型转换机制
        6.null 和 undefined 的区别？
        7. “ ===”、“ ==”的区别？
        8. “eval是做什么的？
        9. 箭头函数有哪些特点？
        10. var、let、const 区别？
        11. new操作符具体干了什么呢？
        12.深拷贝浅拷贝的区别？如何实现一个深拷贝？
        13.对作用域链的理解
        14.JavaScript原型，原型链 ? 有什么特点？
        15.请解释什么是事件代理
        16.Javascript如何实现继承？
        17.谈谈This对象的理解
        18.事件模型
        19.new操作符具体干了什么呢?
        20.JavaScript中执行上下文和执行栈是什么？
        21.typeof 与 instanceof 区别？
        22.判断是否为数组的5种方法？
        23. 判断一个值是什么类型有哪些方法？
        24. ajax过程？
        25.Ajax原理，ajax优缺点？
        26.bind、call、apply 区别？
        27.如何实现一个bind?
        28.说说你对正则表达式的理解？应用场景？
        29.对事件循环的理解（详细）？
        30.DOM常见的操作有哪些？
        31.说说你对BOM的理解，常见的BOM对象你了解哪些？
        32.BOM和DOM区别？
        33.如何解决跨域问题？
        34.异步加载js方式？
        35.哪些操作会导致内存泄漏？
        36.XML和JSON的区别？
        37.说说你对递归得理解？
        38.说说你对函数式编程的理解？优缺点？纯函数，高阶函数，柯里化
        39.Javascript中如何实现函数缓存？函数缓存有哪些应用场景？
        40. JSON 的了解？
        41. document.write 和 innerHTML 的区别？
        42. 请解释一下 JavaScript 的同源策略？
        43. 介绍一下闭包和闭包常用场景？
        44. javascript的内存(垃圾)回收机制？
        45. 用js递归的方式写1到100求和？
        46. 事件队列（宏任务微任务）
        43.async/await， Generator
        48. JavaScript 是单线程的，浏览器是多进程的
        49.说说 Javascript 数字精度丢失的问题，如何解决？
        50.说说你对模块化方案的理解，比如 CommonJS、AMD、CMD、ES Module 分别是什么？
        51.用过哪些设计模式？
        52.javascript有哪些方法定义对象?
        53.说说你对promise的了解
        54.web开发中会话跟踪的方法有哪些？
        55.介绍js有哪些内置对象？
        56.eval是做什么的？
        57.parseInt函数，["1", "2", "3"].map(parseInt) 答案是多少？
        58.javascript 代码中的"use strict";是什么意思？说说严格模式的限制
        59.js延迟加载的方式有哪些?
        60.同步和异步的区别?
        61.ES6新特性
        62.let,const,var区别？
        63.let和var区别？
        64.如果new一个箭头函数的会怎么样?
        65.箭头函数与普通函数的区别？
        66.扩展运算符的作用
        67.ES6中模板语法与字符串处理
        68.map与forEach的区别
        69.Js动画与CSS动画区别及相应实现
        70.gulp是什么？
        71.事件的各个阶段, addEventListener
        72.数组some函数和every函数
        73.数组乱序
        74.如何渲染几万条数据并不卡住界面,requestAnimationFrame
        75.获取到页面中所有的checkbox怎么做
        76.怎样添加、移除、移动、复制、创建和查找节点
        77.window.onload和$(document).ready
        78.addEventListener()和attachEvent()的区别
        79.数组去重
        80.判断两个对象相等
        81.防抖节流
        82.检测浏览器版本版本有哪些方式？
        83.javascript基本规范
        84.npm和yarn，pnpm的优势是什么
        85.导致页面加载白屏时间长的原因有哪些，怎么进行优化
        86.DOM克隆操作
        87.沙箱模式
        88.string和tostring什么区别
        89.js数据存储方式
        90.cookie,session,token区别
        91.js十进制转二进制
        92.如何让多个异步函数顺序执行
        93.settimeout事件机制
        94.bind连续绑多次最终this指向
        95.mep和set
        96.大文件上传
        97.移动端Click300毫秒点击延迟解决办法
        98.如何判断一个对象为空对象
        99.数组常用方法
        100.数组扁平化
        101.for..in 和 for ... of区别
        102.伪数组,伪数组转换为数组
        103.二维数组应用场景
        一、HTML 篇
        
        1.xhtml和html有什么区别
        
        功能上
        主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页
        书写习惯
        XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素
        2.行内元素有哪些？块级元素有哪些？空(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
        行内元素不可以设置宽高，不独占一行
        块级元素可以设置宽高，独占一行
        
        3. 简述一下你对 HTML 语义化的理解？
        
        语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
        
        语义化的好处：
        
        在没有CSS的情况下，页面也能呈现出很好的内容结构
        语义化使代码更具可读性，便于团队开发和维护
        语义化有利于用户体验（例如 title，label，alt属性的灵活运用）
        语义化有利于SEO（和搜索引擎建立良好的沟通，有助于爬虫爬取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重）
        4. 标签上 title 与 alt 属性的区别是什么？
        
        alt 是给搜索引擎识别，在图像无法显示时的替代文本；
        title 是关于元素的注释信息，主要是给用户解读。
        当鼠标放到文字或是图片上时有 title 文字显示。（因为 IE 不标准）在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。
        在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用。
        
        5. iframe的优缺点？
        
        优点：
        
        解决加载缓慢的第三方内容如图标和广告等的加载问题
        Security sandbox
        并行加载脚本
        缺点：
        
        iframe会阻塞主页面的Onload事件
        即时内容为空，加载也需要时间
        没有语意
        使用iframe作为子应用问题：1.没有路有记录 2.样式隔离严重
        6. href 与 src？
        
        href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a
        src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe
        href与src的区别
        1、请求资源类型不同：href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片；
        2、作用结果不同： src用于替换当前元素；href用于在当前文档和引用资源之间建立联系
        3、浏览器解析方式不同：当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。
        7.什么是优雅降级渐进增强？
        
        渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验
        
        优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
        
        8.HTTP的几种请求方法用途？
        
        GET方法
        发送一个请求来取得服务器上的某一资源
        POST方法
        向URL指定的资源提交数据或附加新的数据
        PUT方法
        跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有
        HEAD方法
        只请求页面的首部
        DELETE方法
        删除服务器上的某资源
        OPTIONS方法
        它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息
        TRACE方法
        TRACE方法被用于激发一个远程的，应用层的请求消息回路
        CONNECT方法
        把请求连接转换到透明的TCP/IP通道
        9.HTTP状态码都有哪些？
        
        一、临时响应
        
        100——客户必须继续发出请求
        101——客户要求服务器根据请求转换HTTP协议版本
        二、成功
        
        200——服务器成功返回网页
        201——提示知道新文件的URL
        202——接受和处理、但处理未完成
        203——返回信息不确定或不完整
        204——请求收到，但返回信息为空
        205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
        206——服务器已经完成了部分用户的GET请求
        三、重定向
        
        300——请求的资源可在多处得到
        301——删除请求数据
        302——在其他地址发现了请求数据
        303——建议客户访问其他URL或访问方式
        304——客户端已经执行了GET，但文件未变化
        305——请求的资源必须从服务器指定的地址得到
        306——前一版本HTTP中使用的代码，现行版本中不再使用
        307——申明请求的资源临时性删除
        四、请求错误
        
        400——错误请求，如语法错误
        401——请求授权失败
        402——保留有效ChargeTo头响应
        403——请求不允许
        404——请求的网页不存在
        405——用户在Request-Line字段定义的方法不允许
        406——根据用户发送的Accept拖，请求资源不可访问
        407——类似401，用户必须首先在代理服务器上得到授权
        408——客户端没有在用户指定的饿时间内完成请求
        409——对当前资源状态，请求不能完成
        410——服务器上不再有此资源且无进一步的参考地址
        411——服务器拒绝用户定义的Content-Length属性请求
        412——一个或多个请求头字段在当前请求中错误
        413——请求的资源大于服务器允许的大小
        414——请求的资源URL长于服务器允许的长度
        415——请求资源不支持请求项目格式
        416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
        417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
        五、服务器错误
        500——服务器产生内部错误
        501——服务器不支持请求的函数
        502——服务器暂时不可用，有时是为了防止发生系统过载
        503——服务器超时过载或暂停维修
        504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
        505——服务器不支持或拒绝支请求头中指定的HTTP版本
        
        10.DOCTYPE (⽂档类型) 的作⽤？
        
        DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。
        
        浏览器渲染页面的两种模式：
        
        CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
        BackCompat：怪异模式(混杂模式)(Quick mode) ，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。
        11.前端需要注意哪些SEO？
        
        合理的title、description，keywords：搜索引擎对着这项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
        语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
        重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
        重要内容不要用js输出：爬虫不会执行js获取内容
        少用iframe：搜索引擎不会抓取iframe中的内容
        非装饰性图片必须加alt
        提高网站速度：网站速度是搜索引擎排序的一个重要指标
        12.script标签中defer和async的区别？
        
        注意：如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。
        
        区别：
        
        执行顺序：多个带async属性的标签，不能保证加载的顺序。多个带有defer属性的标签会按照加载顺序执行
        脚本是否并行： async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的即文档加载与js加载同时进行。defer属性，js脚本需要等待文档所有元素解析完成后执行，DOMContentLoaded事件触发执行之前。
        13.常用meta标签有哪些？
        
        meta标签由name和content属性定义，用来描述网页文档的属性
        
        常用的meta标签：
        
        charset：用来描述HTML文档的编码类型
        keywords:页面关键词
        description:页面描述
        refresh:页面重定向和刷新
        viewport:适配移动端，可以控制视口大小和比例
        content参数详情：
        width viewport:宽度(数值/device-width)
        height viewport:高度(数值/device-height)
        initial-scale：初始缩放比例
        maximum-scale:最大缩放比例
        minimum-scale:最小缩放比例
        user-scalable：是否允许用户缩放(yes/no)
        14.一次完整的HTTP事务是怎么一个过程?
        
        浏览器的地址栏输入URL并按下回车。
        浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
        DNS解析URL对应的IP。
        根据IP建立TCP连接（三次握手）。
        HTTP发起请求。
        服务器处理请求，浏览器接收HTTP响应。
        渲染页面，构建DOM树。
        关闭TCP连接（四次挥手）。
        15.HTTP和HTTPS区别？
        
        http:超文本传输协议，是一个客户端和服务器端请求和应答的标准(TCP),用于从www服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更高效，是网络传输减少
        
        https：可以理解为http的安全版，在http下加入SSL层。https协议的主要作用是建立一个安全的信息通道，来确保数组的传输，确保网站的真实性。
        
        区别：
        
        Https 协议需要 ca 证书，费用较高。
        http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议。
        使用不同的连接方式，端口也不同，一般而言，http 协议的端口为 80，https 的端口为443
        http 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、
        身份认证的网络协议，比 http 协议安全。
        16.HTTPS是如何实现加密？
        
        HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL协议不仅仅是一套加密传输的协议，更是一件经过艺术家精心设计的艺术品，TLS/SSL中使用了非对称加密，对称加密以及HASH算法
        
        17.img的srcset属性作用？
        
        响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到img标签的srcset属性，srcset属性用于设置不同屏幕密度下，img加载图片不同
        
        18.WEB标准以及W3C标准是什么?
        
        标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离
        19.HTML5的离线存储怎么使用？工作原理？
        
        离线存储指的是:在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
        
        原理: HTML5的离线存储是基于一个新建的
        .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下
        来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
        
        使用方法：
        
        创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性
        在cache .manifest文件中编写需要离线存储的资源
        CACHE:表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
        NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK
        中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高
        FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访根目录下任何一个资源失败了，那么就去访问
        offline.html
        在离线状态时，操作
        window.applicationCache
        进行离线缓存的操作。
        20.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?
        
        在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
        离线的情况下，浏览器就直接使用离线存储的资源。
        21.label的作用是什么？
        
        label标签来定义表单控件的关系: 当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上
        
        22.Canvas和SVG区别？
        
        Canvas：画布，通过Javascript来绘制2D图形，是逐像索进行染的。其位置发生改变，就会重新进行绘制。
        
        SVG：缩放矢量图形Scalable ecor Grdhics) 是基于可扩展标记语言XML描的2D图的语言。SVG基于XML就意着SG DOM中的元素都是可用的，可以为某个元
        附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
        
        区别：
        
        svg绘制出来的每一个图形的元素都是独立的DOM节点，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布
        svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是出现锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿
        23.head 标签有什么作用，其中什么标签必不可少?
        标签用于定义文档的头部，它是所有头部元素的容器。中的元索可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。下面这些标签可用在 head 部分: ,,,
        24.严格模式与混杂模式如何区分? 它们有何意义?
        
        严格模式:又称为标准模式，指浏览器按照 w3C 标准解析代码;
        
        混杂模式: 又称怪异模式、兼容模式，是指浏览器用自己的方式解析代码。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作;
        
        区分：
        
        如果文档包含严格的 DOCTYPE，那么它一般以严格模式呈现 (严格 DTD 一一严格模式)
        包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI
        (统一资源标识符，就是声明最后的地址) 会导致页面以混杂模式呈现 (有
        URI 的过渡 DTD --严格模式;没有 URI 的过渡 DTD --混杂模式)
        DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现 (DTD不存在或者格式不正确一一混杂模式);
        HTML5 没有 DTD，因此也就没有严格模式与混杂模式的区别，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。
        25.浏览器乱码的原因是什么？如何解决？
        
        产生乱码的原因：
        
        网页源代码是 gbk 的编码，而内容中的中文字是 utf-8 编码的，这样浏览器打开即会出现 html 乱码，反之也会出现乱码:
        html 网页编码是 gbk ，而程序从数据库中调出呈现是 utf-8 编码的内容也会造成编码乱码;
        浏览器不能自动检测网页编码，造成网页乱码,
        解决办法：
        
        使用软件编辑HTML网页内容;
        如果网页设置编码是 gbk ，而数据库储存数据编码格式是 UTF-8 ，此时需要程序查询数据库数据显示数据前进程序转码:
        如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。
        26. 浏览器存储技术 ?
        
        Cookie：是客户端与服务器进行会话使用的一个能够在浏览器本地存储的技术，能存放4kb数据，目的是辨别用户身份
        
        LocalStorage ：在HTML5中新增用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)
        
        SessionStorage ： sessionStorage与localStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对就会被清空。
        
        27.CSS定位方式？
        
        static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
        
        relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
        
        absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
        
        fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
        
        28.尽可能多的写出浏览器兼容性问题？解决
        
        不同浏览器的标签默认的margin和padding不同
        在CSS文件开头，加*{margin: 0; padding: 0;}，把所有标签的margin和padding设置为0
        块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
        可以将块级元素display设置为inline
        设置较小高度标签（一般小于10px），在IE6，IE7，实际的高度会超出设置的高度，这是因为浏览器给标签设置了一个默认的最小高度
        设置{overflow: hidden;}，或者设置line-height小于你设置的高度。
        在某些浏览器中，图片有默认的间距(所有有文字属性的标签都会有边距，除非两个标签连在一起没有隔开)；
        使用float为img布局，因为所有标签设置float之后都会变成块级元素，块级元素浮动时会紧挨在一起，没有边距
        IE9以下浏览器不能使用opacity；
        {opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);}。
        29.HTML全局属性(global attribute)有哪些
        
        class:为元素设置类标识
        data-*: 为元素增加自定义属性
        draggable: 设置元素是否可拖拽
        id: 元素id，文档内唯一
        lang: 元素内容的的语言
        style: 行内css样式
        title: 元素相关的建议信息
        30.网页验证码是干嘛的，是为了解决什么安全问题
        
        区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
        有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试
        31.为什么利用多个域名来存储网站资源会更有效？
        
        CDN缓存更方便
        突破浏览器并发限制
        节约cookie带宽
        节约主域名的连接数，优化页面响应速度
        防止不必要的安全问题
        32.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
        
        图片懒加载，在页面上的未可视区域可以添加一个滚动事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
        如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
        如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
        如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
        如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。
        33.web开发中会话跟踪的方法有哪些
        
        cookie
        session
        url重写
        隐藏input
        ip地址
        34.title与h1的区别、b与strong的区别、i与em的区别
        
        title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响
        strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容
        i内容展示为斜体，em表示强调的文本
        35.浏览器的内核有哪些？分别有什么代表的浏览器？
        
        IE: trident内核
        Firefox：gecko内核
        Safari:webkit内核
        Opera:以前是presto内核，Opera现已改用Google - Chrome的Blink内核
        Chrome:Blink(基于webkit，Google与Opera Software共同开发)
        36.浏览器是如何渲染页面的？
        
        1.解析文档构建DOM树
        HTML/XHTML/SVG：解析这三种文件后，会生成DOM树（DOM Tree）
        CSS：解析样式表，生成CSS规则树（CSS Rule Tree）
        JavaScript：解析脚本，通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，与用户进行交互。
        2.构建渲染树
        解析文档完成后，浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上，并根据DOM Tree 和 CSS Rule Tree构造 Rendering Tree（渲染树）
        3.布局与绘制渲染树
        解析position, overflow, z-index等等属性，计算每一个渲染树节点的位置和大小，此过程被称为reflow。最后调用操作系统的Native GUI API完成绘制（repain）。
        37.TCP为什么需要三次握手和四次挥手
        
        三次握手是为了建立可靠的数据传输通道，四次挥手则是为了保证等数据完成的被接收完再关闭连接。
        
        38.TCP三次握手
        
        当有客户端需要建立连接的时候就会发送一个确定连接的报文，此报文是同步报文SYN = 1，并且会生成一个随机的序号 seq = x，这是第一次握手
        当服务端接收到请求连接报文的时候，会发送一个同步报文确认报文，此报文 SYN = 1，并且 ACK = 1，同时服务端也会随机生成一个 seq = y，并将 ack 设置成 x + 1，回传给客户端，这是第二次握手
        当客户端接收到服务端的 ACK 报文后，会回复一个 ACK 确认报文，用于确认确认报文已经收到，此报文 ACK = 1，seq = x + 1, ack = y + 1，这是第三次握手；
        这里有个点说明一下：大写的 ACK 表示报文的类型是确认报文，小写的 ack 是报文里面的确认号，这个确认号是上一次握手对方的 seq 值加 1 得到
        
        
        39.TCP四次挥手
        
        客户端发起 FIN 断开连接的报文，携带随机生成的 seq 值 u，发送给服务端，并且自己处于 FIN-WSIT 状态，这是第一次挥手；
        服务端接收到 FIN 报文后，回复一个确认报文，其中 ACK = 1，随机生成一个 seq，以及 ack = u + 1，这是第二次挥手；
        当服务端数据发送完了过后，再发送一个 FIN 报文给客户端，通知客户端，服务端准备关闭连接了，此报文 FIN = 1，ACK = 1，ack = u + 1，seq = w，这是第三次挥手；
        当客户端收到 FIN 确认报文时再发送一个FIN 的确认报文，其中 ACK = 1，seq = u + 1，ack = w + 1，并进入 TIME-WAIT 状态，当等待 2MSL 后关闭连接，这是第四次挥手。
        
        40.data-属性的作用？
        
        data-为H5新增的为前端开发者提供自定义的属性，
        这些属性集可以通过对象的 dataset 属性获取，
        不支持该属性的浏览器可以通过 getAttribute 方法获取 :
        需要注意的是：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。所有主流浏览器都支持 data-* 属性。
        即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据
        
        41.HTML5新特性？
        
        1.语义化标签
        
        header：定义文档的页眉（头部）
        
        nav: 定义导航链接的部分
        
        footer: 定义文档或节的页脚 (底部)
        
        article: 定义文章内容
        
        section: 定义文档中的节 (section、区段)
        
        aside: 定义其所处内容之外的内容 (侧边)
        
        2.媒体标签
        
        audio：音频
        属性：
        src音频链接
        controls控制面板
        autoplay自动播放
        loop='true’循环播放
        video：视频
        属性：
        poster: 指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面，当然通过poster也可以自己指定
        controls：控制面板
        width，height
        source标签：因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过source来指定视频源。
        3.表单
        
        表单类型:
        email:能够验证当前输入的邮箱地址是否合法
        url :验证URL
        number: 只能输入数字，其他输入不了，而且自带上下增大减小箭头,max属性可以设置为最大值，min可以设置为最小值，value为默认值。
        search : 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
        range : 可以提供给一个范围，其中可以设置max和min以及value，其中
        value属性可以设置为默认值
        color : 提供了一个颜色拾取器
        time : 时分秒
        date : 日期选择年月日
        datatime: 时间和日期(目前只有Safari支持)
        datatime-local: 日期时间控件
        week : 周控件
        month: 月控件
        表单属性：
        placeholder: 提示信息
        autofocus : 自动获取焦点
        autocomplete=“on” 或者 autocomplete=“off”使用这个属性需要有两个前提:
        表单必须提交过
        必须有name属性
        required: 要求输入框不能为空，必须有值才能够提交
        pattern=””里面写入想要的正则模式
        multiple: 可以选择多个文件或者多个邮箱
        form=form表单的ID!
        表单事件：
        oninput 每当input里的输入框内容发生变化都会触发此事件。
        oninvalid 当验证不通过时触发此事件。
        4.进度条，度量器
        
        progress标签:用来表示任务的进度 (IE、Safari不支持) ，max用来表示任务的进度，value表示已完成多少
        meter属性: 用来显示剩余容量或剩余库存 (IE、Safari不支持)
        high/low:规定被视作高/低的范围
        max/min: 规定最大/小值
        value: 规定当前度量值
        5.DOM查询操作
        
        document.querySelector()
        document.querySelectorAll()
        6.Web存储
        
        localStorage和sessionStorage
        7.其他
        
        拖放：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。设置元素可拖放
        canvas和svg
        websocket，webwork
        地理定位
        data-自定义属性
        42.web worker的理解？如何创建？
        
        在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。
        
        创建：
        
        检测浏览器对于 web worker 的支持性
        创建 web worker 文件 (js，回传函数等)
        创建 web worker 对象
        43.说下HTML5 drag API
        
        dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
        darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
        dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
        dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
        dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
        drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
        dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。
        
        44.Http 短轮询、长轮询
        
        轮询：是由由客户端每隔一段时间(如每隔5s) 向服务器发出HTTP请求，服务端接收到请求后向客户端返回最新的数据。
        
        客户端轮循：短轮询，长轮询
        
        短轮询：一般是由客户端每隔一段时间(如每隔5s) 向服务器发起一次普通 HTTP 请求。服务端查询当前接口是否有数据更新，若有数据更新则向客户端返回最新数据，若无则提示客户端无数据更新
        长轮询：一般是由客户端向服务端发出一个设置较长网络超时时间的 HTTP 请求，并在Http连接超时前，不主动断开连接；待客户端超时或有数据返回后，再次建立一个同样的Http请求，重复以上过程
        45.canvas绘图基础(直线，三角形，矩形，圆形)
        
        id 是canvas元素的标识；
        height,width规定画布大小
        直线：
        
        beginPath()方法，指示开始绘图路径： ctx.beginPath();
        moveTo()方法将坐标移至直线起点： ctx.moveTo(x,y);
        lineTo()方法绘制直线： ctx.lineTo(x,y);
        stroke()方法，绘制图形的边界轮廓： ctx.stroke();
        closePath()方法，指示闭合绘图路径: ctx.closePath()
        
        var mycanvas=document.getElementById("canvas"); var ctx=mycanvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(100,100);//移动到绘制点 ctx.lineTo(200,200); ctx.strokeStyle="#000000"; //指定描边颜色 ctx.stroke();
        
        三角形：
        
        var mycanvas=document.getElementById("canvas"); var ctx=mycanvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(100,200); ctx.lineTo(400,200); ctx.lineTo(250,400); ctx.closePath();//闭合绘图 ctx.strokeStyle="#000000"; ctx.stroke();
        
        矩形：
        
        绘制矩形：rect(x,y,width,height)；
        
        绘制矩形边框：strokeRect(x, y, width, height);
        
        绘制填充矩形：fillRect(x, y, width, height);
        
        擦除指定矩形区域：clearRect(x, y, width, height);
        
        var mycanvas=document.getElementById("canvas"); var ctx=mycanvas.getContext("2d"); //rect()函数调用 ctx.beginPath(); ctx.rect(20,20,100,50); ctx.stroke();
        
        圆形：arc(centerx,centery,radius,startAngle,endAngle,antiClockwise);
        
        centerx,centery 圆弧中心点坐标
        Radius 半径
        startAngle 起始弧度
        endAngle 终止弧度
        antiClockwise 是否按逆时针方向绘图，是一个可选参数，默认为false（即顺时针方向绘图）
        弧度 = 角度* ( Math.PI / 180 )
        var mycanvas=document.getElementById("canvas"); var ctx=mycanvas.getContext("2d"); //arc()函数调用 ctx.beginPath(); ctx.arc(100,150,70,0,90*Math.PI/180,true); ctx.stroke();
        
        46.TCP和HTTP区别？
        
        TCP对应于传输层，HTTP对应于应用层，从本质上来说，二者没有可比性。
        
        Http协议是建立在TCP协议基础之上的，当浏览器需要从服务器获取网页数据的时候，会发出一次Http请求。Http会通过TCP建立起一个到服务器的连接通道，当本次请求需要的数据完毕后，Http会立即将TCP连接断开，这个过程是很短的。所以Http连接是一种短连接，是一种无状态的连接
        
        TCP是底层协议，定义的是数据传输和连接方式的规范。
        
        HTTP是应用层协议，定义的是传输数据的内容的规范。
        
        HTTP协议中的数据是利用TCP协议传输的，所以支持HTTP就一定支持TCP
        
        二、CSS 篇
        
        1. 介绍一下 CSS 的盒子模型？
        
        margin(外边距)- 清除边框外的区域，外边距是透明的。
        border(边框)- 围绕在内边距和内容外的边框。
        padding(内边距)- 清除内容周围的区域，内边距是透明的。
        content(内容)- 盒子的内容，显示文本和图像。
        
        W3C的标准盒模型：在标准的盒子模型中，width指content部分的宽度
        
        IE的盒模型：在IE盒子模型中，width表示content+padding+border这三个部分的宽度
        
        如何开启不同盒子模型
        box-sizing:content-box; 标准盒子模型
        box-sizing:border-box; IE盒子模型
        2.css选择器？
        
        id选择器（#box），选择id为box的元素
        类选择器（.one），选择类名为one的所有元素
        标签选择器（div），选择标签为div的所有元素
        后代选择器（#box div），选择id为box元素内部所有的div元素
        子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
        相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
        群组选择器（div,p），选择div、p的所有元素
        伪类选择器
        属性选择器
        3. css 选择器优先级？
        
        !important > 行内样式（比重1000）> ID 选择器（比重100） > 类选择器（比重10） > 标签（比重1） > 通配符 > 继承 > 浏览器默认属性
        
        4.css中可继承属性？
        
        字体系列属性
        font-family:字体系列
        font-weight：字体粗细
        font-size：字体大小
        font-style：字体风格
        文本系列属性
        text-indent：文本缩进
        text-align：文本水平对齐
        line-height：行高
        color：文字颜色
        元素可见性：visibility
        列表布局属性：list-style
        光标属性：cursor
        5. 垂直居中几种方式？
        
        将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle
        使用flex布局，设置为align-item：center
        绝对定位中设置bottom:0,top:0,并设置margin:auto
        绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值
        文本垂直居中设置line-height为height值
        6. 简明说一下 CSS link 与 @import 的区别和用法？
        
        link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
        页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
        import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题
        7. rgba和opacity的透明效果有什么不同？
        
        Rgba即可以指定元素颜色也可以指定透明度，opacity只能控制元素透明度不能设置颜色
        Rgba透明度是基于实际颜色而opacity是针对元素本身透明度设置，在使用rgba是可以实现元素不同部位透明度不同，而opacity使元素透明度一致
        支持rgba的浏览器比支持opacity的更普遍但是在低版本的ie中rgba不被支持而支持opacity
        8.display的属性值及作用
        
        
        
        9.display的block，inline和inline-block区别？
        
        block: 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性;
        
        inline: 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin;
        
        inline-block: 将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。
        
        10. display:none和visibility:hidden的区别？
        
        display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
        visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
        
        11. position的值， relative和absolute分别是相对于谁进行定位的？
        
        relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。
        absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位。最终找到body
        fixed: （老版本IE不支持）生成绝对定位，相对于浏览器窗口或者frame进行定位。
        static:默认值，没有定位，元素出现在正常的文档流中。
        sticky:生成粘性定位的元素，容器的位置根据正常文档流计算得出。
        
        12.隐藏元素的方法有哪些？
        
        display: none: 渲染树不会包含该染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
        
        visibility: hidden: 元素在页面中仍占据空间，但是不会响应绑定的监听事件
        
        opacity: 0: 将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件
        
        position: absolute: 通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏
        
        z-index: 负值: 来使其他元素遍盖住该元素，以此来实现隐藏
        
        transform: scale(0,0): 将元索缩放为 0，来实现元素的隐藏。
        
        13.transition和animation区别？
        
        触发方式不同：transition 通过 CSS 属性值的变化来触发动画效果，而 animation 则需要通过设置关键帧（keyframes）来指定动画序列。
        控制方式不同：transition 只能控制开始和结束状态之间的过渡动画，而 animation 可以指定多个关键帧，控制元素动画的每一个阶段，包括动画开始、中间和结束的时刻、变换状态以及持续时间等。
        耗费资源不同：相对来说，animation 消耗的浏览器资源更多，因为它需要计算多个关键帧之间的动画效果，而 transition 只需在两种状态之间进行简单的计算即可。
        兼容性不同：transition 相对来说更加兼容不同的浏览器，而 animation 在某些旧版浏览器上可能无法正常工作。
        14.伪元素和伪类区别？
        
        伪元素：是创造文档树之外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。伪元素还提供一些在源文档中不存在的内容分配样式，例如:before和:after能够访问产生的内容。伪元素的内容实际上和普通DOM元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
        
        伪类：是基于元素的特征而不是他们的id、class、属性或者内容。一般来说，元素的特征是不可以从DOM树上推断得到的，而且其是动态的，当用户和DOM进行交互的时候，元素可以获得或者失去一个伪类。（这里有一个例外，就是:first-child和:lang是可以从DOM树中推断出来的。）
        
        两者的异同
        
        相同：
        
        伪类和伪元素都不出现在源文件和文档树中。也就是说在html源文件中是看不到伪类和伪元素的。
        差异：
        
        伪类其实就是基于普通DOM元素而产生的不同状态，他是DOM元素的某一特征。伪元素能够创建在DOM树中不存在的抽象对象，而且这些抽象对象是能够访问到的。
        15.对requestAnimationframe的理解
        
        HTML5 提供一个专门用于请求动画的API
        
        语法：
        
        window.requestAnimationFrame(callback); 其中，callback是下一次重绘之前更新动画顿所调用的函数(即上面所说的回调函数)。该回调函数会被传入DOMHighResTimeStamp参数，它表示requestAnimationFrame()开始去执行回调函数的时刻。该方法属于宏任务，所以会在执行完微任务之后再去执行。
        取消动画：
        
        使用cancelAnimationFrame()来取消执行动画，该方法接收-个参数–requestAnimationFrame默认返回的id，只需要传入这个id就可以取消动画了。
        优势：
        
        CPU节能
        函数节流
        减少DOM操作
        16.li 与 li 之间有看不见的空白间隔是什么原因引起的? 如何解决?
        
        浏览器会把inline内联元素间的空白字符(空格、换行、Tab等) 染成一个空格。为了美观，通常是一个
        
        放在一行，这导致
        换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。
        
        解决：
        
        为
        设置float:left。不足: 有些容器是不能设置浮动，如左右切换的焦点图等.
        将所有
        写在同一行。不足: 代码不美观。
        将内的字符尺寸直接设为0，即font-size:0。不足:
        中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。
        消除
        的字符间隔letter-spacing:-8px，不足: 这也设置了
        内的字符间隔，因此需要将
        内的字符间隔设为默认letter-spacing:normal。
        17.CSS3新特性
        
        新增各种css选择器(:not(.input):所有class不是’input’的节点)：属性选择器，伪类选择器，伪元素选择器，基本选择器
        三个边框属性
        border-radius：创建圆角边框
        border-shadow：为元素添加阴影
        border-image：使用图片来绘制边框
        背景
        background-clip：确定背景画区
        background-origin：设置是从border-box，padding-box，content-box那个盒子的左上角开始对其
        background-size：调整背景图片大小
        background-break：元素可以被分成几个独立的盒子
        文字
        word-wrap：normal|break-word 使用浏览器默认的换行|允许在单词内换行
        text-overflow：设置或检索当前行超过指定容器的边界如何显示，属性由两个值
        clip：修剪文本
        ellipsis：显示省略符号来代表被修剪的文本
        text-shadow：可向文本应用阴影。能够规定水平阴影，垂直阴影，模糊距离，以及阴影颜色
        text-decoration：CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可以提供
        text-fill-color：设置文字内部填充颜色
        text-stroke-color：设置文字边界填充颜色
        text-stroke-width：设置文字边界宽度
        颜色（新增颜色表示方式rgba与hsla）
        rgba分为两部分，rgb为颜色值，a为透明度
        hsla分为四部分，h为色相，s为饱和度，l为亮度，a为透明度
        transition过渡，transform转换，animation动画
        flex弹性布局，Grid栅格布局
        媒体查询
        18.创建图片格式(简述)
        
        BMP:是无损的、既支持索引色也支持直接色的点阵图
        GIF:是无损的、采用索引色的点阵图。采用LZW压缩算法进行编码
        JPEG:是有损的、采用直接色的点阵图。JPEG的图片的优点是采用了直接色，得益于更丰富的色彩
        PNG-8:是无损的、使用索引色的点阵图。
        PNG-24:是无损的、使用直接色的点阵图。
        SVG:是无损的矢量图。SVG是矢量图意味着SVG图片由直线和曲线以及绘制它们的方法组成
        WebP:是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的点阵图。
        19. 画一条0.5px的直线？
        
        考查的是css3的transform
        
        height: 1px; transform: scale(0.5);
        
        20. calc, support, media各自的含义及用法？
        
        @support 主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。
        calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算；
        @media 查询，你可以针对不同的媒体类型定义不同的样式。
        21.px和em,rem区别？
        
        px:绝对长度单位，像素px是相对于显示器屏幕分辨率来说的
        em:相对长度单位，相对于当前对象内文本的font-size，em的值并不是固定的，em会继承父级元素的font-size（参考物是父元素的font-size）
        rem:相对于html根元素的font-size
        
        22. 1rem、1em、1vh、1px，vmin，vmax各自代表的含义？
        
        rem
        rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
        em
        子元素字体大小的em是相对于父元素字体大小
        元素的width/height/padding/margin用em的话是相对于该元素的font-size
        vw/vh
        全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的话 vh 单位更好。
        px
        px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
        一般电脑的分辨率有{19201024}等不同的分辨率
        19201024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素
        vmin/vmax: 取视窗高度和宽度的最小值作为基准/取视窗高度和宽度的最大值作为基准。
        如果窗口高度1080，宽度1920那么。 1vmin=1080px/100=10.8px 1vmax=1920px/100=19.2px。
        23. CSS画一个三角形？
        
        这属于简单的css考查，平时在用组件库的同时，也别忘了原生的css
        
        .a { width: 0; height: 0; border-width: 100px; border-style: solid; border-color: transparent #0099CC transparent transparent; transform: rotate(90deg); /*顺时针旋转90°*/ }
        
        24.元素水平垂直居中
        
        利用定位+margin:auto
        利用定位+margin:负值
        利用定位+transform
        table布局
        flex布局
        grid布局
        25.响应式布局原理
        
        什么是响应式：一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸，屏幕定向等）进行相应的响应和调整
        基本原理：通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport.
        实现方式
        媒体查询
        百分比布局
        vw/vh
        rem
        26.CSS定位方式？
        
        static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
        
        relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
        
        absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
        
        fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
        
        27.css sprite（雪碧图，精灵图）是什么,有什么优缺点？
        
        CSSSprites(精灵图)，将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。
        
        优点：
        
        减少HTTP请求，极大提高页面加载速度
        增加图片信息重复度，提高压缩比，减少图片大小
        更换风格方便，只需要在一张或几张图片上修改颜色或样式即可
        缺点：
        
        图片合并麻烦
        维护麻烦
        28.设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？
        
        设备像素：又称为物理像素，指设备能控制显示的最小物理单位，不一定是一个小正方形区块，也没有标准的宽高，只是用于显示丰富色彩的一个“点”而已
        
        css像素：适用于web编程，在 CSS 中以 px 为后缀，是一个长度单位。css中长度分为两类：绝对单位和相对单位，px属于相对单位
        
        设备独立像素：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念。我们常说的分辨率，不严谨来讲是指的设备独立像素。在javascript中我们可以通过 window.screen.width/ window.screen.height 来查看
        
        dpr：设备像素比，代表设备独立像素到设备像素的转换关系
        
        ppi：像素密度，表示每英寸所包含的像素点数目
        
        29.margin 和 padding 的使用场景
        
        需要在border外侧添加空白，且空白处不需要背景 (色)时，使用 margin;
        
        需要在border内测添加空白，且空白处需要背景(色) 时，使用 padding。
        
        30.对line-height的理解，赋值方式
        
        概念：
        
        line-height 属性设置行间的距离（行高），说的直白一点，就是设置两段段文本之间的距离如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了。
        原理：
        
        我们可以理解为将div分为三份，分别为上边距，内容，下边距。举例：div高度100px，字体为16px，那么上下边距计算为(100px-16px)/2
        赋值方式：
        
        带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
        纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
        百分比：将计算后的值传递给后代
        31.谈谈你对BFC的理解？触发条件？应用场景？
        
        概念： BFC即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则。BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素
        
        触发条件：
        
        根元素，即HTML元素
        浮动元素：float值为left、right
        overflow值不为 visible，为 auto、scroll、hidden
        display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
        position的值为absolute或fixed
        应用场景：
        
        防止margin重叠
        清楚内部浮动
        自适应多栏布局
        32.如何实现两栏布局，右侧自适应？三栏布局中间自适应？
        
        两栏布局：
        
        使用float左浮动左边栏，右边使用margin-left撑出左边栏宽度大小，为父元素添加BFC通过overflow：hidden开启。
        flex布局
        三栏布局：
        
        下面三个方法原理与两栏布局第一个方法相同
        两边使用 float，中间使用 margin
        两边使用 absolute，中间使用 margin
        两边使用 float 和负 margin
        flex布局
        display: table 实现
        通过 display: table设置为表格，设置 table-layout: fixed`表示列宽自身宽度决定，而不是自动计算。
        内层的左中右通过 display: table-cell设置为表格单元。
        左右设置固定宽度，中间设置 width: 100% 填充剩下的宽度
        grid网格布局
        33.说说flexbox（弹性盒布局模型）,以及适用场景？
        
        理解：flex布局意为“弹性布局”，可以简便、完整、响应式地实现各种页面布局。容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向
        
        属性：
        
        flex-direction 决定主轴的方向
        flex-wrap 决定容器内项目是否可换行
        wrap，换行
        justify-content 项目在主轴上的对齐方式
        flex-start（默认值）：左对齐
        flex-end：右对齐
        center：居中
        space-between：两端对齐，项目之间的间隔都相等
        space-around：两个项目两侧间隔相等
        align-items 项目在交叉轴上如何对齐
        flex-start：交叉轴的起点对齐
        flex-end：交叉轴的终点对齐
        center：交叉轴的中点对齐垂直居中
        baseline: 项目的第一行文字的基线对齐
        stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
        align-content
        34.介绍一下grid网格布局
        
        理解：Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列
        
        容器属性：
        
        display：grid该容器是一个块级元素/inline-grid该容器是一个行内元素
        grid-template-columns 属性，grid-template-rows 属性：
        设置列宽，行高几行几列。如果重复宽高可通过repeat(3,200px)表示3行列，200px宽高
        grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性
        设置行列间距，grid-gap是两者简写
        grid-template-areas 属性：用于定义区域
        grid-auto-flow 属性：划分网格以后，容器的子元素会按照顺序，顺序就是由grid-auto-flow决定
        项目属性：
        
        grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性：指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置
        grid-area 属性：属性指定项目放在哪一个区域。由grid-template-areas 属性划分区域
        justify-self 属性、align-self 属性以及 place-self 属性

VPS购买请点击我

前端面试题汇总大全（含答案超详细）-- 持续更新

一、HTML 篇

1.xhtml和html有什么区别

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

3. 简述一下你对 HTML 语义化的理解？

4. 标签上 title 与 alt 属性的区别是什么？

5. iframe的优缺点？

6. href 与 src？

7.什么是优雅降级渐进增强？

8.HTTP的几种请求方法用途？

9.HTTP状态码都有哪些？

10.DOCTYPE (⽂档类型) 的作⽤ ？

11.前端需要注意哪些SEO？

12.script标签中defer和async的区别 ？

13.常用meta标签有哪些？

14.一次完整的HTTP事务是怎么一个过程?

15.HTTP和HTTPS区别？

16.HTTPS是如何实现加密？

17.img的srcset属性作用？

18.WEB标准以及W3C标准是什么?

19.HTML5的离线存储怎么使用？工作原理？

20.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?

21.label的作用是什么？

22.Canvas和SVG区别？

23.head 标签有什么作用，其中什么标签必不可少?

24.严格模式与混杂模式如何区分? 它们有何意义?

25.浏览器乱码的原因是什么？如何解决？

26. 浏览器存储技术 ?

27.CSS定位方式？

28.尽可能多的写出浏览器兼容性问题？解决

29.HTML全局属性(global attribute)有哪些

30.网页验证码是干嘛的，是为了解决什么安全问题

31.为什么利用多个域名来存储网站资源会更有效？

32.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

33.web开发中会话跟踪的方法有哪些

34.title与h1的区别、b与strong的区别、i与em的区别

35.浏览器的内核有哪些？分别有什么代表的浏览器？

36.浏览器是如何渲染页面的？

37.TCP为什么需要三次握手和四次挥手

38.TCP三次握手

39.TCP四次挥手

40.data-属性的作用？

41.HTML5新特性？

42.web worker的理解？如何创建？

43.说下HTML5 drag API

44.Http 短轮询、长轮询

45.canvas绘图基础(直线，三角形，矩形，圆形)

46.TCP和HTTP区别？

二、CSS 篇

1. 介绍一下 CSS 的盒子模型？

2.css选择器？

3. css 选择器优先级？

4.css中可继承属性？

5. 垂直居中几种方式？

6. 简明说一下 CSS link 与 @import 的区别和用法？

7. rgba和opacity的透明效果有什么不同？

8.display的属性值及作用

9.display的block，inline和inline-block区别？

10. display:none和visibility:hidden的区别？

11. position的值， relative和absolute分别是相对于谁进行定位的？

12.隐藏元素的方法有哪些？

13.transition和animation区别？

14.伪元素和伪类区别？

15.对requestAnimationframe的理解

16.li 与 li 之间有看不见的空白间隔是什么原因引起的? 如何解决?

17.CSS3新特性

18.创建图片格式(简述)

19. 画一条0.5px的直线？

20. calc, support, media各自的含义及用法？

21.px和em,rem区别？

22. 1rem、1em、1vh、1px，vmin，vmax各自代表的含义？

23. CSS画一个三角形？

24.元素水平垂直居中

25.响应式布局原理

26.CSS定位方式？

27.css sprite（雪碧图，精灵图）是什么,有什么优缺点？

28.设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？

29.margin 和 padding 的使用场景

30.对line-height的理解，赋值方式

31.谈谈你对BFC的理解？触发条件？应用场景？

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

10.DOCTYPE (⽂档类型) 的作⽤？

12.script标签中defer和async的区别？