Javascript基础知识点整理八：前端页面加载过程、性能优化及安全性

IFE     2019年03月30日     分类：   前端知识体系     标签：   javascript     浏览量：   4049

1，前端页面加载过程

浏览器可以通过链接来得到页面的内容，通过绘制和渲染，显示出页面最终的样子。

加载资源的形式一般为：1，浏览器根据输入url(或跳转页面)加载html 2，加载html中的静态资源（图片、css、js等）

前端根据url,显示出页面的过程：
第一步，加载资源：

1. 浏览器根据DNS服务器得到域名的IP地址
2. 向这个IP地址的服务器发送http请求
3. 服务器收到请求，处理 并返回http请求
4. 浏览器得到返回的内容

第二步，渲染：

1. 浏览器根据HTML生成HTML tree
2. 根据css生成cssom
3. 根据HTMLtree和cssom生成render tree
4. 根据渲染树开始渲染和展示
5. 遇到script时 会执行阻塞渲染（js有权力改变DOM结构）

2，前端性能优化

性能优化的原则：多使用内存、缓存或者其他方法，减少CPU计算、减少网络请求、减少I/O操作。

加载资源过程中的优化：

• 静态资源的压缩合并
• 静态资源缓存
• 使用CND让资源加载更快(CDN是不同区域的网络优化）
• 使用SSR(server side render)后端渲染(Vue React提出这样的概念)，数据直接输出到HTML中

渲染过程中的优化：

• CSS放前面，JS放后面
• 懒加载(图片懒加载，下拉加载更多)
• 减少DOM查询，对DOM查询做缓存
• 减少DOM操作，多个操作尽量合并在一起执行
• 事件节流
• 尽早执行操作(如DOMContenLoaded)，DOMContentLoaded是DOM渲染完即可执行，此时图片、视频还可能没加载完，而window.onload要 页面的全部资源加载完才会执行。

实例：

1, 图片懒加载

<img id="img1" src="preview.png" data-realsrc="abc.png"/>

//图片懒加载,先显示默认预览图，再异步加载实际图片
var img1 = document.getElementById('img1');
img1.src = img1.getAttribute('data-realsrc');

2，合并DOM操作

//合并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);//把10次DOM操作变成1次

3, 事件节流

var textarea = document.getElementById('text');
var timeoutId;
textarea.addEventListener('keyup', function () {
    if (timeoutId) {
        clearTimeout(timeoutId);
    }//停了100毫秒后才触发，减少了计算次数
    timeoutId = setTimeout(function () {
        //触发change事件
    }, 100)
})

3, WEB安全

常见的前端安全问题有：XSS和XSRF

XSS，指跨站脚本攻击(Cross Site Scripting)。
举个例子：在新浪微博中写一篇文章，同时偷偷插入一段script,攻击代码中，获取cookie，发送到自己服务器。发送博客，有人查看博客内容，会把查看者的cookie发送到攻击者的服务器。
前端预防：替换关键字，例如替换<为 < >为>

XSRF, 指跨站请求伪造（Cross-site request forgery）
举个例子：你已登录一个购物网站，正在浏览商品，该网站付费接口是xxx.com/pay?id=100但是没有任何验证，然后你收到一封邮件，隐藏着<img src=xxx.com/pay?id=100>,你查看邮件的时候，就已经悄悄的付费购买了。
预防措施：增加验证流程，如输入指纹、密码、短信验证码。

登陆后才可以评论