Fork me on GitHub

IT面试整理(5)——前端综合

XSS攻击


  • 原理: 攻击者往web页面里插入恶意html标签或者javascript代码
  • 示例: 攻击者在论坛中放一个看似安全的连接,骗取用户点击后,窃取cookie中用户私密信息;
  • 防范:
    (1) 对用户输入的地方和变量要检查长度、对”<”, “>”, “;”, “‘“等字符过滤
    (2) 任何内容写入页面之前必须加以encode,避免不小心把html tag弄出来
    (3) 避免直接在cookie中泄漏用户隐私,如email、密码等
    (4) 通过cookie和系统ip绑定来降低cookir泄漏后的风险
    (5) 尽量采用POST而非GET提交表单

CSRF攻击


  • 原理: XSS是CSRF的一种实现方式。但XSS是获取信息,不用提前知道用户的页面代码和数据包;CSRF是代替用户完成指定的动作,需要知道用户页面的代码和数据包
  • 示例: 1. 登陆受信任网站A,并在本地生成cookie;2. 在不登出A的情况下访问危险网站B
  • 防范:
    (1) 在客户端增加伪随机数
    (2) 使用验证码

SQL注入


AJAX


(1) 创建XMLHttpRequest对象,即异步调用对象
(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL以及验证信息
(3) 设置响应HTTP请求状态变化的函数
(4) 发送HTTP请求
(5) 获取异步调用返回的数据
(6) 使用Javascript和DOM实现局部刷新

JSONP


  • 原理
    利用script标签没有跨域限制的”漏洞”来达到与第三方通信的目的。当本站需要通信时,本站脚本创建一个script元素,地址指向第三方的API,形如:

    1
    <script src="http://www.example.net/api?param1=1&param2=2"></script>

    并提供了一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。
    第三方产生的响应为json数据的包装(json with padding),形如:

    1
    callback({"name": "baochuquan", "gender": "male"});

    这样浏览器就会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

CORS


CORS与同源AJAX通信没有差别。关键是需要服务器支持CORS接口。

  • 简单请求
    • 条件
      (1) 请求方法
      - HEAD
      - GET
      - POST
      
      (2) HTTP头信息超出以下几种字段
      - Accept
      - Accept-Language
      - Content-Language
      - Last-Event-ID
      - Content-Type: (只限于application/x-www-form-urlencodeed、multipart/formdata、text/plain)
      
    • 请求
      浏览器发现此次跨域AJAX请求是简单请求,自动在头信息中添加Origin字段。
    • 响应
      (1) Access-Control-Allow-Origin: 必须(*或请求时Origin字段的值)
      (2) Access-Control-Allow-Credentials: 可选(是否允许发送cookie)
      (3) Access-Control-Expose-Headers: 可选(cache, )

跨域的方法【参考】


  • 二级域名不同
    (1) Cookie

    两个网页一级域名相同,二级域名不同,浏览器允许通过设置document.domain共享cookie。服务器可设置cookie所属域名
    document.domain = 'example.com'
    document.cookie = 'key=value'   
    

    (2) iframe

    类似cookie, 一级域名相同,二级域名不同,可以通过浏览器设置document.domain共享相互获取DOM
    父窗口获取子窗口: document.getElementById("iframe")
    子窗口获取父窗口: window.parent.document.body  
    
  • 完全非同源
    (1) 片段标识符(URL#之后的部分)

    父窗口写子窗口: document.getElementById('iframe').src = originURL +'#' + data;
    子窗口写父窗口: parent.location.href = target + '#' + data;
    

    (2) window.name

    同一个标签页
    window.name = data
    location = 'http://newurl.com'
    windodw.name / var data = document.getElementById('iframe').contentWindow.name
    

    (3) window.postMessage

    var popup = window.open(url);
    popup.postMessge(data, url);
    

    (4) localStorage

    通过window.postMessage来操作localStorage
    

    (5) JSONP(只能是GET请求)

    网页通过添加一个<script>元素向服务器请求JSON数据;服务器收到请求后将数据放在一个指定名的回调函数中传回来
    

    (6) WebSocket

    WebSocket是一种通信协议,使用ws://(非加密)和wss://(加密)作为协议前缀,不实行同源策略,只要服务器支持即可进行跨域通信。服务器根据请求中的Origin字段判断请求源。
    

    (7) CORS(可以是任何请求类型)

    和同源的AJAX一样。关键是需要服务器实现CORS接口。
    

    (8) 设置服务器代理页面

cookie、session


  • cookie数据存放在浏览器上;session数据存放在服务器上;
  • cookie安全性低;session相对安全;
  • 单个cookie保存的数据不能超过4KB,很多浏览器会限制一个站点只能保存20个cookie
  • session会在一定时间内保存在服务器上。当访问增多,会占用服务器的性能

cookie、sessionStorage、localStorage


特性 cookie localStorage sesstionStorage
数据生命周期 可设置失效时间,默认关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话(当前标签页)下有效,关闭页面或浏览器后被清除
数据容量大小 4KB左右 一般为5MB 一般为5MB
与服务器端通信 每次都会携带在HTTP头中 仅在客户端中保存 仅在客户端中保存

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


  • cookie、locaStorage
  • sessionStorage只能在一个标签页内传值

Get、Post的区别


GET: 向服务器请求数据,请求可在url中;长度有限(2KB)
POST: 向服务器提交数据,每次刷新或后退会重新提交,Post请求数据封装在http请求的首部里

viewport


JS延迟加载的方式


defer、async、动态创建DOM方式(JSONP)、AJAX

JS阻塞特性


所有浏览器在下载JS时,会阻止一切活动,如其他资源的下载、内容的呈现等。
直到JS下载、解析、执行完毕才开始继续并行下载其他资源并呈现内容。

JS无阻塞加载具体方式


(1) 将脚本放在底部
link放在head中;script标签放在/body前
(2) 成组脚本
限制页面的script总数。是用于内嵌脚本和外部脚本
(3) 非阻塞脚本
等页面加载完后,再加载JS代码

XML、JSON的区别


特性 XML JSON
数据体积
数据交互 较复杂 易解析
数据描述
传输速度

减少页面加载时间的方法


(1) 优化图片
(2) 图像格式的选择(GIF: 提供的颜色少,可用在一些对颜色要求不高的地方)
(3) 优化CSS(压缩合并CSS)
(4) 网址后加斜杠(www.example.com/目录,会判断)
(5) 表明高度和宽度
(6) 减少HTTP请求(合并文件、合并图片)

WebSocket


一种新的协议(ws),允许服务器和浏览器端进行全双工通信

SSE


一种轻量级的协议,基于HTTP,浏览器向服务器发送一个HTTP请求,然后 服务器不断单向地向浏览器推送信息

Comet【参考】


  • 定义: 基于HTTP长连接的“服务器推”技术
  • 实现模型
    (1) 基于AJAX的长轮询方式
    1. 服务器会阻塞请求直到有数据传递或超时才返回
    2. 客户端JS响应处理函数会在处理完服务器返回的信息后,再次发出请求,重新建立连接
    3. 当客户端处理接收的数据、重新建立连接时,服务器端可能有新数据到达;这些信息会被服务器端保存直到客户端重新建立连接,客户端一次取回当前服务器端所有的信息
    
    (2) 基于iframe以及htmlfile的流方式
    1. 在HTML中嵌入一个隐藏的iframe,将其src属性设为对一个长连接的请求,服务器就能源源不断地往客户端输入数据  
    2. 服务器端返回对客户端JS函数的调用,类似于JSONP
    缺点:某些浏览器下端的进度栏显示加载未完成,且标签页图标旋转——采用htmlfile解决
    

服务器推送的方式


(1) Comet:基于HTTP长连接的服务器推送技术
(2) 基于WebSocket的推送方案
(3) SSE:服务器推送数据新方式

预加载、懒加载(延迟加载)【参考】


  • 懒加载(延迟加载)
    • 原理: 延迟加载图片或符合某些条件时才加载某些图片
    • 意义: 作为服务器前端的优化,减少请求数或延迟请求数
    • 实现方式
      (1) 纯粹的延迟加载,使用setTimeout或setInterval进行加载延迟
      (2) 条件加载,符合某些条件,或触发了某些事件才开始异步下载
      (3) 可视区加载,即仅加载用户可以看见的区域,一般会在距用户看到某些图片前一定距离就开始加载
  • 预加载
    • 原理: 提前加载图片,当用户需要查看时可以直接从本地缓存中渲染
    • 意义: 牺牲服务器前端性能,换取更好的用户体验
    • 实现方式
      (1) CSS(background)
      (2) JS(image)
      (3) HTML()

渐进增强、优雅降级


  • 渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
  • 优雅降级: 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

浏览器缓存【参考01】【参考02】


  • 定义: 浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器可以直接从本地磁盘加载文档。
  • 优点
    (1) 减少了冗余的数据传输
    (2) 减少了服务器的负担
    (3) 加快了客户端加载网页的速度
  • 分类
    • 缓存协商(协商缓存)
    • 彻底缓存(强缓存)
  • 缓存启动过程(当浏览器在第一次请求发生之后,再次请求时)
    (1) 浏览器先获取该资源缓存的header信息,根据其中的expires和cache-control判断是否命中强缓存,若命中则直接从缓存中获取资源,包括缓存的header信息,本次请求不会与服务器进行通信;
    (2) 如果没有命中强缓存,浏览器会发送请求到服务器,该请求会携带第一次请求返回的有关缓存的header字段信息(Last-Modified/IF-Modified-Since、Etag/IF-None-Match),由服务器根据请求中的相关header字段信息来对比结果是否命中协商缓存,若命中,则服务器返回新的响应header信息更新缓存中对应的header信息,但是并不返回资源内容,它会告知浏览器可以直接从缓存获取;否则返回最新的资源内容
  • 强缓存
    • 原理: 利用http返回头中的Expires或者Cache-Control两个字段来控制,用来表示资源的缓存时间
    • Expires: 值为一个绝对时间的GMT格式的时间字符串。缺点在于浏览器端和服务器端的时间可能不一致
    • Cache-Control: 利用该字段的max-age值进行判断,即相对时间
      • max-age=3600
      • no-cache: 不使用本地缓存。需要使用协商缓存
      • no-store: 直接禁止浏览器缓存数据,每次用户请求资源都是新下载
      • public: 可以被所有用户缓存,包括终端用户和CDN等中间代理服务器
      • private: 只能被终端用户的浏览器缓存,不允许CDN等中继缓存服务器缓存
  • 协商缓存
    • 原理: 由服务器来确定缓存资源是否可用,所以需要标识来进行通信。第一次请求的响应头带上某个字段(Last-Modified货Etag),后续请求会带上对应的请求字段(If-Modified-Since货If-None-Match)
    • Last-Modified: 一个时间标识该资源的最后修改时间
    • If-Modified-Since: 值为Lst-Modified
    • ETag: 检验码,保证每个资源都是唯一的

移动端性能陷阱和硬件加速【参考】


(1) 减少或避免回流、重绘
(2) 尽量缓存所有可以缓存的数据
(3) 使用CSS3 transform代替DOM操作
(4) 不要给非static元素增加CSS3动画,浏览器的性能开销会成倍增加
(5) 适当使用硬件加速,如: canvas, transform

前端优化规则【参考】


  • 尽可能的减少 HTTP 的请求数
  • 使用CDN(内容分发网络)
  • 添加Expire/Cache-Control 头
  • 启用Gzip压缩
  • 将css放在页面最上面
  • 将script放在页面最下面
  • 避免在CSS中使用Expressions
  • 把javascript和css都放到外部文件中
  • 减少DNS查询
  • 压缩 JavaScript 和 CSS
  • 避免重定向
  • 移除重复的脚本
  • 配置实体标签
  • 使 AJAX 缓存

性能优化方式


(1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。
(2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
(3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
(4) 当需要设置的样式很多时设置className而不是直接操作style。
(5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
(6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
(7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。

移动端性能优化


(1) 尽量使用CSS3动画,开启硬件加速;
(2) 适当使用touch事件代替click事件
(3) 避免使用CSS3渐变阴影效果
(4) 尽可能少的使用box-shadow和gradient————性能杀手

前端兼容性问题【参考1】【参考2】


(1) XMLHttpRequest、ActiveXObject
(2) W3C盒子模型、IE盒子模型
(3) 不同浏览器的标签默认margin和padding不同

- 解决方案: * { margin: 0; padding: 0; }

(4) 块属性标签float后,又有横向的margin情况下,IE6显示margin比设置的大

- 解决方案: 在float的标签样式控制中加入display: inline,将其转换为行内属性

(5) 设置较小高度标签(一般小于10px),在IE6中,IE7,遨游中高度超出自己设置的高度

- 解决方案: 给超出高度的标签设置overflow: hidden; 或者设置行高line-height小于你设置的高度

(6) 行内属性标签,设置display: block后采用float布局,又有横向margin的情况,IE6间距BUG

- 解决方案: 在display: block;后面加入display:inline;display:table

(7) 图片默认有间距

- 解决方案: 使用float属性为img布局

(8) 标签最低高度设置min-height

- 解决方案: 如果要设置一个标签的最小高度为200px,需要进行的设置为: {min-height:200px; height:auto !important; height: 200px; overflow: visible; }

(9) 透明度的兼容CSS设置

- 解决方案: CSS hack
    - 如: height: 300px; *height: 200px; _height: 100px;
    - IE6认识的hacker: _, *;IE7、遨游认识的hacker: *

(10) var e = e || window.event;
(11) document.documentElement.clientWidth || document.body.clientWidth
(12) var target = e.target || e.srcElement
(13) cursor: hand, cursor.pointer//firefox不支持hand

viewport【参考】


  • 定义: 设备的屏幕上能用来显示网页的那一块区域。viewport不局限于浏览器可视区域的大小,可以比浏览器的可视区域大,也可以比浏览器的可视区域小。默认情况下,移动设备上的viewport大于浏览器可视区域。
  • CSS中的像素是一个抽象的单位,在不同的设备或不同的环境中,css中的1px代表的物理像素是不同的。
  • window.devicePixelRatio属性: 设备物理像素和设备独立像素的比例,即devicePixelRatio = 物理像素/独立像素。
  • 三个viewport理论
    (1) layout viewport: 浏览器默认的viewport,可通过document.documentElement.clientWidth获取,默认大于浏览器可视区域的宽度
    (2) visual viewport: 代表浏览器的可视区域,可通过window.innerWidth获取,但在Android 2, Opera mini, UC无法获取
    (3) ideal viewport: 没有固定的尺寸,不同的设备具有不同的ideal viewport。所有的iphone的ideal viewport都是320px,无论屏幕宽度是320还是640,css中320px就代表iphone屏幕的宽度
  • 利用meta标签对viewport进行控制
    • meta viewport的6个属性
      (1) width: 设置layout viewport的宽度,为一个正整数,或字符串”width-device”
      (2) initial-scale: 设置页面初始缩放值,为一个数字,可以带小数,相对于ideal viewport进行缩放
      (3) minimum-scale: 允许用户的最小缩放值,为一个数字,可以带小数
      (4) maximum-scale: 允许用户的最大缩放值,为一个数字,可以带小数
      (5) height: 设置layout viewport的高度,很少使用
      (6) user-scalable: 是否允许用户进行缩放,值为“no”或“yes”,no代表不允许,yes代表允许
  • 把当前的viewport宽度设置为ideal viewport的宽度
    • visual viewport宽度 = ideal viewport宽度 / 当前缩放值

浏览器输入URL后发生了什么


(1) 输入URL
(2) 浏览器查找域名的IP地址(DNS具体查找过程,包括:浏览器缓存->系统缓存->路由器缓存)
(3) 浏览器web服务器发送一个HTTP请求
(4) 服务器的永久重定向响应(从http://example.com到http://www.example.com)
(5) 浏览器跟踪重定向地址
(6) 服务器处理请求
(7) 服务器返回一个HTTP响应
(8) 浏览器显示HTML
(9) 浏览器发送请求获取嵌入在HTML中的资源(如图片、视频、音频、CSS、JS等)
(10) 浏览器发送异步请求

浏览器结构

(1) User Interface 用户界面
如:顶部(前进、后退、刷新、停止、地址栏、书签栏、状态栏、工具栏等)
侧栏(滚动条)、底栏(滚动条)、开发工具、下拉菜单、下载管理等
(2) Browser Engine 浏览器引擎
作用: 向上连接用户界面,向下连接渲染引擎,向右连接数据持久层
(3) Rendering Engine 渲染引擎(浏览器内核)

- 作用: 能显示HTML、XML和图片,并且通过一个插件可以显示其他类型资源,如PDF view显示PDF格式    
- 常见的渲染引擎  
    - webkit: Safari、Chrome
    - gecko: Firefox
- 流程:   
    - 从网络层获取请求文档的内容,解析HTML/SVG/XHTML,形成DOM树  ;
    - 解析CSS形成CSS规则树;  
    - 两者结合构成渲染树;    
    - 通过JS解释器解析脚本 
    - 最后通过UI后盾提供的接口绘出效果   

(4) Networking

- 作用: 用于网络调用,如HTTP、HTTPS   

(5) Javascript Interpreter JS解释器

- 作用: 解析和运行JS  

(6) UI Backend UI后端

- 作用: 用于绘制基本的部件

(7) DATA Persistence 数据持久层

- 作用: 浏览器需要保存各种分类的数据在硬盘,例如cookies和HTML5的本地数据库等,都是通过这层来实现的  

浏览器的内核有哪些


  • Trident
    • IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape8、
  • Gecko
    • Firefox、Netscape6-9
  • Webkit
    • Safari、chrome
  • Presto
    • Opera

JS引擎


欣赏此文?求鼓励,求支持!