Web前端面试题集

1、 怎么样从web前端方面优化性能？至少列举5点？

• 减少Http请求：合并CSS，合并javascipt，合并图片

• • http协议是无状态的应用层协议，每次HTTP请求都需要建立通信链路、进行数据传输，如果包含大量的图片、css、js文件，会频繁的与服务器建立链接并释放链接，会造成资源浪费，增加服务器和浏览器的的负担。

• 使用浏览器缓存：CSS、jS、logo、图标静态资源文件更新频率比较低，将文件缓存到浏览器，极好的改善性能。
• CSS文件放在Html的head头部，js文件放在页面下面
• 压缩CSS文件和JS文件：移除注释、删除空格、替换字符，合并css属性值
• 减少对DOM的操作：修改和访问DOM元素会造成页面的重绘和重排
• 正确理解Repaint和Reflow

• • Repaint(重绘)就是改变一个元素的外观，不改变布局宽高的情况下发生，例如visibility，outline，background-color
  • Reload(重排)就是DOM元素的宽高发生了变化，会重新计算于元素的几何属性，浏览器会验证DOM树上所有其他节点的visibility属性。如果reload过于频繁，cpu使用率就会上升

• 使用JSON格式数据交换

• • JSON是一种轻量级的数据交换格式，是js原生格式，不需要其他的工具包和API

• 减少Cookie传输

• • 静态资源访问可以考虑使用独立域名访问，css、js文件发送cookie没有意义

• 使用CDN加速（内容分发网络）

• • CDN本质上是一个缓存，将数据缓存在离用户最近的地方，使用户以最快的速度获取数据

2、CSS Filter，CSS Expressions(CSS表达式)，CSS Sprites，CSS hack，CSS reset

• css filter：css3中的滤镜属性，包括灰度、褐色、饱和度、色相旋转、反色、透明度、亮度、对比度、模糊、阴影
• css expressions：动态设置css属性的强大方法，可以在css表达式中执行js代码，会反复执行，每秒钟可能执行千百次，有严重的性能问题。
• css spirites：css精灵，是一种网页图片处理方式，将一个页面中的零星图片包含到一张大图中。优化性能的关键不是降低质量，而是减少个数。合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。
• css hack：针对不同的浏览器写不同的css代码的过程就叫css hack。不同浏览器对css的解析不同，导致相同的css输出的页面效果不一样，css hack解决局部的浏览器兼容性问题。常见的有三种形式：

• • css属性hack：比如IE6能识别下划线”_”和星号” * “，IE7能识别星号” * “，但不能识别下划线”_”，而firefox两个都不能认识
  • css选择符hack：比如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}
  • IE条件注释hack：比如针对所有IE：<!–[if IE]><!–您的代码–><![endif]–>，针对IE6及以下版本：<!–[if lt IE 7]><!–您的代码–><![endif]–>，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都 会生效。

• css reset：浏览器在实现html标签的默认样式时具有差异性，自定义初始化的css样式全部覆盖掉浏览器的样式实现兼容性，这就是css reset。
• Normalize.css是一种CSS reset的替代方案，它在默认的HTML元素样式上提供了跨浏览器的高度一致性
  • 保护有用的浏览器默认样式而不是完全去掉它们
  • 一般化的样式：为大部分HTML元素提供
  • 修复浏览器自身的bug并保证各浏览器的一致性
  • 优化CSS可用性：用一些小技巧
  • 解释代码：用注释和详细的文档来

3、XML与Json的优缺点

• XML：扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。解析方式DOM和SAX

• • 优点

• • • 格式统一，符合标准；
    • 容易与其他系统进行远程交互，数据共享比较方便。

• • 缺点

• • • XML文件庞大，文件格式复杂，传输占带宽；
    • 客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码，解析XML花费较多的资源和时间，导致服务器端和客户端代码变得异常复杂且不易维护。

• JSON：JSON(JavaScript Object Notation)一种轻量级的数据交换格式，具有良好的可读和便于快速编写的特性。

• • 优点

• • • 数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
    • 易于解析，客户端JavaScript可以简单的通过eval()进行JSON数据的读取；
    • 支持多种语言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言，便于服务器端的解析；
    • 在PHP世界，已经有PHP-JSON和JSON-PHP出现了，偏于PHP序列化后的程序直接调用，PHP服务器端的对象、数组等能直接生成JSON格式，便于客户端的访问提取；
    • 因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护。

• • 缺点

• • • JSON对数据的描述性比XML较差
    • 不适合大量数据的解析

 

4、闭包的定义，特性，缺点

• 定义：定义在一个函数内部的函数，能够访问其外部函数变量，内部函数会在外部函数返回后被执行，就会形成闭包。 在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
• 特性：

• • 函数嵌套函数
  • 内部函数可以访问外部函数的变量
  • 参数和变量不会被回收

• 作用：

• • 实现公有变量：函数累加器
  • 可以做缓存（存储结构）
  • 可以实现封装，属性私有化
  • 模块化开发，防止污染全局变量

• 缺点：

• • 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露
  • 闭包会在父函数外部，改变父函数内部变量的值。

5、jsonp的原理，与ajax的区别

• ajax的原理：使用户操作与服务器响应异步化，AJAX最大优点就是不刷新整个页面的前提下与服务器通信维护数据

• • 第一步：创建一个ajax引擎对象，ie6的是new ActiveXObject其他浏览器是new一个xmlHttpRequest对象
  • 第二步 调用open方法启动一个请求以备发送，open方法传入三个参数 请求类型，请求url和一个布尔值
  • 第三步 调用send方法发送
  • 第四部 处理回调函数onreadystatechange，当readState = 4 响应数据完成时 并且status=200请求成功的时候处理响应数据

• jsonp（json with padding）：动态创建一个script标签，利用script标签src属性访问没有限制，实现跨域。

• • web客户端通过与调用脚本一样的方式来调用跨域服务器上动态生成的js格式文件(后缀.js)，服务器之所以要动态生成js文件目的把客户端需要的数据装入进去。允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据 这样客户端就可以随意定制自己的函数来自动处理返回数据

• 区别

• • 1.ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
  • 2.实质不同

• • • ajax的核心是通过xmlHttpRequest获取非本页内容
    • jsonp的核心是动态添加script标签调用服务器提供的js脚本（后缀.js)

• • 3.区别联系

• • • 不在于是否跨域，ajax通过服务端代理一样跨域，jsonp也不并不排斥同域的数据的获取

• • 4.jsonp是一种方式或者说非强制性的协议，ajax也不一定非要用json格式来传递数据
  • 5.jsonp只支持get请求，ajax支持get和post请求

6、js延迟加载的方式

• js延迟加载也就是等页面加载完成之后再加载javascript文件，延迟加载有助于提高页面加载速度
• defer属性

• • 脚本的执行不会影响页面的解析，脚本会被延迟到整个页面都解析完毕之后再执行

• async属性

• • 异步加载js脚本，下载完就执行，这是与defer的区别

• 动态创建DOM方式

• • 动态创建script标签，设置src属性，动态加载外部脚本并执行

• 使用jQuery的getScript方法
• 使用setTimeout延迟方法
• 让JS最后加载

• • 把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

7、浏览器标准模式和怪异模式之间的区别是什么

• 标准模式： Standards （标准）模式，页面按照HTML,CSS定义标准进行渲染
• 怪异模式： Quirks （包容）模式，浏览器为了兼容很早之前针对旧版本浏览器设计，并未严格遵循W3C标准而产生的一种页面渲染模式
• 放在网页顶部的doctype声明是让浏览器进入正确呈现模式的关键

• • 形式错误的doctype会进入怪异模式
  • 在完整的doctype声明中，要包括相应的文档类型定义（DTD）文件的URL。如果URL丢失或者指定的是相对路径，会进入怪异模式
  • DTD类型：strict，traditional，frameset

• 区别：

• • 盒模型显示不一致：标准盒模型与IE盒模型
  • 图片元素的垂直对齐方式：标准模式下vertical-align属性默认取值为baseline，在怪异模式下，vertical-align属性默认取值为bottom
  • 怪异模式下，对于table元素，字体的某些元素将不会从body等其他封装元素中继承得到，特别是font-size属性。
  • 标准模式下，inline元素无法自定义大小，怪异模式下，定义这些元素的width，height属性可以影响这些元素显示的尺寸
  • 标准模式下，overflow取默认值visible，在怪异模式下，该溢出会被当做扩展box来对待，即元素的大小由其内容决定，溢出不会裁减，元素框自动调整，包含溢出内容。

8、new操作符具体干了什么

• 1、创建一个空对象 var obj=new Object();
• 2、设置原型链 obj.__proto__= Func.prototype;
• 3、让Func中的this指向obj，并执行Func的函数体。Func.call(obj);
• 4、返回值对象  return obj;

9、document load、document DOMContentLoaded 和document ready的区别

• load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数。问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
• DOMContentLoaded: DOM解析完成即触发此事件，不等待styles, images等资源的加载；

• • 当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。
• $(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行

• 在原生的jS中不包括ready()这个方法，只有load方法就是onload事件，ready事件是jQuery中的事件

• DOMContentLoaded绑定到document，load绑定到window
• DOMContentLoaded对应jQuery的ready事件，onload对应jQuery的load事件

10、html、xml、xhtml的联系和区别

• HTML(HyperText Markup Language)，超文本标记语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素，“标记”是指用特定的标记符号来标记要显示的内容的各个部分。HTML文本就是我们通常所说的网页，扩展名可以是html或htm。
• XML(Extensible Markup Language)，可扩展标记语言。XML是标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言，它被设计用来传输和存储数据，是对超文本标记语言的补充。它提供了一种描述结构数据的格式，简化了网络中数据交换和表示。
• XHTML(Extensible HyperText Markup Language)，可扩展超文本标记语言。XHTML基于可扩展标记语言（XML）。XHTML就是一个扮演着类似HTML的角色的可扩展标记语言（XML），所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。
• 总结：HTML、XML和XHTML都是标准通用标记语言的一个子集。HTML被设计用来显示数据，其焦点是数据的外观；XML被设计用来传输和存储数据，其焦点是数据的内容；XHTML是更严格更纯净的 HTML 版本，是作为一种 XML 应用被重新定义的 HTML，设计的目的是为了取代HTML以适应未来网络更多的需求。它们都可以用来开发网页，但就目前来看，网页开发中HTML还是占绝对的主流，现在最新版本HTML5也备受推崇。可拓展标记语言XML广泛运用于各种应用程序中数据的存储（例如各种配置文件）和应用程序间的数据传输，可以说是一项必须掌握的技术。至于可扩展超文本标记语言XHTML，在2009年W3C已经宣布停止了对XHTML2的开发，转而大力支持HTML5

11、Http协议的8中请求类

• OPTIONS：返回服务器针对特定资源所支持的HTTP请求方法。也可以利用向Web服务器发送'*'的请求来测试服务器的功能性。
• HEAD：向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下，就可以获取包含在响应消息头中的元信息。
• GET：向特定的资源发出请求。
• POST：向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的创建和/或已有资源的修改。
• PUT：向指定资源位置上传其最新内容。
• DELETE：请求服务器删除Request-URI所标识的资源。
• TRACE：回显服务器收到的请求，主要用于测试或诊断。
• CONNECT：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。

12、如何实现浏览器内多个标签页之间的通信?

• 使用localStorage：使用storage事件监听添加、修改、删除的动作

• 使用cookie+setInterval

 

13、WebSocket与消息推送

14、表单的基本组成部分有哪些，表单的主要用途是什么？

• 表单标签：这里面包含了处理表单数据所用CGI程序（通用网关接口）的URL以及数据提交到服务器的方法。
• 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
• 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
• 作用

• • 表单对于用户而言是数据的录入和提交的界面
  • 表单对于网站而言获取用户信息的途径。

15、HTML5 应用程序缓存和浏览器缓存有什么区别？

• html5缓存

• • 页面缓存:

• • • html、JS、CSS等，这些缓存资源是由于浏览器的行为而产生

• • 数据缓存：

• • • AppCache:  Cache Manifest 操作；  需要服务器与客户端相互配合； 所有的缓存数据都由开发者直接完全地掌控。
    • DOM Storage（Web Storage）：   local storage； session storage； 存储一些简单的用key/value对即可解决的数据

• 应用程序缓存是 HTML5 的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如 HTML、CSS、图片以及 JavaScript。这个特性可以提高网站性能，它的实现借助于 manifest 文件，如下：

                        <!doctype html>  <html manifest=”example.appcache”>  …..  </html>

        与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。

16、JavaScript 浮点数运算的精度问题

• js中的整数和浮点数都是Number类型，所有数字采用64位双精度浮点数存储

• • 最高位（第0位）为符号位，0表示正数，1表示负数
  • 第1位到11位为指数位，存储指数部分
  • 第12位到63位为有效位，存储小数部分
  • 由于有效数位的第一位总是1，不保存再64位浮点数中，因此js提供的有效数位为53，因此可以显示的整数位-2^53+1 ~ 2^53-1

• 十进制的浮点数转换成二进制的时，表达式时无穷的，但是有效位最多位53位，超出部分被截取，再转换成10进制时就产生了误差，因此导致计算结果不准确
• 解决办法

• • 可以在后端进行计算和存储
  • 或者使用计算类库来进行处理

17、HTTP请求get与post的区别

• get通过url传递参数，post放在request body中
• get请求在浏览器回退时是无害的，post会再次提交请求
• get产生的url地址可以被标签收藏，post不可以
• get请求会被浏览器主动cache，而post不会，除非手动设置
• get请求只能进行url编码，而post支持多种编码
• get请求参数会被完整的保留在浏览器历史记录集面，而post中的参数不会被保留
• get请求在url中传送的参数是有长度限制的，post没有
• get比post更不安全，参数直接暴漏在链接里面，不能用来传递敏感信息
• GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
• GET产生一个TCP数据包；POST产生两个TCP数据包。

• • 对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
  • 而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

18、程序、进程和线程

• 进程：进程是操作系统分配资源的最小单元

• • 一个作业可以由多个进程组成，且必须至少由一个进程组成，
  • 进程是动态的，
  • 一个作业通常包括程序、数据和操作说明书三部分。每一个进程由pcb、程序和数据集合组成。
  • 程序是进程的一部分，是进程的实体。

• • • 一个程序可以启动多个进程，一个程序的执行可能有多个进程的参与，多个进程的协作共同执行这个程序。
    • 一个作业可以划分为若干个进程来实现，而每一个进程有其实体--程序和数据集合。

• 线程：线程是操作系统调度的最小单元，线程是一种轻量级的进程

• • 同一个进程中可以包括多个线程，并且线程共享整个进程的资源（寄存器、堆栈、上下文），一个进程至少包括一个线程。
  • 进程的创建调用fork，而线程的创建调用clone，进程结束后它拥有的所有线程都将销毁，而线程的结束不会影响同个进程中的其他线程的结束
  • 线程是轻量级的进程，它的创建和销毁所需要的时间比进程小很多，所有操作系统中的执行功能都是创建线程去完成的
  • 线程中执行时一般都要进行同步和互斥，因为他们共享同一进程的所有资源
  • 线程有自己的私有属性TCB，线程id，寄存器、硬件上下文，而进程也有自己的私有属性进程控制块PCB，这些私有属性是不被共享的，用来标示一个进程或一个线程的标志

19、死锁？死锁产生的原因？死锁的必要条件？怎么处理死锁？

• 定义：相互等待资源而产生的一种僵持状态，如果没有外力的干预将一直持续这个状态
• 原因：系统资源不足、相互竞争资源、请求资源顺序不当
• 必要条件：互斥、不可抢占、循环等待、请求与保持
• 解决方法：因为互斥是不可改变的，所以只能破坏其他三个条件中的一个来解除死锁，方法：剥夺资源、杀死其中一个线程

20、IPC通信方式

• 管道（匿名管道（pipe亲缘关系的进程通信）、命名管道（mkfifo/mknod））
• 消息队列：是基于消息的、用无亲缘关系的进程间通信，主要函数：msgget、msgsend、msgrecv、msgctl
• 信号量：相当于一把互斥锁，通过p、v操作，主要函数：semget、semop、semctl
• 共享内存：是进程间通信速度最快的，所以用经常是集合信号量或互斥锁来实现同步，shmget、shmat、shmdt、shmctl

21、GOF 23种设计模式

• 创建型

• • 1. Factory Method（工厂方法）
  • 2. Abstract Factory（抽象工厂）
  • 3. Builder（建造者）
  • 4. Prototype（原型）：用原型实例指定创建对象的种类，并通过拷贝这些原型创建新的对象
  • 5. Singleton（单例）

• 结构型

• • 6. Adapter Class/Object（适配器）
  • 7. Bridge（桥接）
  • 8. Composite（组合）
  • 9. Decorator（装饰）：动态的给一个对象添加一些额外的职责，就增加功能来说，装饰模式比生成子类更加灵活。
  • 10. Facade（外观）
  • 11. Flyweight（享元）
  • 12. Proxy（代理）

• 行为型

• • 13. Interpreter（解释器）
  • 14. Template Method（模板方法）
  • 15. Chain of Responsibility（责任链）
  • 16. Command（命令）
  • 17. Iterator（迭代器）
  • 18. Mediator（中介者）
  • 19. Memento（备忘录）
  • 20. Observer（观察者）
  • 21. State（状态）
  • 22. Strategy（策略）
  • 23. Visitor（访问者）

22、PWA（Progressive Web App）

• 渐进式的网页应用程序，由Google公司2015年提出
• 通过网络应用程序Manifest file提供类似于APP的使用体验，可以设置全屏显示，并且还能进行“推送通知”；
• 三个关键技术：
  • Service Work（服务工厂）：这是个离线缓存文件，是浏览器在后台独立于网页运行的脚本，作用与浏览器与服务器之间，相当于一个代理服务器
  • Manifest（应用清单）：是w3C规范，它定义了一个基于JSON的List，作用：
    • 能够将浏览的网页添加到手机屏幕上
    • 在安卓上可以全屏启动，不现实地址栏
    • 可以控制屏幕展示，定义启动画面，设置应用启动的方式（从主屏幕还是URL启动）
    • 设置添加到主屏幕上的图标、名字、和大小
  • Push Noticecation(推送通知)：Push和Notification是不同的功能，Push：服务器将更新消息传递给SW，Notification：SW将更新的信息推送给用户

23、Web Worker

• 为js创建多线程环境，允许主线程创建Worker线程，将一些任务分配给后者运行。Woker线程完成计算任务，再把结果返回给主线程。
  • 同源限制：分配给Worker线程运行的脚本文件必须与主线程的脚本文件是同源的
  • DOM限制：无法使用doucment,window,parent全局对象，但是可以访问location，navigator对象
  • 通信联系：Woker线程与主线程不在同一个上下文环境中，不能直接通信，只能通过消息完成
  • 脚本限制：不能执行altert（）方法，可以使用XHR对象发送ajax请求
  • 文件限制：无法去读本地文件，加载的脚本必须来自网络

24、http与https

• HTTP协议以明文方式发送内容，不提供任何数据加密，不适合传输一些敏感信息。
• HTTPs在HTTP的基础上加入了SSL协议，SSL依赖证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。
  • 建立一个信息安全通道，来保证数据传输的安全性；确认网站的真实性。
• 区别：

• • 1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
  • 2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
  • 3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
  • 4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

25、数据库三范式

• 第一范式：要求每一个记录的属性是原子性的，不可再分割
• 第二范式：要求所有非主属性段完全依赖主属性，不能产生部分依赖
• 第三范式：所有非主属性和主属性之间不能产生传递依赖

26、网站设计的安全性

• XSS攻击（跨站脚本攻击，cross site script）：向XSS漏洞的网站中输入恶意的HTML代码，当浏览器浏览该网页时，这段HTML代码会自动执行（理论上所有可以输入的地方没有对输入的数据进行处理，都会存在XSS攻击）；
  • 危害：盗取用户cookie，用户名密码，破坏页面结构，重定向到其他网站
  • 防御：对用户输入的信息进行处理，只允许合法的值。（进行HTML转义处理，尖括号，单引号，引号等特殊字符进行转义编码）
• CSRF攻击（跨站请求伪造，cross site request forgery）：攻击者盗用了用户身份，发送恶意请求https://www.cnblogs.com/phpstudy2015-6/p/6771239.html https://blog.csdn.net/qq_15096707/article/details/51307024
  • 危害：发送邮件，盗取账号，购买东西
  • 原理：首先登录某个网站，并在本地生成cookie，然后在不登出的情况下，访问危害网站
  • 防御：随机的token，添加验证码，在cookie中设置"HttpOnly"
• SQL注入：通过SQL命令伪装成正常的http请求，传递参数到服务端，服务器执行sql命令造成对数据库的攻击
  • 原理：sql语句伪造参数，然后对参数机型拼接后形成破坏性的sql语句，最后导致数据库遭受到攻击
  • 防御：对参数进行转义，数据库中的密码不应该明文显示，可以对密码使用md5进行加密
• DDOS攻击（分布式拒绝服务攻击）：发送大量的请求使服务器瘫痪
  • 被攻击的原因：服务器带宽不足，不能抵挡攻击流量
  • 防御：增加带宽，使用硬件防火墙，优化资源使用提高web server的负载能力
• 常见安全算法
  • 数字摘要算法
    • MD5（Message Digest Algorithm 5）：主要增强算法复杂度和不可逆性，用于确保信息传输完整性和一致性，摘要长度为128位。
    • SHA（Secure Hash Algorithm）：SHA-1算法生成的摘要信息的长度为160位，由于生成的摘要信息更长，运算的过程更加复杂，比MD5安全
  • 对称加密算法
    • DES算法（Data Encryptin Standard）：明文按64位进行分组，密钥长64位
    • AES算法（Advanced Encryption Standard）：设计有三个密钥长度:128,192,256位，比DES算法的加密强度更高，更为安全。
  • 非对称加密算法
    • RSA算法（算法发明人名字缩写）：它需要两个密钥，一个称为公开密钥(public key)，即公钥，另一个称为私有密钥(private key)，即私钥

27、浏览器并发请求数

• 浏览器的并发请求数目限制是针对同一域名的。意思就是，同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞，这就是很多网站专门解决这个问题的原因。
• 图片和文件放到另一个域名之后，css和图片就可以并发请求

28、使用css实现一个幻灯片效果

29、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

• 当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。
• 原因：使用import方法导入样式表，将样式表放在页面底部 ，有几个样式表，放在html结构的不同位置
• 解决方法： 使用LINK标签将样式表放在文档HEAD中

30、Javascript 内置对象、原生对象、宿主对象的关系

• 原生对象（本地对象）：独立于宿主环境的ECMAScript实现提供的对象
  • Object、Function、Array、String、Number、Date、Error、RangError、ReferenceError、SyntaxError、TypeError、URIError、ActiveXObject(服务器方面)、Enumerator(集合遍历类)、RegExp（正则表达式）
• 内置对象：ECMAScript 实现提供的、独立于宿主环境的所有对象，在 ECMAScript 程序开始执行时出现
  • Global 和 Math
• 宿主对象：所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。依赖于“操作系统”和“浏览器”
  • BOM和DOM对象都是宿主对象

31、javascript中property和attribute的区别

• property是DOM中的属性，是JavaScript里的对象；
• attribute是HTML标签上的特性，它的值只能够是字符串；
  • property能够从attribute中得到同步；
  • attribute不会同步property上的值；
  • attribute和property之间的数据绑定是单向的，attribute->property；
  • 更改property和attribute上的任意值，都会将更新反映到HTML页面中；

33、HTTP请求状态码

• 1**(信息类)：表示接收到请求并且继续处理
  • 100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
• 2**(响应成功)：表示动作被成功接收、理解和接受
  • 200 OK 正常返回信息
  • 201 Created 请求成功并且服务器创建了新的资源
  • 202 Accepted 服务器已接受请求，但尚未处理
• 3**(重定向类)：为了完成指定的动作，必须接受进一步处理
  • 301 Moved Permanently 请求的网页已永久移动到新位置。
  • 302 Found 临时性重定向。但客户访问仍继续通过原始URL地址，重定向，新的URL会在response中的Location中返回，浏览器将会使用新的URL发出新的Request。
  • 303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。建议客户访问其他URL或访问方式
  • 304 Not Modified 自从上次请求后，请求的网页未修改过。
    • if-modified-since: last-modified的日期
    • if-none-Match： Etag
    • 服务器在响应上指定Cache-Control或Expires指令
• 4**(客户端错误类)：请求包含错误语法或不能正确执行
  • 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
  • 401 Unauthorized 请求未授权。这个状态代码必须和WWW-Authenticate报头域一起使用
  • 403 Forbidden 禁止访问。服务器收到请求，但是拒绝提供服务
  • 404 Not Found 找不到如何与 URI 相匹配的资源。一个404错误表明可连接服务器，但服务器无法取得所请求的网页，请求资源不存在
• 5**(服务端错误类)：服务器不能正确执行一个正确的请求
  • 500 Internal Server Error 最常见的服务器端错误。
  • 502 HTTP网关错误
  • 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

34、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

• 1、浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
• 2、调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
• 3、通过DNS解析获取网址的IP地址，设置 UA 等信息发出请求;
• 4、进行HTTP协议会话，通过三次握手建立TCP连接，客户端发送报头(请求报头);
• 5、进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
• 6、进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
• 7、处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
• 8、浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
• 9、文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;
• 10、页面开始渲染DOM，JS根据DOM API操作DOM，执行事件绑定等，页面显示完成。

35、CSS长度单位

36、SEO优化（Search Engine Optimization）

• 指的是在了解搜索引擎排序原理的基础上，对网站进行站内优化和站外优化，从而提升当前网站关键词排名概率，获取流量
• SEO优化:请正确设置title,keywords,description
  • <title>网站标题</title>，
  • <meta name=”Keywords” Content=”关键词1,关键词2,关键词3,关键词4″>
  • <meta name=”Description” Content=”你网页的简述”>
• 服务器端使用CDN
  • CDN加速的原理：将网站的内容分发至离用户最近的节点，使用户就近取得所需要的内容，提高响应速度，适用于 站点加速，直播，点播等场景。

• 提高爬虫机器人获取本网站信息的能力
  • 使用语义化标签，符合W3C标准，让机器人更好的爬取信息
  • 少用iframe标签，抓取不到
  • 减少js对DOM的操作
  • 如果图片不是单纯的装饰图片，添加alt
  • 再不影响页面结构的前提下给a标签添加title属性
  • 关键词加粗，或者使用h系列的标签，h1只能有一个
  • 集中网站权重，蜘蛛分给每个页面的权重是一定的，网站中有些不需要被爬取的网页，可以通过给a标签添加”rel=nofollow” 告诉爬虫，这个页面不用被爬取
  • 不要再html结构中添加style和script标签，将css，js整合再一个文件中，减少发起http请求的次数。
  • 将小的icon放在一个图片中，通过background-position调整位置。也能减少http请求的次数
  • js文件放在页面的最下方如果将 JavaScript 放置在 head 标签内或 HTML 文档的上部，这会阻塞 HTML 和 CSS 元素的加载过程 。
  • css放在head中，优化css性能，要努力去除累赘的 CSS 文件，但要注意保留其重要特征。 ink 标签请求加载的外部样式表不会阻止并行下载。
  • 混淆压缩css js html代码
• 避免空的src：空的src仍然会发送请求到服务器，完全是浪费时间

37、防止网站被爬虫爬取

• 通过 robots.txt 文件屏蔽，可以说 robots.txt 文件是最重要的一种渠道（能和搜索引擎建立直接对话）
• 通过 meta tag 屏蔽在所有的网页头部文件添加，添加如下语句：<meta name="robots" content="noindex, nofollow">
• 通过服务器（如：Linux/nginx ）配置文件设置直接过滤 spider/robots 的IP 段。

38、前端路由的两种模式

• 前端路由实现的两个主要功能
  • 记录当前页面的状态（保存或分享当前页面的url，再次打开该url的时候，网页还是保存分享时的状态）
  • 可以使用浏览器的前进后退功能（点击后退按钮，可以使页面回到使用ajax更新页面之前的状态，url也回到之前的状态）
• 要实现上面两个功能，需要
  • 改变url且不让浏览器向服务器发送请求
  • 监测url的变化
  • 截获url地址，并解析出需要的信息来匹配路由规则
• hash模式
  • hash 就是指url尾巴后的 # 号以及后面的字符。这里的 # 和css里的 # 是一个意思。
  • hash也称作锚点，本身是用来做页面定位的可以使对应id的元素显示在可视区域内。
  • hash 能兼容到IE8， history 只能兼容到 IE10
  • hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误

 

• history模式
  • hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。
  • 其次，hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。
  • history 模式改变 url 的方式会导致浏览器向服务器发送请求
  • history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。

 

39、BOM对象

 

• window对象：BOM的核心对象是window，它表示浏览器的一个实例。有alert、confirm、prompt、open、close、setTimeout、setInterval、clearTimeout、clearInteval
• location对象：location对象是一个很特别的对象，因为它既是window对象的属性，也是document对象的属性。window.location和document.location引用的是同一个对象。 属性：hash、host、hostname、href、pathname、port、protocol、search；方法：assign(url), replace(url), location.reload();//重新加载(有可能从缓存中加载) ;location.reload(true);//重新加载(从服务器重新加载)
• history对象：因为history是window对象的属性，因此每个浏览器窗口、每个标签页以及每个框架，都有自己的history对象与特定的window对象关联。方法：go()，back()，forward()
• screen对象：height: 获取整个屏幕的高。width : 获取整个屏幕的宽。availHeight: 整个屏幕的高减去系统部件的高。availWidth : 整个屏幕的宽减去系统部件的宽。
• navigatior对象：描述浏览器的属性。属性值：appName、appVersion、userAgent、platform、plugins、mimeTypes

40、HTML5新特性

• 新增选择器 document.querySelector、document.querySelectorAll
  • 与jQuery的选择器类似；注意：返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果
• 拖拽释放(Drag and drop) API
• 媒体播放的 video 和 audio
• 本地存储 localStorage 和 sessionStorage
  • 浏览器提供了storage事件来监听存储，window.addEventListener('storage', showStorageEvent, true)
• 离线应用 manifest
  • 页面缓存指的还是有网络状态下，而离线web应用指的是在没有网络状态可以运行应用window.applicationCache。
  • manifest文件是核心，记录着哪些资源文件需要离线应用缓存，要使用manifest，只需要在html标签中添加属性 <html manifest="cache.manifest">
    • cache.manifest包括CACHE MANIFEST（当网络不可用时，文件直接从本地缓存读取）
    • NETWORK下面的文件无论是否已经缓存，都要从网络中下载
    • FALLBACK后面，当无法获取到某资源时转到另一资源
• 桌面通知 Notifications
  • HTML5 Web Notification通知是属于桌面性质的通知，有点类似于显示器右下角蹦出的QQ弹框，杀毒提示之类的，跟浏览器是脱离的，消息是置顶的
• 语意化标签 article、footer、header、nav、section
• 增强表单控件 calendar、date、time、email、url、search
• 地理位置 Geolocation：https://blog.csdn.net/deeplies/article/details/77582307
  • clearWatch
  • getCurrentPosition
  • watchPosition
• 多任务 webworker：http://www.ruanyifeng.com/blog/2018/07/web-worker.html
• 全双工通信协议 websocket：https://blog.csdn.net/hr541659660/article/details/80415013
• 历史管理 history：https://www.cnblogs.com/accordion/p/5699372.html
• 跨域资源共享(CORS) Access-Control-Allow-Origin
• 页面可见性改变事件 visibilitychange：http://www.css88.com/archives/6103
  • 浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。
• 跨窗口通信 PostMessage：https://www.cnblogs.com/dolphinX/p/3464056.html
  • postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
    • postMessage(data,origin)方法接受两个参数，
    • data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，
    • origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
• Form Data 对象：https://blog.csdn.net/u014607184/article/details/52372551
• 绘画 canvas：https://blog.csdn.net/u012468376/article/details/73350998

41、浏览器如何渲染页面

• https://www.cnblogs.com/kevin2chen/p/6938021.html