手写节流throttle

拖拽一个元素时，要随时拿到该元素被拖拽带的位置

直接用drag事件，则会频繁触发，很容易导致卡顿

节流：无论拖拽速度多快，都会每100ms触发一次

const div1 = document.getElementById('div1');
let timer = null
div1.addEventListener('drag',function(e){
    if(timer){
        return
    }
    timer =setTimeout(()=>{
        console.log(e.offsetX,e.offsetY)
        timer=null
    },100)
})

节流

    function throttle(fn,delay=100){
    let timer = null;

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

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

Debounce

监听一个输入框，文字变化后触发change事件

直接用keyup事件，则会频繁触发change事件

防抖：用户输入结束或者暂停时，才会触发change事件

Contact form7 attached file

Useful link as below：
https://whatsabyte.com/P1/byteconverter.htm

First, set up in the Form. Use class style to set the form as below:

Pay attention to the file, use whatsabyte to caculate the size, the maximum attached file of contact7 is 25M,so please set the size of each attached file carefully.

Frontend Optimization

综合性问题，要求思路思考尽量全面

某些细节问题可能会单独提问：手写防抖，节流

性能优化原则

多使用内存，缓存或者其他方法

减少CPU计算量，减少网络加载耗时

适用所有编程的性能优化，用空间换时间

从何入手

1.让加载更快
2.让渲染更快

减少资源体积，压缩代码 比如webpack
减少访问次数：合并代码 SSR服务端渲染，缓存，比如雪碧图
使用更快的网络：CDN

让渲染更快：CSS放head，JS放在body最下面

尽早开始执行JS,用DOMComtentLoaded触发

懒加载(图片懒加载，什么时候用什么时候加载，上滑加载更多)

对DOM查询进行缓存

频繁DOM操作，合并到一起插入DOM结构

节流throttle 防抖 debounce

资源合并实例

<script scr="a.js"></script>
<script scr="b.js"></script>
<script scr="c.js"></script>

<script scr="abc.js"></script>

缓存

module:{
    rules:[
        {
            test:/\.js$/,
            loader:['babel-loader'];
            include:path.join(__dirname,'src'),
            exclude:/node_modues/

        }
    ]
}

静态资源加hash后缀，根据文件内容计算hash，
文件变hash变，文件不变hash不变则url不变
url和文件不变，则会自动触发http缓存机制，返回304
所以，老的文件可以直接命中304，而新的文件才会自动下载

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

懒加载

<img id="img1" src="preview.png" data-realsrc="abc.png">
<script type="text/javascript">
    var img1= document.getElementById('img1')
    img1.src =img1.getAttribute('data-realsrc')

</script>

缓存DOM查询

//不缓存DOM查询结果
for(let i= 0; i<document.getElementByTagName('p').length;i++){
    //每次循环，都会计算length，频繁进行DOM查询
}
//缓存DOM查询结果
const pList =document.getElementByTagName('p')
const length = pList.length
for(let i =0;i<lenght;i++){
    //缓存length，只进行一次DOM查询
}

尽早开始JS执行

Please upload your Passport(required)
[file* passport limit:1048576 filetypes:rar|pdf|zip|doc|docx|xsl]

Please upload your Payslip(required)
[file* Payslip limit:1048576 filetypes:rar|pdf|zip|doc|docx|xsl]

Please upload your Bank statement(required)
[file* bank limit:1048576 filetypes:rar|pdf|zip|doc|docx|xsl]

Webpage render

题目

1. 从输入url到渲染出页面的整个过程
2. window.onload 和DOMContentLoaded的区别
3. 加载资源的形式
4. 加载资源的过程
5. 渲染页面的过程

Frontend Linux

线上机器一般都是linux
测试机也需要保持一致，和线上机器一致
测试机或者线上机出了问题，本地又不能复现，需要去排查、

ls 查看文件夹

ll 看列表

clear 清屏

mkdir 创建文件夹

rm -rf abc 删除abc文件夹

cd dist

ll

webpack babel

ES6模块化，浏览器暂不支持

ES6语法，浏览器不完全支持

压缩代码 整合代码 以让网页加载更快

node-v
//查看node版本

npm init -y

npm install webpack webpack-cli -D
借助淘宝镜像

建一个配置文件 webpack.config.js
const path = require(‘path’)
module.exports ={

    mode:'development' // production
    entry:path.join(__dirname,'src',‘index.js)//__dirname当前目录 src/index.js是整个文件的入口
    output:{
        filename:'bundle.js'
        path:path.join(__dirname,'dist')//目录，dist是文件夹
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:path.join(__dirname,'src',‘index.js)//找到以后的index.html
            filename:'index.html'//产出的index.html

        })
    ]，
    devServer:{
        port:3000,//定义端口
        contentBase:path.join(__dirname,'dist')//当前目录，devSever是启动本地服务
    }
}

packet capture

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

windows一般用fiddler

MacOS 用Charles

手机和电脑必须连同一个局域网

将手机代理到电脑上

手机浏览网页，即可抓包

查看网络请求

网址代理

https

Chrome debug

Elements:evnent listeners

console

Application: local storage, sessionstorage,cookies

network: 刷新页面，加载资源，可以选择all，可以选择img，可以选择media

debugger（sources）：在代码中写debugger是断点，

develop tool

git

调试工具

抓包

webpack babel

linux常用命令，如何连上测试机

git：最常用的代码版本管理工具：大型项目需要多人协作开发，必须使用git
MacOS自带git，window下载

git常用服务端 github，coding.net

大公司会搭建自己的内网git服务