前端知识体系【下】

1.开发环境

1.1 git

见廖雪峰的Git教程

1.2 调试工具

1.3 抓包

1.4 webpack babel

把ES6+的js语法转化为ES5

1.5 linux常用命令

…远程链接软件mobaXterm，可连接远程服务器

2.运行环境

2.1 网页加载过程

题目

1. 从输入url到渲染出页面的整个过程
2. window.onload和DOMContentLoaded的区别

知识点

加载资源的形式

1. html代码
2. 媒体文件，图片，视频
3. js，css文件

加载资源的过程

1. DNS解析：域名到->IP地址
2. 浏览器根据IP地址发起http请求
3. 浏览器处理http请求，并返回给浏览器

渲染资源

1. 根据HTML代码生成DOM Tree
2. 根据CSS生成CSSOM（Object Model
3. 将DOM Tree和CSSOM整合形成Render Tree

CSS放在head中的原因: 需要在DOM树生成之前就先加载完毕CSS的规则，然后在DOM树加载的时候立马合并CSS的规则

遇到<script>标签，会触发重新渲染（因为script可能有些代码会修改dom，这样页面渲染的时间比较长，故应该把<script>放在最后

DOMContentLoad速度会比较快，考虑下面的代码

img中的图片可能没有加载完成，但是DOM渲染已经完成了，所以就能够触发DOMContentLoad，等到图片加载完成后才会触发window.onload。此时并不会改变dom的结构。

解答

1. 从输入url到渲染出页面的整个过程（见上
2. window.onload和DOMContentLoaded的区别（见上
   代码示例
   
   只要img1加载完成就会触发img.onload，需要本页面的所有资源（图片等）加载完成才会触发window.onload，而只要dom结点渲染完成就会触发DOMContentLoad

2.2 性能优化

原则

1. 多使用内存、缓存或者其他方法
2. 减少CPU计算量，减少网络加载耗时
3. 即空间换时间

方向

1. 加载更快
   1. 减少资源体积：压缩代码
   2. 减少访问次数：合并代码、SSR服务端渲染、缓存
   如多个js打包成一个、精灵图等。如nuxtjs等框架，缓存是暂时放在缓存中
   3. 使用更快的网络：CDN
2. 渲染更快
   1. CSS放在head中，js放在body最下面
   2. 尽早开始执行JS，用DOMContentLoaded触发
   3. 懒加载（图片懒加载，上滑加载更多
   4. 对DOM查询进行缓存
   5. 频繁DOM操作，合并一起插入到DOM结构
   6. 节流throttle防抖debouce

示例

示例

const input = document.getElementsByTagName('input')[0];

//朴素版, 每个元素需要设置一个timer，太麻烦
let timer = null;
input.addEventListener('keyup', e => {
    //把之前设置的定时任务清空
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(() => {
        //模拟触发change事件
        console.log(e.target.value);
        //情况计时器
        timer = null;
    }, 500)
})
//防抖, 封装
function debouce(fn, delay = 500) {
    //timer在闭包中
    let timer = null;

    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null;
        }, delay)
    }
}

input.addEventListener('keyup', debouce(function(){
    console.log(input.value);
}));

const div = document.getElementsByTagName('div')[0];

//朴素版
let timer = null;
div.addEventListener('drag', e => {
    if (timer) return;

    timer = setTimeout(() => {
        console.log(e.offsetX, e.offsetY);
        timer = null;
    }, 500)

})


//封装
function throttle(fn, delay = 500) {
    let timer = null;

    return function () {
        if (timer) return;
        timer = setTimeout(() => {
            //如果写fn()会报错
            fn.apply(this, arguments);
            timer = null;
        }, delay)
    }
}

//因为e是传给throttle的返回反数,  所以e=>{ }的,{}是访问不到e的
//要想访问，只能让fn.appy(this, arguments)
div.addEventListener('drag', throttle(function (e){
    console.log(e.offsetX, e.offsetY)
}, 200));

2.3 安全

问题

1. 常见的web前端攻击方式有哪些

知识点

XSS跨站请求攻击

比如

    <p>一段文字</p>
    <script>console.log(document.cookie)</script>

解决

比如上述改为

```html
    <p>一段文字</p>
    &lt;script&gt;console.log(document.cookie)&lt;/script&gt;

浏览器会解析为

XSRF跨站伪造请求

举个例子：


会把把用户信息全部传输过去

解决：

1. 使用post接口
2. 增加验证，例如密码、短信认证、指纹等