前端面试总结14-开发环境与运行环境

1.git:最常用的代码版本管理工具

常用git命令：

git add .

git checkout xxx

git commit -m "xxx"

git push origin master

git pull origin master

git branch

git checkout -b xxx/git checkout xxx

git merge xxx

 

chrom调试工具：

Elements,NetWork,Console,Application,debugger

 

 

抓包：

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

windows一般用fiddler

MacOs一般用charles

需要将手机与电脑连接到一个局域网，将手机代理到电脑上，手机浏览网页即可抓包

 

运行环境：

页面加载过程

1）DNS解析：域名->IP地址

2）浏览器根据IP地址向服务器发起http请求

3）服务器处理http请求，并返回给浏览器

渲染过程：

1）根据html代码生产DomTree

2）根据Css代码生成CssOM

3）将DomTree 与 CssOM整合形成Render Tree

4）根据Render Tree渲染页面

5）遇到<script></script>停止渲染优先加载执行JS代码，完成再继续

6）直至RenderTree渲染完成

性能优化原则：

1）多使用内存，缓存或者其他办法

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

3）空间换时间

加载优化：

1）减少资源体积：压缩代码

2）减少访问次数：合并代码，SSR服务器端渲染，缓存

SSR：

（1：服务器端渲染：将网页和数据一起加载，一起渲染

（2：非SSR：先加载网页，然后加载数据，再渲染数据

（3：早先的JSP,ASP,PHP,现在的vue,React SSR

3）使用更快的网络，CDN

渲染优化：

1）CSS放在Head,JS放在body最下面

2）尽早开始执行JS，用DomContentLoaded触发

3）懒加载

4）对dom查询进行缓存

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

6）防抖与节流

防抖：

function deboundce(fn,delay=500){

let timer = null

return function(){

if(timer){

clearTimeout(timer);

}

timer= setTimeout(()=>{

fn.apply(this,arguments);

timer=null;

},delay)

}

}

节流：

function deboundce(fn,delay=500){

let timer = null

return function(){

if(timer){

return;

}

timer= setTimeout(()=>{

fn.apply(this,arguments);

timer=null;

},delay)

}

}

网络攻击：

Xss攻击：

通过往页面文本内容嵌入<script>脚本，获取cookie（服务器配合跨域）

Xss预防：

替换特殊字符，如<变为&lt;，>变为&gt;前端后端同时替换

 

 XSRF攻击：

通过电子邮件中正文内容隐藏的<img>标签隐藏的src进行信息盗取或商品代付

预防：

使用post接口

增加验证