web前端面试题总结笔记——开发环境

关于开发环境

IDE

• webstorm：大牛 逼格 大咖

• sublime：普通 低调

• vscode：文艺小清新

• atom：文艺小清新

  插件插件插件快捷键快捷键快捷键！！！

Git

网络Git服务器如 coding.net github.com

Git基本操作必须很熟练

 

常用Git命令

• git add

• git checkout

• git commit -m "xxx"

• git push orgin master

• git pull orgin master

• git branch

• git checkout -b xxx/git checkout xxx

• git merge xxx

模块化

• 不使用模块化

• 使用模块化

• amd

• commonjs

 

运行环境

浏览器通过访问链接得到页面的内容

通过绘制和渲染，显示出页面的最终样子

页面加载过程

从输入url到html的详细过程

加载资源的形式

输入url加载html

www.demo.com

加载html中的静态资源

<script src="url"></script>

加载一个资源的过程

浏览器根据dns服务器得到域名的ip地址

向这个ip的机器发送http请求

服务器收到、处理并返回http请求

浏览器得到返回内容

浏览器渲染页面的过程

根据HTML结构生成DOM tree

根据CSS生成CSSOM

将DOM和CSSOM整合成RenderTree

根据RenderTree开始渲染和展示

遇到<script>会阻塞渲染

window.onload和DOMContentLoaded

window.addEventListener('load',function(){
    //页面加载完所有资源才会执行包括视频和图片等
})
window.addEventListener('DOMContentLoaded',function(){
    //DOM渲染完可执行  此时图片视频等可能没有加载完
})

 

性能优化

原则：1、多使用内存、缓存或者其他方法

2、减少cpu计算，减少网络请求，减少I/O，减少硬盘读写

从加载页面和静态资源和页面渲染中入手

1、静态资源的合并压缩（例如：将三个JS文件合并成一个，在用工具使代码压缩）

2、静态资源缓存

3、使用cdn让资源加载更快

4、使用SSR后端渲染，数据直接输出到html中

渲染优化

1、CSS放前面，JS放后面

2、懒加载

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

3、减少dom查询

var i
for (i=0;i<document.getElementById('p').lenth;i++)
{
    
}
/*********************************/
var pList=document.getElementById('p')
var i 
for(i=0;i<pList.lenth;i++)
{
    
}

4、减少dom操作

var listNode=document.getElementById('list')
​
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);

5、事件节流

6、尽早使用DOMContentLoaded

安全性

XSS跨站请求攻击

XSRF跨站请求伪造