Font-End_面试题

时间  2019-12-05
标签 font end 面试 栏目 快乐工作 繁體版
原文   原文链接

HTML

HTML5新增了哪些内容或API，使用过哪些javascript

语义，连通性，离线存储，多媒体，2D/3D 绘图和效果，性能集成，设备访问 Device Access，样式设计php

HTML5修改的目标：css

  1. 将互联网语义化
  2. 提供更好地支持各类媒体的嵌入

新增应用程序接口APIhtml

  1. HTML Geolocation - 地理位置
  2. HTML Drag and Drop - 拖放
  3. HTML Local Storage - (本地存储)
  4. HTML Application Cache - 应用程序缓存
  5. HTML Web Workers - Web Workers
  6. HTML Canvas/WebGL - Canvas WebGL
  7. HTML Audio/Video - Audio Video

元素与属性前端

  1. 文件类型声明:<!DOCTYPE HTML>。
  2. 新的解析顺序：再也不基于SGML解析。
  3. 新增经常使用元素: section（写文章的时候会常常用到，w3school中说：文档中的节（section、区段）。好比章节、页眉、页脚或文档中的其余部分。）, video/audio, nav,aside, canvas, footer, header, mark（标记高亮）新增标签MDN
  4. input元素的新type： date, email, url
  5. 新的属性： charset（用于meta）, async（用于script）
  6. 新的全域属性：contenteditable(元素是否可被用户编辑), contextmenu(上下文菜单是指在用户交互（例如右键点击）时出现的菜单), draggable(用于标识元素是否容许使用 拖放操做API 拖动), dropzone, hidden, spellcheck

input和textarea的区别vue

inputhtml5

  1. 须要type值
  2. value属性指定初始值，maxlength属性指定输入最长的长度，size属性指定显示字符长度
  3. 宽高只能经过CSS样式指定

textareajava

  1. 使用标签对,且内容在标签对中:<textarea>内容</textarea>
  2. 使用row、col指定大小

区别：input单行文本框， textarea多行文本框react

移动设备忽略将页面中的数字识别为电话号码的方法webpack

设置mate

<meta content="telephone=no" name="format-detection">

doctype的做用是什么

激活不一样浏览器渲染模式

label的标签的做用是

属性: for和accesskey

for的做用：为哪一个控件服务.
accesskey的做用：访问这个控件的热键.

做用：用户界面中项目的标题

png八、24的区别是

根本区别：存储方式不一样.
png8有1位的布尔透明通道（要么彻底透明，要么彻底不透明）
png24有8位（256阶）的布尔透明通道（半透明）

特色：
png8和gif又一些类似之处，模式都是索引颜色，只支持像素级的纯透明，不支持alpha透明。
"IE6 不支持PNG透明"，是指不支持PNG-24的透明，可是IE6支持PNG8的透明，就像支持gif的透明同样。

请说下移动端常见的适配不一样屏幕大小的方法

  1. Rem布局
  2. 流式布局
  3. Felx布局

移动端布局
移动端H5页面适配问题研究
移动web适配利器-rem

html标签语义化的好处

  1. 利于SEO优化。
  2. 在样式丢失的时候，还能够比较好的呈现结构。
  3. 更好的支持各类终端，例如无障碍阅读和有声小说等。
  4. 利于团队开发和维护，遵循W3C规范，减小代码差别，提升效率。

页面DOM节点太多，会出现什么问题？如何优化？

问题：

页面卡顿，帧率降低

优化：

  • 采用Virtual DOM， virtual-dom
  • 屡次操做DOM，改成批量一次操做DOM
  • 及时移走页面不用的DOM
  • 避免没必要要的DIV嵌套

页面的渲染过程

  • 解析整个HTML，获得DOM树和样式树
  • DOM树和样式树，通过渲染，获得一棵渲染树
  • 根据渲染树，开始布局，计算各个节点宽度，位置，高度等。
  • 而后开始绘制整个页面并显示
  • 在渲染过程当中若是使用GPU，还能够进行GPU渲染

高性能DOM

一个网站，在页面上承载最多的内容就是DOM。并且不管是经过加载JS，加载Image，也都是经过HTML标签来实现的。

DOM性能优化：

  • 站点的网络消耗
  • DOM初始化过程（浏览器）
  • DOM结构以及动态操做（人为）
  • JS执行过程（浏览器 - V8）
  • JS逻辑组织（人为）

站点的网络消耗基本上无法控制，复杂的网络，在一个下行的终端实际上选择不了会接触什么样的网络环境。

DOM的初始化过程没法控制，浏览器内部有DOM解析引擎，它的解析快慢改变不了。

DOM的操做以及动态操做，一个页面的DOM结构是在制做页面的时候定义下来的，能够采用各类方式，好比：多层嵌套，底层嵌套，绝对定位，相对定位。
动态操做就是DOM在运行到必定阶段以后发生。

JS执行过程跟浏览器内核相关，依靠JS引擎执行。它的执行快慢没法改变，可以优化的是JS逻辑组织部分。

回流Reflow：对于DOM结构的各个元素都有本身的盒子模型，这些都须要浏览器根据各个样式（浏览器的默认，开发人员定义的）来计算，并根据计算结果将元素放到它该出现的位置
重绘Repaint：当各个盒子的位置，大小以及其它属性，例如：颜色，字体大小等都肯定下来后，浏览器因而便把这些元素都按照各自的特性绘制一遍，因而页面的内容出现了。

什么状况触发回流或者重绘？
DOM元素的添加，修改（内容），删除（回流+重绘），仅修改DOM的元素的字体颜色（只有重绘，所以不须要调整布局），回流必定会触发重绘，可是重绘不必定触发回流

避免触发回流和重绘，提升DOM的性能：
display的值会影响布局，从而影响整个页面元素的位置发生变化，因此会更改DOM-Tree,须要从新render-Tree的结构，先将元素从document中删除，完成修改后再把元素放回原来的位置，若是须要建立多个DOM结构，可使用documentFragment建立完成后一次性添加到document

在前端开发中，页面渲染指什么？

资料

前端工程师手册
维基百科HTML5
MDN-HTML5

CSS

左右布局：左边定宽、右边自适应，很多于3种方法

absolute + padding

<div class="auto-w">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

<style>
    .auto-w {
        position: relative;
        width: 500px;
        height: 200px;
        padding-left: 100px;
    }
    .auto-w .left {
        position: absolute;
        left: 0;
        width: 100px;
        height: 100%;
        background: pink;
    }
    .auto-w .right {
        width: 100%;
        height: 100%;
        background: cyan;
    }
</style>

flex

<div class="auto-w">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<style>
    .auto-w {
        display: flex;
        width: 500px;
        height: 200px;
    }
    .auto-w .left {
        width: 100px;
        height: 100%;
        background: pink;
    }
    .auto-w .right {
        height: 100%;
        background: cyan;
        flex-grow: 1;
    }
</style>

float

<div class="auto-w">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<style>
    .auto-w {
        width: 400px;
        height: 100px;
    }
    .auto-w .left {
        float: left;
        width: 100px;
        height: 100%;
        background: pink;
    }
    .auto-w .right {
        height: 100%;
        background: cyan;
    }
</style>

CSS3用过哪些新特性

  1. Selector
  2. @font-face 字体
  3. border-radius 圆角
  4. box-shadow text-shadow 文本和框的阴影
  5. Word-wrap 样式

  6. 多列布局（multi-column layout）

    <style>
.multi_column_style { 
-webkit-column-count: 3; 
-webkit-column-rule: 1px solid #bbb; 
-webkit-column-gap: 2em; 
} 
</style>
  
<div class="multi_column_style"> 

</div>

// Column-count：表示布局几列。
// Column-rule：表示列与列之间的间隔条的样式
// Column-gap：表示列于列之间的间隔

  7. transform 转换

    2D 转换
rotate 旋转，图片转个90或180度 
translate 位置移动
scale, skew, matrix 等
3D 转换
rotate(XYZ) 根据x,y,z轴旋转
translate(XYZ), scale(XYZ)  
perspective 透视, 景深，这个不少3D效果都要设置一下，否则3D仍是会”2D”的效果
  8. transition: 过渡，好多简单的动画，移个位置，变个长短.
  9. animation: 动画，3D能够调用硬件渲染。
  10. @media 媒体查询，适用于一些响应式布局中
  11. flex: flex布局，cssreference
  12. word-wrap, background-size, background-origin, border-image, box-sizing, calc, linear-gradient, radial-gradient
  13. will-change: 改善渲染性能,使用CSS3 will-change提升页面滚动、动画等渲染性能

BFC、IFC

盒模型布局的CSS渲染模式

BFC：Black Formatting Context,块级格式上下文。 BFC表现原则：内部子元素再怎么折腾，都不会影响外部的元素，自成一方天地.
深刻理解BFC

BFC造成（一条或多条均可以造成BFC）:

  1. float 的值不为 none
  2. position 的值不为 static 或 relative
  3. display属性为inline-boxs、table-cells、table-captions的不是块盒的块容器(除非这个值已经被传播到视口),
  4. overflow不为visible的块盒才会为它的内容建立新的BFC。
  5. body元素

IFC：Inline Formatting Context, 直译"内联格式化上下文"，理解成行内盒子模型. 高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)

对栅格的理解

基础就是float 和 width:百分比

以规则的网格阵列来规范网页中的版面布局以及信息分布。

盒子模型 加了box-sizing 以后怎样

  1. IE5.x 以及Quirks(怪异)模式的IE6，IE7中，border和padding都包含在width和height中。
  2. 标准浏览器中width和height仅仅包含content, 不包含border和padding。
  3. CSS3定义了box-sizing属性：box-sizing: content-box | border-box | inherit;
    content-box: 该属性维持CSS2.1盒模型的组成方式。border-box：该属性将从新定义CSS2.1盒模型组成模式(与IE6解析相同)

样式权重的排序

!important > id > class > tag[name=val] > tag

display有哪些属性值，有什么做用？

  1. none：元素不会显示，并且改变元素现实的空间也不会保留
  2. inline：将元素显示为内联元素，元素先后没有换行符
  3. block:将元素显示为块级元素，元素先后会带有换行符
  4. inline-block：行内块元素
  5. list-item：此元素会做为列表显示
  6. table: 会做为会计表格来显示(相似table),表格先后带有换行符.
  7. inherit: 应该从父级继承display属性的值
  8. box: 弹性盒子模型(CSS3新增)
  9. flex： flex布局(CSS3新增)
  10. grid: 栅格盒模型值(CSS3新增)

MDN-display

1像素边框问题

缘由：因为移动端通常都会设置视口(屏幕宽度为设备宽度),width=device-width,initial-scale=1，而有些屏幕是2倍屏，致使在移动端上设置1px就是看上去的2px

解决方法：

  1. 经过transform将宽度缩小一半，transform:scaleY(0.5)
  2. 经过@media媒体查询，查询当前设置的屏幕倍率，统一设置transform 移动端(手机)1像素边框真正实现

  3. 模仿淘宝的设置，将屏幕宽度为设计师的设计尺寸(通常为750)。

    <meta name="viewport" content="width=750, user-scalable=no">

  4. 动态设置content

    (function(e){if(!e["_med"])e["_med"]={};var t=e["_med"];t.cookie=function(e,t,a){if(t!==undefined){a=a||{};if(typeof a.expires==="number"){var o=a.expires,l=a.expires=new Date;l.setTime(+l+o*864e5)}return document.cookie=[e,"=",String(t),a.expires?"; expires="+a.expires.toUTCString():"",a.path?"; path="+a.path:"",a.domain?"; domain="+a.domain:"",a.secure?"; secure":""].join("")}var r=e?undefined:{};var i=document.cookie?document.cookie.split("; "):[];for(var n=0,s=i.length;n<s;n++){var b=i[n].split("=");var d=b.shift();var p=b.join("=");if(e&&e===d){r=p;break}if(!e&&p!==undefined){r[d]=p}}return r};var a=document;var o=e.devicePixelRatio||1,l=a.documentElement.clientWidth,r=a.documentElement.clientHeight,i,n,s,b=/initial-scale=([\d\.]+?),/i,d,p;if(a.querySelector){p=a.querySelector('meta[name="viewport"]');if(p){d=b.exec(p.content+",");if(d){s=parseFloat(d[1],10)}}}if(s){l=l*s;r=r*s}if(screen){if(Math.abs(screen.width-l*o)<.2*screen.width){l=screen.width/o;r=screen.height/o;i=screen.width;n=screen.height}else{l=screen.width;r=screen.height;i=screen.width*o;n=screen.height*o}}else{i=l*o;n=r*o}var m="createTouch"in a&&"ontouchstart"in e?1:0;var c=["dw:"+l,"dh:"+r,"pw:"+i,"ph:"+n,"ist:"+m].join("&");t.cookie("_med",c,{expires:3650})})(window);

（水平）居中有哪些实现方式

  1. margin

    <div style='width: 100px; margin: 0 auto;'>margin<div>

  2. text-align

    <div style='text-align: center'>text-align</div>

  3. position+transform

    <div>
  <div style='position: relative; left: 50%; transform: translateX(-50%); display: inline-block;'>transform</div>
</div>

  4. flex

    <div style='display: flex; justify-content: center;'>
  <div>flex</div>
</div>

  5. table+margin

    <div>
  <div style='display: table; margin: 0 auto;'>table + margin</div>
</div>    
<!--display: table 在表现上相似 block 元素，可是宽度为内容宽。-->

移动端的常见问题

  1. 点透事件 zepto的tap事件的点透问题的几种解决方案
  2. 长时间按住页面出现闪退问题
  3. 旋转屏幕时，字体调整问题
  4. 上下拉动滚动条时卡顿，慢的问题

长时间按住页面出现闪退问题

element {
  -webkit-touch-callout: none;
}

上下拉动滚动条时卡顿，慢的问题

body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

旋转时字体大小调整

/* 旋转屏幕时，字体大小调整的问题 */
html, body, p, div {
    -webkit-text-size-adjust:100%;
}

忽略页面中的电话号码

<mate name="format-detection" content="telehone=no" />

资料

深刻了解 CSS3 新特性
HTML5常见问题

JavaScript

跨域解决方式

JSONP,domain, window.name,ifrome，反向代理(nginx)

什么是闭包？闭包有什么做用？

闭包：函数里面套函数，外层函数没法访问里面函数中的变量，里面函数能够访问外层函数中的私有变量。
做用：防止全局变量

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

localStorage,cookie

HTML5的存储方式有哪些？有何区别？

存储方式：localStorage,sessionStorage
区别：存储时间不同，localStorage本地永久存储，sessionStroage页面关闭，ctrl+f5存储的值清空(f5刷新值存在).

内存溢出

  1. 请求数据过大
  2. 死循环
  3. 引用对象，使用完不释放
  4. 全局变量过多

表现：

  1. 意外的全局变量
  2. 被遗忘的计时器或回调函数
  3. 脱离 DOM 的引用
  4. 闭包

4类 JavaScript 内存泄漏及如何避免

图片懒加载

原理：访问一个页面的时候，把img或者background相关属性的加载默认图（或者其它节约资源的图片），当图片在可可视区域内时，才设置图片的真正路径.

优势：减轻服务器的压力，用户体验好（加载好的页面更快呈如今用户面前）

function elementInViewport(el) {
    var rect = el.getBoundingClientRect()
    
    // For invisible element.
    if (rect.top + rect.bottom + rect.left + rect.right + rect.height + rect.width === 0) {
      return false;
    }
    
    return (
       rect.top   >= 0
    // Pre load.
    && rect.top   <= ((window.innerHeight || document.documentElement.clientHeight) + 100)
    && rect.left  >= 0
    // Hide carousel except the first image. Do not add equal sign.
    && rect.left  < (window.innerWidth || document.documentElement.clientWidth)
    )
}

实现页面加载进度条

实现插件：PACE

  • AJAX （监控全部AJAX请求）
  • Elements （检查页面上的特定元素存在）
  • Document （document 的 readyState 事件）
  • Event Lag （检查正在执行JavaScript的事件循环）

事件委托

利用事件冒泡和e.target来肯定事件和元素。在jQuery中有$.delegate方法去代理事件。

事件委托原理：

  1. 须要绑定事件的元素不少，且处理逻辑相似。
  2. 元素都是动态建立，或频繁增长，删除，致使元素绑定事件过于复杂。
// https://github.com/zenorocha/delegate/blob/master/src/delegate.js

const delegate = (element, selector, type, callback) => {
  element.addEventListener(type, (e) => {
    let target = e.path.find(ele => ele.matches(selector))
    if (target) {
      callback.call(element, e);
    }
  });
};

实现 extend 函数

浅拷贝使用ES6的Object.assign()
深拷贝：zepto extend

直接克隆一个Nested Object的简便方法：

var origin = {a: 'a'}
var copy = JSON.parse(JSON.stringify(origin));

为何会有跨域的问题以及解决方式

前端解决跨域问题的8种方案, HTTP访问控制（CORS）,浏览器的同源策略

产生缘由：

  • 处于安全考虑，浏览器会限制从脚本内发起的跨域HTTP请求。 例如，XMLHttpRequset和Fetch都须要遵循同源策略
  • 同源策略限制从一个源加载的文档或脚本如何与来自另外一个源的资源进行交互。 这是一个用于隔离潜在恶意文件的关键的安全机制。

解决方式：

  1. JSONP(JSON with Padding): 利用加载 JS 文件不须要遵循同源策略的原理。
  2. CORS(Cross-Origin Resource Sharing): 在服务器端返回容许跨域访问的头。
  3. WebSockt：利用 WebSocket 不须要遵循同源策略的原理。

JSONP原理、postMessage原理

can-anyone-explain-what-jsonp-is-in-layman-terms

JSONP 原理：加载一个 script，并执行一段回调 JS ，由于加载 JS 不须要遵循同源策略。

  1. 没法发送特定的头部
  2. 只能是GET请求
  3. 没法发送 body

postMessage 文档

动画：setTimeout什么时候执行，requestAnimationFrame的优势

setTimeout 什么时候执行:

tasks-microtasks-queues-and-schedules

requestAnimationFrame的优势

【MDN】requestAnimationFrame

window.requestAnimationFrame() 方法告知浏览器执行动画，并请求浏览器调用指定的函数在下一次重绘以前更新动画。该方法将在重绘以前调用的回调做为参数。

优势：

  1. 在浏览器重绘前调用，保证浏览器渲染效率和性能
  2. 能够精准地控制动画的每一帧

主要在游戏，动画方面使用。用这个方法能够保持较高帧频率和效率。 好比一个60帧率的动画，requestAnimationFrame通常会以16ms的间隔调用一次

手写parseInt的实现：要求简单一些，把字符串型的数字转化为真正的数字便可，但不能使用JS原生的字符串转数字的API，好比Number()

const parseInt = str => str - 0;
const parseInt = str => str / 1;
const parseInt = str => str * 1;
const parseInt = str => +str;

复杂写法：

const parseInt = str => {
  let n = 0;
  let i = 1;
  str.split('').reverse().map(s => {
    n += i * (s.charCodeAt(0) - 48);
    i *= 10;
  });
  return n;
}

编写分页器组件的时候，点击“下一页”怎样能确保还有数据能够加载（请求数据不会为空）？

服务器须要返回总数，当前偏移量，根据总数和偏移量判断是不是最后一页。

ES6新增了哪些特性

ECMAScript 6 入门

require.js的实现原理（若是使用过webpack，进一步会问，二者打包的异同及优缺点）

requireJS实现原理研究

相同点：都以模块化方式组织代码
不一样点：

  1. requirejs 只能加载JS文件
  2. webpack 能够打包JS，CSS，甚至是图片

promise的实现原理，进一步会问async、await是否使用过

使用框架 ( vue / react 等)带来好处( 相对jQuery )

  1. MVVC架构，数据驱动视图，数据绑定，减小DOM操做。
  2. 组件化组织页面，效率更高，维护更简便。
  3. Virtual Dom 带来性能上的提高
  4. 路由控制，单页应用更为简便

vue双向数据绑定的实现

实现双向数据绑定的关键是Observer. 即用户改变了数据，框架如何知晓，并及时更新视图。

vue2.17源码学习

Observer实现包括：
参考：observer
Object.defineProperty

var obj = {}
Object.defineProperty(obj, 'key', {
  enumerable: true,
  set(x) {
    console.log(`set key: ${x}`);
    obj.__ob__  = obj.__ob__ || {};
    obj.__ob__.key = x;
  },
  get() {
    return obj.__ob__.key;
  }
})
obj.key = 'value';
/**
 * 输出：
 * set key: value
 */

Proxy

var ele = {
  data: null
};
var handler = {
  get: function(target, key) {
    if (typeof target[key] === 'object' && target[key] !== null) {
      return new Proxy(target[key], handler)
    } else {
      return target[key];
    }
  },
  set: function(target, key, value) {
    console.log('set ' + key)
    target[key] = value;
    return value;
 }
}
ele = new Proxy(ele, handler);
ele.data = {a: 'a', b: {bb: 'bb'}}
ele.data.a = 'aa';
ele.data.b.bb = 'bb1';
ele.data.c = 'cc';
/*
 * 输出：
 * set data
 * set a
 * set bb
 * set c
 */

其余的数据操做，如：数组的push等，只须要在原生上加Hook就好了

var arr = [];
var __push = Array.prototype.push;

Array.prototype.push = function (...items) {
  console.log(`push: ${items}`);
  return __push.apply(this, items);
}

arr.push('value')
/**
 * 输出：
 * push: value
 */

从视图反向把数据流过来，稍微简单些，只须要记录对应的key值，而后在输入框触发change, keypress事件的时候，更新对应key的数据便可。

单页应用，如何实现其路由功能

Hash

// https://github.com/zhoukekestar/modules/blob/master/src/views/views.js
window.addEventListener('hashchange', () => {
  // 隐藏其余页面
  Array.from(document.querySelectorAll('.page')).map(page => {
    page.style.display = 'none';
  });
  // 根据hash值显示对应的页面
  document.querySelector(location.hash).style.display = 'block';
});

使用HASH实现的简单路由 测试：在线测试

History

// https://github.com/zhoukekestar/modules/blob/master/src/loadpage/loadpage.js
// push 页面
history.pushState('', '', url);
// pop 页面
window.onpopstate = (e) => {
};

使用History实现的简单路由,在线测试

项目中使用过哪些优化方法

  • 页面静态化，（Pug在静态编译后部署）
  • CDN加速, 多地缓存

  • 前端渲染 (Data + View) / 后端渲染( SSR, SEO 等), 视具体状况选择，如：

    前端渲染，适合大流量的场景
后端渲染，适合SEO优化，用户体验提高等场景

  • 缩减域名，以减小DNS解析时间，（可采用<link rel="dns-prefetch" href="//xxx.com">进行优化）

    若是遇到域名解析的问题，可尝试HTTPDNS方案
  • Combo服务器合并CSS，JS请求, 减小第一屏网络请求。（若是采用HTTP2.0方案，资源合并可省略）
  • 异步加载非核心业务和逻辑资源

  • 资源和请求缓存，可参考缓存的答案

    Cache-Control/Expires 前端缓存
Last-Modified/Etag 服务器端缓存，304
  • 若是是和Native混合开发的，还可使用Native缓存
  • DNS就近解析应用服务器，须要和CDN配合使用

资料

网络

静态资源或者接口等如何作缓存优化

  • redis/memcache作数据缓存
  • SQL 查询作缓存
  • 指定 Cache-Control/Expires 缓存时间
  • Last-Modified/Etag 缓存 ( 304 ) 方案
  • 网关服务器作缓存，须要更新时，再回源到应用服务器
  • CDN多机房，多网关缓存

输入一个URL，Enter以后发生了什么

具体步骤:

  1. 把URL地址经过DNS解析为具体的服务器主机
  2. 浏览器封装HTTP请求 (window.navigator.userAgent)
  3. 浏览器建立与服务器的TCP链接
  4. 浏览器发出HTTP请求
  5. 服务器收到请求后交给相应的进程处理
  6. 服务器把处理后的结果发送给浏览器
  7. 浏览器生成渲染树和DOM树渲染页面
  8. 浏览器处理页面中嵌入的资源和异步请求

  • 浏览器解析URL，如：https://www.google.co.jp/?gfe_rd=cr&ei=NPJtWZTXJabEXoKjqOAP&gws_rd=ssl包括

    协议：`http`,`https`等
域名：`www.google.co.jp`
资源路径：`/`
参数查询：`gfe_rd=cr`,关键词`cr`

  • DNS

    浏览器DNS缓存
HOSTS查询
DNS服务器查询
ARP查询
  • TCP握手，TLS握手

  • HTTP(s),(或SPDY，或HTTP2.0)

    Header
Domain
Body

  • Gateway/Nginx,网关和负载均衡服务器

    查询本地缓存
请求上游应用服务器

  • 浏览器解析HTML，并请求资源

    CSS    
JS    
图片
  • 生成DOM-Tree,结合CSS进行渲染

更为完整详细：what-happens-when-zh_CN

前端的安全

前端的安全问题有哪些，如何解决

  1. sql注入
  2. shell注入
  3. xss
  4. csrf
  5. 对数据加密
  6. 对关键字进行处理

sql注入

前端js防止SQL注入

思路：发现SQL注入位置(URL地址和Input输入框)，判断服务器类型和后台数据库类型.

解决方法：

URL地址防注入

// 过滤URL非法SQL字符
var sUrl = location.search.toLowerCase();
var sQuery = sUrl.substring(sUrl.indexOf('=') + 1); // 获取查询参数key
// SQL关键字
reg = /select|update|delete|truncate|join|union|exec|insert|drop|count|'|"|;|>|<|%/i;
if (reg.test(sQuery)) {
  console.log('输入非法字符');
  location.href = sUrl.replace(sQuery, ''); // 从新跳转
}

输入文本框防注入

// 防止SQL注入
function AntiSqlValid(context) {
  reg = /select|update|delete|truncate|join|union|exec|insert|drop|count|'|"|;|>|<|%/i;
  if (reg.test(context.value)) {
    // 提示信息，其它操做
  }
  return;
}

shell注入

代码注入

常见的Shell注入资源有system()，StartProcess()，java.lang.Runtime.exec()，System.Diagnostics.Process.Start()以及相似的应用程序接口

在请求地址上置换用户提交的许多其余单字。

处理特殊字符：$,;,|,&&,||,>,<

XSS
英语：Cross-site scripting，一般简称为：XSS
网站应用程序的安全漏洞攻击，是代码注入的一种.

形成的结果：可能获得更高的权限（如执行一些操做）、私密网页内容、会话和cookie等各类内容。

检测方法
测试网站是否有正确处理特殊字符

  1. ><script>alert(document.cookie)</script>
  2. ='><script>alert(document.cookie)</script>
  3. "><script>alert(document.cookie)</script>
  4. <img src="javascript:alert('XSS')">
  5. <iframe src="//baidu.com/t.html"></iframe>

涉及到的知识：HTTP,Cookie,Ajax等。

XSS原理：

XSS：JavaScript代码
DDOS
Server Limit DOS: HTTP头超长，致使域名没法访问。

  • 获取Cookie中的信息
  • 破坏正常的页面结构，插入恶意内容

XSS类型：

  • 反射型

    发出请求时，XSS代码出如今URL中，做为输入提交到服务器端，服务器端解析后响应，XSS代码随响应内容一块儿传回给浏览器,最后浏览器解析执行XSS代码。该过程像一次反射，称之为：反射型XSS

  • 存储型

    存储型XSS和放射型XSS的差异仅在于，提交的代码会存储在服务器端（数据库，内存，文件系统等），下次请求目标页面时不用再提交XSS代码

响应头：

// express框架
res.set('X-XSS-Protection', 0) // 默认是浏览器拦截，设置为0以后，XSS代码就生效

XSS预防措施：

  • 编码

    对用户输入的数据进行HTML Entity编码

  • 过滤

    移除用户上传的DOM属性，如onerror，与事件相关等
移除用户上传的Style节点，Script节点，Iframe节点等

  • 校订

    避免直接对HTML Entity解码
使用DOM Parse转换，校订不配对的DOM标签

跨站脚本

csrf

中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。

理解成：攻击者盗用了你的身份，以你的名义发送恶意请求.
CSRF攻击是源于WEB的隐式身份验证机制。WEB的身份验证机制虽然能够保证一个请求是来自于某个用户的浏览器，但却没法保证该请求是用户发送的。

CSRF的前端防护：

在每次POST，GET请求时，添加X-CSRFToken请求头。

  1. 用户操做限制，好比验证码；
  2. 请求来源限制，好比限制HTTP Referer才能完成操做；
  3. token验证机制，好比请求数据字段中添加一个token，响应请求时校验其有效性；

先后端分离架构下CSRF防御机制

npm

暂时指定代理

// npm install mongoose --registry 内网ip
npm install mongoose --registry http://172.18.0.199

永久指定代理

// npm config set registry 内网ip
npm config set registry "http://172.18.0.199"

使用nrm动态切换代理

npm install -g nrm

测试代理最快

nrm test
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程