开发环境/运行环境-前端面试题

开发环境

git

常用git命令

chrome调试工具

抓包

移动端h5页，查看网络请求时需要用工具抓包

webpack和babel

ES6模块化

linux命令

---

运行环境

运行环境即浏览器（server端有node.js），它下载网页代码，渲染出页面，期间会执行若干JS命令，运行环境要保证代码在浏览器中稳定且高效

页面加载过程

资源的形式：html代码；媒体文件，如图片视频等；JavaScript，css

加载过程：DNS（域名服务）解析：域名->IP地址；浏览器根据IP地址向服务器发起http

请求；服务器处理http请求，并返回给浏览器。

渲染过程：根据HTML代码生成DOM Tree，根据CSS代码生成CSSOM（一个可结构化对象，与DOM树相似），将DOM Tree和CSSOM整合形成Render tree（渲染树），根据Render tree渲染页面，遇到<script>则暂停渲染，优先加载并执行JS代码，完成后再继续，直至把Render tree渲染完成。

思考：为什么把CSS放在head中。

window.onload和DOMContentLoaded

window.addEventListener('load',function(){
    //页面的全部资源加载完才会执行，包括图片、视频等
})
document.addEventListener('DOMContentLoaded',function(){
    //DOM渲染完即可执行，此时图片、视频还可能没加载完。一般情况下使用这个方法，网页加载更快
})

性能优化

原则：多使用内存、缓存或其他方法；减少CPU计算量，减少网络加载耗时，适用于所有编程的性能优化--空间换时间

入手点：让加载更快，让渲染更快。

让加载更快：减少资源体积：压缩代码；减少访问次数：合并代码，SSR服务器端渲染，缓存。

让渲染更快：CSS放在head，JS放在body最下面；尽早开始执行JS，用DOMContentLoaded触发；懒加载（图片懒加载，上滑加载更多）；对DOM查询进行缓存；频繁的DOM操作，合并到一起插入DOM结构；节流throttle和防抖debounce

缓存：静态资源加hash后缀，根据文件内容计算hash；文件内容不变，则hash不变，则url不变；url和文件不变，则会自动触发http缓存机制，返回304

CDN

SSR：服务器端渲染：将网页和数据一起加载，一起渲染；非SSR（前后端分离）：先加载网页，再加载数据，再渲染数据；比如早先的JSP ASP PHP和现在的vue React SSR。

懒加载

缓存DOM查询。尽早开始JS执行

防抖debounce：当监听一个输入框，文字变化后触发change事件，若直接用keyup事件，则会频繁触发change事件，所以需要用到防抖，防抖：用户输入结束或暂停时，才会触发change事件

//debounce函数封装
function debounce(fn,delay){
    //timer
    let timer = null

    return function(){
        if (timer){
            clearTimeout(timer)
        }
        timer=setTimeout(()=>{
            fn.apply(this,arguments) //用于保留参数，比如说event
            timer=null
        },delay)
    }
}

input.addEventListener('keyup',debounce(function(){
    console.log(input.value)
},600))

节流throttle：当拖拽一个元素时，要随时拿到该元素被拖拽的位置，若直接用drag事件，则会频繁触发，很容易导致卡顿。此时用到节流，节流就是无论拖拽速度多快，都会每隔100ms触发一次。

//throttle函数封装
function throttle(fn,delay = 100){
    //timer，默认时间为100ms，可在调用时更改使用其他时间
    let timer = null

    return function(){
        if (timer){
            return
        }
        timer=setTimeout(()=>{
            fn.apply(this,arguments) //用于保留参数，比如说event，arguments使能监听到事件对象
            timer=null
        },delay)
    }
}

div.addEventListener('drag',throttle(function(e){
    console.log(e.offsetX,e.offsetY)
},200))

安全

XSS跨站请求攻击

XSRF跨站请求伪造。XSRF预防：使用POST接口；增加验证，例如密码、短信验证码、指纹等