Font-End_面试题-程序员宅基地

技术标签： ViewUI  运维  前端  json  

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
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_33734785/article/details/89039444

智能推荐

2024最新计算机毕业设计选题大全-程序员宅基地

文章浏览阅读1.6k次，点赞12次，收藏7次。大家好！大四的同学们毕业设计即将开始了，你们做好准备了吗？学长给大家精心整理了最新的计算机毕业设计选题，希望能为你们提供帮助。如果在选题过程中有任何疑问，都可以随时问我，我会尽力帮助大家。在选择毕业设计选题时，有几个要点需要考虑。首先，选题应与计算机专业密切相关，并且符合当前行业的发展趋势。选择与专业紧密结合的选题，可以使你们更好地运用所学知识，并为未来的职业发展奠定基础。要考虑选题的实际可行性和创新性。选题应具备一定的实践意义和应用前景，能够解决实际问题或改善现有技术。

dcn网络与公网_电信运营商DCN网络的演变与规划方法(The evolution and plan method of DCN)...-程序员宅基地

文章浏览阅读3.4k次。摘要：随着电信业务的发展和电信企业经营方式的转变，DCN网络的定位发生了重大的演变。本文基于这种变化，重点讨论DCN网络的规划方法和运维管理方法。Digest: With the development oftelecommunication bussiness and the change of management of telecomcarrier , DCN’s role will cha..._电信dcn

动手深度学习矩阵求导_向量变元是什么-程序员宅基地

文章浏览阅读442次。深度学习一部分矩阵求导知识的搬运总结_向量变元是什么

月薪已炒到15w？真心建议大家冲一冲数据新兴领域，人才缺口极大！-程序员宅基地

文章浏览阅读8次。近期，裁员的公司越来越多今天想和大家聊聊职场人的新出路。作为席卷全球的新概念ESG已然成为当前各个行业关注的最热风口目前，国内官方发布了一项ESG新证书含金量五颗星、中文ESG证书、完整ESG考试体系、名师主讲...而ESG又是与人力资源直接相关甚至在行业圈内成为大佬们的热门话题...当前行业下行，裁员的公司也越来越多大家还是冲一冲这个新兴领域01 ESG为什么重要？在双碳的大背景下，ESG已然成...

对比传统运营模式，为什么越拉越多的企业选择上云？_系统上云的前后对比-程序员宅基地

文章浏览阅读356次。云计算快速渗透到众多的行业，使中小企业受益于技术变革。最近微软SMB的一项研究发现，到今年年底，78％的中小企业将以某种方式使用云。企业希望投入少、收益高，来取得更大的发展机会。云计算将中小企业信息化的成本大幅降低，它们不必再建本地互联网基础设施，节省时间和资金，降低了企业经营风险。科技创新已成时代的潮流，中小企业上云是创新前提。云平台稳定、安全、便捷的IT环境，提升企业经营效率的同时，也为企业..._系统上云的前后对比

esxi网卡直通后虚拟机无网_esxi虚拟机无法联网-程序员宅基地

文章浏览阅读899次。出现选网卡的时候无法选中，这里应该是一个bug。3.保存退出，重启虚拟机即可。1.先随便选择一个网卡。2.勾先取消再重新勾选。_esxi虚拟机无法联网

随便推点

在LaTeX中使用.bib文件统一管理参考文献_egbib-程序员宅基地

文章浏览阅读913次。在LaTeX中，可在.tex文件的同一级目录下创建egbib.bib文件，所有的参考文件信息可以统一写在egbib.bib文件中，然后在.tex文件的\end{document}前加入如下几行代码：{\small\bibliographystyle{IEEEtran}\bibliography{egbib}}即可在文章中用~\cite{}宏命令便捷的插入文内引用，且文章的Reference部分会自动排序、编号。..._egbib

Unity Shader - Predefined Shader preprocessor macros 着色器预处理宏-程序员宅基地

文章浏览阅读950次。目录：Unity Shader - 知识点目录（先占位，后续持续更新）原文：Predefined Shader preprocessor macros版本：2019.1Predefined Shader preprocessor macros着色器预处理宏Unity 编译 shader programs 期间的一些预处理宏。（本篇的宏介绍随便看看就好，要想深入了解，还是直接看Unity...

大数据平台，从“治理”数据谈起-程序员宅基地

文章浏览阅读195次。本文目录：一、大数据时代还需要数据治理吗？二、如何面向用户开展大数据治理？三、面向用户的自服务大数据治理架构四、总结一、大数据时代还需要数据治理吗？数据平台发展过程中随处可见的数据问题大数据不是凭空而来，1981年第一个数据仓库诞生，到现在已经有了近40年的历史，相对数据仓库来说我还是个年轻人。而国内企业数据平台的建设大概从90年代末就开始了，从第一代架构出现到..._数据治理从0搭建

大学抢课python脚本_用彪悍的Python写了一个自动选课的脚本 | 学步园-程序员宅基地

文章浏览阅读2.2k次，点赞4次，收藏12次。高手请一笑而过。物理实验课别人已经做过3、4个了，自己一个还没做呢。不是咱不想做，而是咱不想起那么早，并且仅有的一次起得早，但是哈工大的服务器竟然超负荷，不停刷新还是不行，不禁感慨这才是真正的“万马争过独木桥“啊！服务器不给力啊……好了，废话少说。其实，我的想法很简单。写一个三重循环，不停地提交，直到所有的数据都accepted。其中最关键的是提交最后一个页面，因为提交用户名和密码后不需要再访问其..._哈尔滨工业大学抢课脚本

english_html_study english html-程序员宅基地

文章浏览阅读4.9k次。一些别人收集的英文站点 http://www.lifeinchina.cn (nice) http://www.huaren.us/ (nice) http://www.hindu.com (okay) http://www.italki.com www.talkdatalk.com (transfer)http://www.en8848.com.cn/yingyu/index._study english html

Cortex-M3双堆栈MSP和PSP_stm32 msp psp-程序员宅基地

文章浏览阅读5.5k次，点赞19次，收藏78次。什么是栈？在谈M3堆栈之前我们先回忆一下数据结构中的栈。栈是一种先进后出的数据结构(类似于枪支的弹夹，先放入的子弹最后打出，后放入的子弹先打出)。M3内核的堆栈也不例外，也是先进后出的。栈的作用？局部变量内存的开销，函数的调用都离不开栈。了解了栈的概念和基本作用后我们来看M3的双堆栈栈cortex-M3内核使用了双堆栈，即MSP和PSP，这极大的方便了OS的设计。MSP的含义是Main..._stm32 msp psp

推荐文章

热门文章

相关标签