web前端面试：不做面试“海王”，一份资料就可成功上岸！

近几年来前端行业发展迅速，需要学习的知识也越来越多，有些人套用了现在一个很火的词，叫前端行业“内卷”，怎么听起来前端是没有前途的，有些有志于做前端的同学就因此犹豫不决。但是事实真的如此吗？

web

怎样在前端优化网站性能？
减少了HTTP请求的数量。

当浏览器与服务器通讯时，通讯主要通过HTTP进行。在浏览器和服务器之间进行三次握手，每次握手都要花费很多时间。同时，不同浏览器对资源文件的并发请求数目(不同浏览器允许的)也是有限的，一旦HTTP请求数目达到一定数量，资源请求就会出现等待状态，这是致命的，因此减少HTTP请求数目可以在很大程度上优化网站性能。

CSSSprites

在国内，人们通常称之为CSS精灵，这是一个解决方案，通过将多个图片合并到一个图片中，从而达到减少HTTP请求的目的，可以通过CSS的background属性访问图片内容。该方案还可以同时减少图片的总字节数。

整合CSS和JS文件

目前有许多工程打包工具在前端，例如：grunt,gulp,webpack，等等。要减少HTTP请求的数量，在再次发布之前，可以通过这些工具将多个CSS或多个JS合并到一个文件中。

使用lazyLoad

所谓懒得加载，就是可以控制网页上的内容一开始不加载，不需要发送请求，等到用户操作真正需要时再加载出来。这将控制页面资源一次性的请求数。

控制资源档案载入优先顺序

当浏览器加载HTML内容时，HTML内容由上而下依次被解析，而当解析到link或script标签时，href或src的对应链接内容就会被加载，为了让页面在第一时间显示给用户，需要提前加载CSS，而不能被JS加载。

通常CSS位于顶部，JS位于底部。

使用浏览器缓存的好处。

BrowseCache是在本地存储网络资源，等待下一次请求时，如果该资源已经存在，则无需到服务器重新请求它，直接在本地读取。

减少重排(报告)

根本原因：重排是DOM的变化影响元素的几何属性(宽和高)，浏览器会重新计算元素的几何属性，使受影响的部分在渲染树中失效，浏览器会验证DOM树中所有其他节点的visibility属性，这就是Reflow效率低下的原因。若Reflow太频繁，那么CPU的使用将急剧增加。

减小Reflow，如果需要添加DOM操作时的样式，可以使用增加class属性来代替style操作样式。

减少DOM操作次数。

图标被IconFont所取代

前端面试资料免费领取