前端运行环境（2017）
Posted Z皓
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端运行环境（2017）相关的知识，希望对你有一定的参考价值。
页面加载过程
1、加载资源的形式：
输入url（或跳转页面）加载html；
加载html中的静态资源；
2、加载一个资源的过程：
浏览器根据DNS服务器得到域名的IP地址；
向这个IP的机器发送http请求；
服务器收到、处理并返回http请求；
浏览器得到返回内容。
3、浏览器渲染页面的过程：
根据HTML结构生成DOM Tree；
根据CSS生成CSSOM（视图模块）；
将DOM和CSSOM整合形成RenderTree（渲染树）；
根据RenderTree开始渲染和展示；
遇到<script>时，会执行并阻塞渲染。
4、面试题：
从输入url到得到html的详细过程
答：浏览器根据DNS服务器得到域名的IP地址==>向这个IP的机器发送http请求==>服务器收到、处理并返回http请求==>浏览器得到返回内容
window.onload和DOMContentLoaded的区别？
window.addEventListener(\'load\',function(){ //页面的全部资源加载完才会执行，包括图片、视频等 }) document.addEventListener(\'DOMContentLoaded\',function(){ //DOM渲染完即可执行，此时图片、视频还可能没有加载完 })
为何把css放在head中？
答：一是为了用户体验；二是为了性能
性能优化
原则：多使用内存、缓存或者其他方法；减少CPU计算和网络。
加载资源优化：
1、静态资源的压缩合并（require.js、webpack）；
2、静态资源缓存（通过连接名称控制缓存）；
3、使用CDN让资源加载更快（CDN全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近获得所需内容，解决internet网络拥挤的状况，提高用户访问网站的响应速度。）；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.bootcss.bom/bootstrap/..." rel="stylesheet" />
<script src="https://cdn.bootcss.com/zepto/..."></script>
</head>
<body>
</body>
</html>
4、使用SSR后端渲染；
5、数据直接输出到HTML中。
渲染优化：
1、CSS放前面，JS放后面；
2、图片懒加载；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--事先使用一个小图片替换真正要显示的图片，等真正的图片完全加载后再替换小图片-->
<img id="img1" src="small.jpg" data-realsrc="readlly.jpg" />
<script>
var img1 = document.getElementById(\'img1\');
img1.src = img1.getAttribute(\'data-realsrc\');
</script>
</body>
</html>
3、减少DOM查询，对DOM查询做缓存；
//未缓存DOM查询 var i; for(i=0;i<document.getElementsByTagName(\'p\').length;i++){ //执行代码 } //缓存了DOM查询 var i; var pList = document.getElementsByTagName(\'p\'); for(i=0;i<pList.length;i++){ //执行代码 }
4、减少DOM操作，多个操作尽量合并在一起执行；
var listNode = document.getElementById(\'list\'); //要插入10个li标签 var frag = document.createDocumentFragment(); var x,li; for(x=0;x<10;x++){ li = document.createElement(\'li\'); li.innerHTML = \'List item\'+x; frag.appendChild(li); } listNode.appendChild(frag);
5、事件节流；
//让事件延迟执行 var textar = document.getElementById(\'text\') var timeoutId; textar.addEventListener(\'keyup\',function(){ if(timeoutId){ clearTimeout(timeoutId); } timeoutId = setTimeout(function(){ //触发change事件 },100) })
6、尽早执行操作，如DOMContentLoaded）。
window.addEventListener(\'load\',function(){
//页面的全部资源加载完才会执行，包括图片、视频等
})
document.addEventListener(\'DOMContentLoaded\',function(){
//DOM渲染完即可执行，此时图片、视频还可能没有加载完
})
安全性
1、XSS（跨站脚本攻击）:
概念 恶意攻击者往Web页面里插入恶意的脚本代码，当用户浏览该网页时，嵌入其中的脚本会被执行，从而达到恶意攻击用户的目的。
分类 内部攻击，主要是利用程序自身的漏洞，构造跨站语句；外部攻击，主要是自己构造XSS跨站漏洞网页或者寻找非目标以外的有跨站漏洞的网页。
类型 存储型XSS，持久化，代码是存储在服务器中的，如在个人信息或发表文章等地方，假如代码，如果没有过滤或者过滤不严，那么这些代码将储存到服务器中，用户访问该页面时触发代码执行；反射型XSS，非持久化，需要欺骗用户自己去点击链接才能触发XSS代码（服务器中没有这样的页面和内容），一般容易出现搜索页面。
2、XSRF（跨站请求伪造）:
概念 跨站请求伪造是一种对网站的恶意利用，尽管听起来像是跨站请求攻击（XSS），但它与XSS非常不同，XSS利用站点内的信任用户，而CSRF则通过伪装来自受信任用户的请求来利用受信任的网站。与XSS攻击相比，CSRF攻击往往不大流行，导致对其进行防范的资源也相当稀少，因此难以防范，所以被认为比XSS更具有危险性。
小栗子 攻击通过在授权用户访问的页面中包含链接或者脚本的方式工作。例如：一个网站用户A可能正在浏览聊天论坛，而同时另一个用户B也在此论坛中，并且后者刚刚发布了一个具有A银行链接的图片消息。设想一下，B编写一个在A的银行站点上进行取款的form提交的链接，并将此链接作为图片src。如果A的银行在cookie中保存他的授权信息，并且cookie没有过期，那么当A的浏览器尝试装载图片时将提交这个取款form和他的cookie，这样在没经A同意的情况下便授权了这次事务。
攻击原理
防御措施 Token验证、Referer验证、隐藏令牌。
以上是关于前端运行环境（2017）的主要内容，如果未能解决你的问题，请参考以下文章