前端面试题总结——综合题（持续更新中）1、从输入URL到页面加载完成显示，这个过程发生了什么？（过程越详细越好）1、输入域名地址2、发送到DNS服务器，获取该域名对应的WEB服务器IP地址；3、与WEB服务器建立TCP连接；4.服务器永久重定向响应（从http://example.com到http://www.example.com）5.浏览器跟随重定向地址6.服务器处理请求7.服务器返回一个HTTP响应8.浏览器显示HTML9.浏览器发送请求获取资源（如图片、音频、视频、CSS、JS等）10.浏览器发送异步请求2.浏览器工作原理1.用户界面2.网络3.UI后端4.数据存储5.浏览器引擎6.渲染引擎7.js解释器3.浏览器解析过程：过程：解析html构建dom树->构建渲染树->布局渲染树->绘制渲染树4.说说你对浏览器内核的理解？主要分为两部分：渲染引擎??（layoutengineer或RenderingEngine）和JS引擎。渲染引擎：负责获取网页的内容（HTML、XML、图片等），组织信息（如添加CSS等），计算网页的显示方式，然后输出到显示器或打印机。不同的浏览器内核对网页的语法解释不同，因此呈现的效果也不同。所有Web浏览器、电子邮件客户端和其他编辑和显示Web内容的应用程序都需要内核。JS引擎：解析执行javascript，实现网页动态效果。起初，渲染引擎和JS引擎并没有明确区分。后来JS引擎越来越独立，内核趋向于只指渲染引擎。5.常见的浏览器内核有哪些？Trident内核：IE、360、Maxthon、Sogou、世界之窗、腾讯等[又名MSHTML]Gecko内核：Netscape6及以上、FF、MozillaSuite/SeaMonkey等Presto内核：Opera7及以上。【Opera内核原为：Presto，现为：Blink；】Webkit内核：Safari、Chrome等。[Chrome:Blink(forkofWebKit)]6.请描述cookies、sessionStorage和localStorage的区别？Cookie是网站为了识别用户身份而存储在用户本地终端（ClientSide）的数据（通常是加密的），该数据将在浏览器和服务器之间来回传输。sessionStorage和localStorage不会自动向服务器发送数据，只是保存在本地。存储大小：cookie数据大小不能超过4k。sessionStorage和localStorage虽然也有存储大小的限制，但是比cookie大很多，可以达到5M甚至更大。过期时间：localStorage存储持久化数据，浏览器关闭后数据不会丢失，除非主动删除数据；sessionStorage数据在当前浏览器窗口关闭后自动删除。cookie设置的cookie在cookie过期时间之前有效，即使窗口或浏览器关闭。7.请大致描述一下页面访问cookies的限制。跨域问题，设置了HttpOnly。8、如何实现浏览器中多个标签页之间的通信？（阿里）调用localstorge、cookies等本地存储方式9、PageVisibilityAPI有哪些用途？通过visibilityState的值检测页面当前是否可见，以及打开网页的时间；当页面切换到其他后台进程时，自动暂停音乐或视频的播放；10、网页验证码有什么用？安全问题。区分用户是计算机还是人的公共全自动程序。可防止恶意破解密码、刷票、泛滥论坛；可有效防止黑客通过特定程序暴力破解方法对特定注册用户进行连续登录尝试。11、为什么要用多个域名来存放网站资源？CDN缓存更方便，突破浏览器并发限制，节省cookie带宽，节省主域名连接数，优化页面响应速度，防止不必要的安全问题12、请谈谈您对web标准重要性的理解和标准制定组织。网页标准和标准制定组织都是为了让网络更“健康”。开发者遵循统一标准，降低开发难度和开发成本。SEO也会更好，不会因为滥用代码导致各种BUG。、安全问题，最终提高网站的可用性。13.你知道什么是微格式吗？ 微格式（Microformats）是机器可读的语义XHTML词汇的集合，是结构化数据的开放标准。是一种特殊应用的特殊格式 优点：为网页添加智能数据，使网站内容在搜索引擎结果界面显示额外提示。14、一个页面图片很多，加载很慢。你有什么方法来优化这些图片的加载，让用户有更好的体验。(1)图片的延迟加载。可以在页面的不可见区域添加滚动条事件，判断图片的位置距离浏览器顶部的距离和页面的距离。如果前者小于后者，则先加载。(2)如果是幻灯片、相册等，可以使用图片预加载技术，先下载当前显示图片的上一张和下一张。(3)如果图片太大，可以使用经过特殊编码的图片。加载时，会先加载经过特别压缩的缩略图，以提升用户体验。(4)如果图片显示区域小于图片实际尺寸，则根据业务需要先在服务器端对图片进行压缩，压缩后的图片与展示图片大小一致。15、从前端的角度谈谈做好SEO（搜索引擎）需要考虑什么？适当的标签使用、主要互联网目录、链接交换和链接流行度。16.写下一些前端性能优化的方法，越多越好1.减少dom操作2.部署前，图片压缩，代码压缩3.优化js代码结构，减少冗余代码4.减少http请求，合理设置HTTP缓存5.使用内容分发cdn加速6.静态资源缓存7.图片懒加载17.描述一下渐进增强和优雅降级的区别？区别：优雅降级从复杂的现状开始，并试图减少用户体验配置，而渐进式增强则从非常基本的工作版本开始，并扩展以满足未来环境的需求。退化（功能衰退）意味着向后看；渐进增强意味着向前看，同时将其根植于安全的地方。18、webSocket如何兼容低端浏览器？（阿里巴巴）AdobeFlashSocket、ActiveXHTMLFile（IE）、基于multipart编码的XHR、基于长轮询的XHR19.Web开发中session跟踪的方法有哪些2.Sessionurl重写4.隐藏输入5.IP地址20.HTTP方法服务器必须兼容HTTP1.1，只要为资源实现GET和HEAD方法即可。GET是最常用的方法，通常用于请求服务器发送某种资源。HEAD类似于GET，但服务器返回响应中的标头，而不是实体的主体。PUT告诉服务器使用请求的主体创建一个以请求的URL命名的新文档，或者，如果该URL已经存在，则只需将其替换为该主体。POST最初用于向服务器输入数据。事实上，它经常被用来支持HTML表单。填写表格的数据通常会发送到服务器，然后服务器将其发送到需要去的地方。TRACE会在目的服务器上发起环回诊断，最后一个服务器会反弹回一个TRACE响应，并在响应体中携带它收到的原始请求报文。TRACE方法主要用于诊断，以验证请求是否按预期遍历了请求/响应链。OPTIONS方法请求网络服务器通知它支持的各种功能。可以查询服务器支持哪些方法或者某些特殊资源支持哪些方法。DELETE请求服务器删除请求URL指定的资源21、HTTP响应报文的结构是什么？rfc2616中定义：第一行是状态行包括：HTTP版本、状态码、状态描述，后面跟着一个CRLF第一行后面跟着几行响应头，包括：通用头、响应头、实体头响应头和响应实体由CRLF空行分隔。最后一个可能的消息实体响应消息示例如下：22.HTTP状态码及其含义状态码类型状态码类别原因短语1XXInformation（信息性状态码）收到的请求正在处理中2XXSuccess（成功状态码）的requestisprocessednormally3XXRedirection（重定向状态码）需要额外操作才能完成请求4XXClientError（客户端错误状态码）服务器无法处理请求5XXServerError（服务器错误状态码）服务器处理请求错误204:服务器处理成功，但没有返回内容。304:NotModified未修改。请求的资源没有被修改。服务器返回此状态码时，不会返回任何资源。客户端通常通过提供一个标头来缓存访问的资源，表明客户端希望只返回在指定日期之后修改的资源400：BadRequest客户端请求的语法不正确，服务器无法理解403：Forbidden服务器理解客户端的请求请求，但拒绝执行此请求404:NotFound服务器无法根据客户端的请求找到资源（网页）。undefinedBFC的全称是“BlockFormattingContext”，中文意思是“BlockFormattingContext”。流体特性：块状水平元素，如div元素（下同），默认（非浮动，绝对定位等），水平方向会自动填充外部容器；BFC元素特性的原则是内部子元素不影响外部元素。28.你如何优化网站的文件和资源？预期解决方案包括：文件合并、文件最小化/文件压缩、使用CDN托管缓存（多个域名提供缓存）等。29.你用什么工具来测试代码的性能？分析器、JSPerf、Dromaeo。30、如果网页内容需要支持多种语言，你会怎么做？1.应用字符集的选择，UTF-8编码2.语言书写习惯&导航结构3.数据库驱动的网站31.如果在设计中使用了非标准字体，你是如何实现的？所谓标准字体就是大多数机器上都有的字体，或者即使没有也可以用默认字体代替的字体。方法：使用图片代替网络字体在线字体，如GoogleWebfonts、Typekit等；http://www.chinaz.com/free/20...；@font-face、Webfonts（字体服务如：GoogleWebfonts、Typekit等）32.：如何自学一门新的编程语言（1）了解背景知识：历史、现状、特点、应用领域、发展趋势(2)搭建开发环境，编写HelloWorld(3)声明变量和常量(4))数据类型(5)运算符(6)逻辑结构(7)通用小程序(8)函数和对象(9)第三方库、组件、框架（10）实践项目33.什么是哈希表？哈希表（也称哈希表）是一种根据键码值直接访问的数据结构。也就是说，它通过将键值映射到表中的某个位置来访问记录，以加快查找速度。这种映射函数称为哈希函数，存储记录的数组称为哈希表。34.静态网页和动态网页的区别：静态：网页内容任何人随时访问都不会改变HTML/CSS/JS/video/audio动态：网页内容可能不同JSP/PHP在不同时间被不同人访问时/ASP.NET/Node.JS35.SQL语句的分类DDL：数据定义语句CREATE/DROP/ALTER...DCL：数据控制语句GRANT...DML：操作操作语句INSERT/UPDATE/DELETEDQL：查询语句SELECT36。如何学习新技术：第三步：去官网看看是什么去官网看快速入门，下载手册备查37.什么是弹性布局？解决一个元素中“子元素”的布局方式，为布局提供最大的灵活性。设置flex布局后，子元素的float、clear、vertical-align属性将失效！！！display:flex;属性align-self定义子元素的位置。38.写回应？1.声明viewportmeta标签2.使用流体布局3.所有容器使用相对大小而不是绝对大小4.（最重要的原则）使用CSS3MediaQuery技术39.常见的浏览器兼容性问题？1.不同浏览器的选项卡有不同的默认内部和外部补丁。*{margin:0;padding:0;}2、图片默认有间距。使用float属性作为img布局3.居中问题（而FF默认左对齐）margin:0auto;4.moz-Firefox-o-Opera-webkit-Chrome5。使用CSSHack如：+:IE6,7的前缀-:IE6的前缀40.H5新特性：共10点（1）Canvas绘图（2）SVG绘图（3）Geolocation（4）WebWorkerWebworker是后台运行的JS，独立于其他脚本，不会影响页面的性能。（5）WebStorage1.Cookie技术（兼容性好，数据不能超过4kb，操作复杂）2.（兼容性差，数据8MB，操作简单）sessionStorage3.localStorage（6）WebSocketWebSocket协议是一种新的基于TCP的网络协议协议。它实现了浏览器和服务器之间的全双工（full-duplex）通信——允许服务器主动向客户端发送信息。41.C3的新特性：共7点1.复杂的选择器2.灵活的布局3.动画42.Less，SassLess是一种CSS预处理语言，扩展了CSS语言，增加了变量、函数等特性，使得CSS更易于维护和扩展。43ES6新特性：共8分1.ES7只有2个特性：1.includes()验证数组中是否存在元素2.指数运算符2.ES8新特性：Object.values()Object.entries()padStart()padEnd()Object.getOwnPropertyDescriptors()函数参数列表的结尾允许逗号Async/Await43。原生ajaxfunctionsetRequest(){//1.获取xhr对象varxhr=createXhr();//2。创建请求xhr.open("get","response.php",true);//3。设置回调函数-onreadystatechangexhr.onreadystatechange=function(){//判断readyState和状态if(xhr.readyState==4&&xhr.status==200){//接收响应数据varresText=xhr.responseText;//在控制台打印console.log(resText);}}//4。发送请求xhr.send(null);}44.通过jsonp跨域1.)原生实现：2、跨域资源共享（CORS）只要服务器设置Access-Control-Allow-Origin可以nodejs中间件代理跨域45.什么是typescript1。它是JavaScript的超集，本质上是在语言2中添加了可选的静态类型和基于类的面向对象编程。TypeScript扩展了JavaScript的语法，因此任何现有的JavaScript程序都可以在TypeScript下不加改动地工作。TypeScript专为开发大型应用程序而设计，编译时会生成JavaScript以确保兼容性。46.三大框架的区别：Angular具有比较强的排他性，React崇尚函数式编程的理念。它不像Angular那样具有侵入性，主要是因为它是软侵入。vueprogressive47.spa应用优势：用户体验好，前后端分离好。缺点：1.不利于SEO。2.初始加载时间相对增加。3.导航不可用。如果一定要导航，就需要自己实现前进和后退。48.什么是模块化编程？在每个模块内部，模块变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是一个外部接口。加载模块实际上是加载模块的module.exports属性。49.什么是混合编程？混合编程是指使用两种或多种编程语言开发应用程序的过程。50.性能优化？1.使用CDN2.图片延迟加载3.使用外部JavaScript和CSS4.压缩JavaScript、CSS、字体、图片等5.优化CSSSprite6.减少HTTP请求次数7.减少DNS查询8.减少DOM元素的数量9.减少DOM操作10.将脚本放在页面底部51.什么是HTTP协议：HTTP协议传输的数据是不加密的，即明文，所以非常使用HTTP协议传输隐私信息是不安全的，而HTTPS协议是由SSL+HTTP协议构建的加密传输和身份认证的网络协议，比http协议更安全。HTTPS与HTTP的主要区别如下： 1。https协议需要向CA申请证书。一般免费证书很少，需要一定的费用。 2。http是超文本传输??协议，信息以明文传输，https是安全的ssl加密传输协议。 3。http和https使用完全不同的连接方式和不同的端口。前者是80，后者是443。 4。http连接非常简单，无状态；HTTPS协议是由SSL+HTTP协议构建的可以进行加密传输和身份认证的网络协议，比http协议更安全。前端加密方式https：在http的基础上增加了SSL协议，使用443端口，http为80端口；
