weixin_45695200的博客

标签说明<meta />定义网页信息<link />引入外部CSS文件<br />换行标签<hr />水平线标签<img />图片标签<input />表单标签meta标签用来描述一个html网页文档的属性，例如作者、日期时间、网页描述、关键词、页面刷新等。...

什么是面向对象面向对象是一种编程开发思想，是过程式代码的一种高度封装，目的在于提高代码的开发效率和可维护性。面向对象的思想中有两个重要概念：类、对象。类：具有相同特征和行为的事物的抽象对象：类的实例对象是一个容器，封装了属性（property）和方法（method）。属性是对象的特征，方法是对象的行为。比如，定义一个动物抽象类animal，可以使用属性记录动物特征，比如动物的种类，使用方法表示动物的某种行为（奔跑、捕猎、休息等等）。面向对象的特性：封装、继承、多态。封装性：封装就是把具有相同

对称加密发送方和接收方首先要共享相同的密钥k才能进行通信。发送方用密钥k将明文加密成密文发送给接收方；接收方收到密文后，用共享的密钥k解密得到明文。常用的对称加密算法有：AES、DES非对称加密非对称加密技术中，加密的密钥a和解密的密钥b是不同的。并且加密的密钥a是公开的，叫做公钥，而解密的密钥b是保密的，叫私钥。发送方用公钥a将明文加密为密文，发送给接收方；接收方收到密文后，用自己保留的私钥b解密得到明文。常用的非对称加密算法有：RSA两者区别对称加密中加密和解密使用的密钥是同一个；非对

鉴权（authentication）是指验证用户是否拥有访问系统的权利。传统的鉴权是通过密码来验证。弱点十分明显：一旦密码被偷或用户遗失密码，情况就会十分麻烦，需要管理员对用户密码进行重置，而修改密码之前还要人工验证用户的合法身份。目前的主流鉴权方式是利用认证授权来进行验证。前后端之间进行数据交互，后端要判断你是否是真正的操作者，也就是说必须要有一个身份证明。前后端常见的几种鉴权方式：HTTP Basic Authenticationsession-cookieTokenOAuth1

iframe基本概念iframe是HTML标签，能把一个网站的内容嵌入到另一个网站中。所有浏览器都支持 <iframe> 标签。通常直接在页面使用iframe标签就可以了：<iframe src="demo.html" height="300" width="500" name="demo" scrolling="auto" sandbox="allow-same-origin"></iframe>iframe的一些基本属性：src：iframe页面地址

请求转发：一个资源收到客户端请求后，通知服务器去调用另外一个资源进行处理。（转发是服务器行为）请求重定向：一个资源收到客户端请求后，通知客户端去访问另外一个资源。（重定向是客户端行为）两者区别（1）请求转发是一次请求，跳转发生在服务器内部；重定向是两次请求，第一次请求会返回目标地址， 浏览器根据目标地址发送第二次请求，才完成整个流程。（2）请求转发地址栏不会发生改变， 重定向地址栏会发生改变（3）请求转发不能跨域，重定向可以...

Babel 是一个 JavaScript 编译器，主要用于 将【采用 ES6 及以上语法编写的代码】 转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。// Babel 输入： ES6 箭头函数[1, 2, 3].map((n) => n + 1);// Babel 输出： 转换为 ES5 语法实现的同等功能的代码[1, 2, 3].map(function(n) { return n + 1;});...

1 懒加载1.1 懒加载也叫延迟加载，指在长网页中延迟加载图像，是一种很好的优化网页性能的方式。常适用于图片很多，页面很长的电商网站。1.2 实现方式使用定时器（setTimeOut 或 setInterval） 进行加载延迟。条件加载：符合某些条件才开始加载。可视区加载，主要由滚动监听来实现。一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户下拉时正好能看到图片。1.3 实现原理将图片 src 设为空字符串，而图片的真实路径则设置在自定义属性 data-origin

1 XSS攻击（跨站脚本攻击 Cross Site Scripting）XSS指攻击者添加代码嵌入到页面中，使用户访问时都会执行相应的嵌入代码，从而盗取用户资料、利用用户身份进行一系列侵害操作。（利用虚假输入表单骗取用户个人信息盗取账号等）解决办法：客户端提交的数据先进行相应的过滤处理后再进行下一步的操作。最常见 xss 攻击是读取 Cookie（来访问用户的账号）var img = document.createElement('img')img.src='http://www.xss.com

值描述button定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。checkbox定义复选框。file定义输入字段和 "浏览"按钮，供文件上传。radio定义单选按钮。reset定义重置按钮。重置按钮会清除表单中的所有数据。submit定义提交按钮。提交按钮会把表单数据发送到服务器。text定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。<input type="button" va...

4 AjaxAjax 主要用来实现客户端与服务器端的异步通信，实现页面的局部刷新。优点（1）页面局部刷新，用户体验好；（2）异步通信，加快响应能力；（3）按需获取数据，减轻服务器负担。缺点（1）没有了Back和History功能，即对浏览器机制的破坏；用户通常会希望点击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现：因为在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。（2）存在一定的安全问题（3）存在跨域问题限制原

1 调用localStorage在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；在另一个标签页里面监听 storage 事件。即可得到 localstorge 存储的值，实现不同标签页之间的通信。{ // 标签页1 var name=$("#name").val(); localStorage.setItem("name", name); }{ // 标签页2 window.addEventListener("s

1 减少HTTP请求减少HTTP请求的主要方法是合并CSS、javascript、图片。2 合理使用缓存对一个网站而言，CSS、js、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，可以很好地改善性能。3 将CSS和JS放到外部文件中引用，CSS放顶部，JS放底部css的下载解析是可以和html的解析同步进行的；而解析script时会中断html解析4 图片懒加载在页面开始加载时候，不请求真实的图片地址，而是默认图占位，当页面加

跨域1 简介跨域分为开发跨域（开发环境跨域）和线上跨域（生产环境跨域）：开发环境跨域：开发阶段前后端工作站不同，所以ip地址不同，请求数据必然出现跨域问题；生产环境跨域：一个网站关联多台服务器，构成一个完整的生产服务器集群。不同的服务器之间通过地址进行通信，就算在局域网中，端口地址也是不一样的，就会产生跨域问题。2 同源策略跨域问题其实就是浏览器的同源策略所导致的。同源策略是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到攻击。所谓同源是指"协议+域名+端口"三者相同（注：即

缓存1 简介前端缓存主要是分为HTTP缓存（强缓存、协商缓存）和浏览器缓存。其中HTTP缓存是在HTTP请求传输时用到的缓存，主要在服务器上设置；而浏览器缓存主要在前端js进行设置。缓存是性能优化中简单高效的一种方式。它可以缩短请求资源的距离，减少延迟，降低网络负荷。浏览器在向服务器请求资源之前，先查询一下缓存中是否存在需要的资源，如果存在，那优先从缓存中读取。当缓存不存在或过期，再向服务器发送请求。2 缓存过程浏览器第一次向服务器发起请求，会根据返回的响应报文中的缓存标识，决定是否缓存结果，

渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验。渐进增强：一开始就针对低版本浏览器进行页面构建，完成最基本的功能，然后再针对高级浏览器追加效果完善功能达到更好的体验。优雅降级：一开始就构建完整功能，然后进行测试和修复，使其可以在低版本浏览器上正常浏览。渐进增强相当于向上兼容，而优雅降级相当于向下兼容。...

正向代理正向代理允许客户端通过它访问任意网站并且隐藏客户端自身。正向代理是代理客户端，为客户端收发请求，使真实客户端对服务器不可见。举例说明正向代理：A问C借钱，C不给，所以A拜托B去问C借钱，C借给B，B再把钱给A。此时B就是代理的角色，为A问C借钱，C不知道是A借的钱，即不知道A的真实身份。反向代理反向代理是指以代理服务器来接受Internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给Internet上请求连接的客户端。访问者并不知道自己访问的是代理，

负载均衡就是把请求分发到多台服务器，不让其中某一台或几台超额工作，加强了数据处理能力，提高性能。1 HTTP重定向负载均衡负载均衡过程如上图：1 请求到负载均衡服务器2 返回304重定向到实际服务器ip到浏览器3 然后浏览器直接请求实际的服务器4 最后实际服务器响应到客户端浏览器缺点：1 请求经过两次服务器，增加了响应时间2 暴露了实际负载的服务器ip到浏览器，安全性比较低2 反向代理负载均衡过程如下：1 客户端发起请求到反向代理服务器，得到实际负载的IP（反向代理服务器此处就是

href 和 src 的区别：一般加载CSS用href，并放在头部；加载script用src，放在body内的下方。href 表示超文本引用，常用标签的有link，a；src 指向的内容会嵌入到文档中当前标签的位置，常用的标签有img，script。css一般放在头部，css的下载解析是可以和html的解析同步进行的；如果放到尾部，要花费额外时间来解析CSS，并且浏览器会先渲染出一个没有样式的页面，等CSS加载完后会再渲染成一个有样式的页面，页面会出现明显的闪动。所以外链css无论放在html的任何

1 HTTP1.1 什么是HTTP协议HTTP协议即为超文本传输协议， 用于客户端和服务器之间的通信。协议其实就是规定，也就是说，http协议规定了超文本（文本、图片、视频等）传输所要遵守的规则。HTTP协议规定了URL的格式、发送请求的格式（请求行、请求头、请求体）、响应的格式（响应码、响应头、响应体）1.2 浏览器与服务器的通信过程一个HTTP客户端，通常是浏览器，发送http请求至Web服务器（1）输入URL ，通过域名或IP找到服务器；（2）找到服务器的同时，发送http请求；（3

URI是统一资源标识符，用来唯一地标识一个资源；URL是统一资源定位器，URL是一种具体的URI；它不仅唯一标识资源，而且还提供了定位该资源的信息，我们将URL输入到浏览器地址栏上就可以访问到对应资源。举例：http://localhost:8080/myweb/hello.html整个一串就是URL；加粗部分为URI...

1 浏览器内核不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。常见的浏览器内核：浏览器名称内核IETrident内核，也称IE内核Chrome（谷歌）以前是Webkit内核，现在是Blink内核Firefox（火狐）Gecko（[ˈɡekəʊ]）内核，俗称Firefox内核Opera最初是自己的Presto内核，后来是Webkit，现在是Blink内核SafariWebkit内核360、猎豹IE + Chrome双内核

浏览器的渲染机制浏览器渲染展示网页的过程，大致分为以下几个步骤：解析HTML、CSS，构建树形结构（浏览器将HTML解析成树形的数据结构，简称DOM；将CSS解析成树形的数据结构，简称CSSOM）（DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素）渲染树构建 （DOM 和 CSSOM合并后生成 Render Tree） （渲染树不包括 head 和隐藏元素）计算 Render Tree 每个节点的具体位置绘制渲染树（Painting）重绘：外观改变，布局不变的重新渲染过程

Doctype<!DOCTYPE html><html lang="en"> ……</html>DOCTYPE是document type (文档类型) 的缩写。<!DOCTYPE >声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器使用哪种文档类型规范来解析页面。如果<!DOCTYPE>不存在，就是把如何渲染html页面的权利交给了浏览器；那么不同浏览器对页面渲染有不同标准，就会产生差异。...

websocket是HTML5的一个新协议，是一种全双工通信协议，相对于HTTP协议来说是一个持久化的协议。（全双工通信：双向同时通信，即通信的双方可以同时发送和接收信息）==HTTP是无状态的，每次的请求都是独立的，意味着请求与请求之间无关联，需要引用cookie才能解决无状态。websocket只建立一次连接，并且这个连接不会断，是一个长连接，浏览器和服务器可以直接交换数据。...