Font-End_面试题

2024年4月19日 132次阅读 来源: alogy

HTML

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

语义，连通性，离线存储，多媒体，2D/3D 画图和效果，机能集成，装备接见 Device Access，款式设想

HTML5修正的目的：

  1. 将互联网语义化
  2. 供应更好地支撑种种媒体的嵌入

新增运用程序接口API

  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的区分

input

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

textarea

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

区分：input单行文本框， textarea多行文本框

挪动装备疏忽将页面中的数字识别为电话号码的要领

设置mate

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

doctype的作用是什么

激活差异阅读器衬着形式

label的标签的作用是

属性: for和accesskey

for的作用：为哪一个控件效劳.
accesskey的作用：接见这个控件的热键.

作用：用户界面中项目的题目

png8、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
    原文作者：alogy
    原文地址: https://segmentfault.com/a/1190000009751253
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞