问题1:前端性能优化
优化图
511.png1.1. http请求优化
优化手段1:合并请求
合并请求的主要目的是减少浏览器对服务器发起的请求数,从而减少在发起请求过程中花费的时间。
优化手段2:域名拆分
域名拆分主要是为了增加浏览器下载的并行度,让浏览器能同时发起更多的请求
域名拆分为3到5个比较合适,过多的域名会带来DNS解析时间的损耗,可能会降低性能
优化手段3:开启Gzip
Gzip是一种压缩技术,可以将资源在服务端进行压缩,然后发送给浏览器后再进行解压,这种方式会降低传输大小,提高网页加载性能。
化手段4:开启KeepAlive
开启KeepAlive能够减少浏览器与服务器建立连接的次数,从而节省建立连接时间。
优化手段5:MinifyMinify
指的是将JS和CSS等文本文件进行最小化处理,一般对于CSS来说就是去除空格去除换行去除注释等,对于JS,除了上述方法外,还可以进行变量名替换,将长变量名替换为短变量名。目前有很多用户做Minify的工具,例如uglifyjs等。
其他:
请求数量——合并脚本和样式表,CSS Sprites,拆分初始化负载,
划分主域
请求带宽——开启Gzip,精简JavaScript,移除重复脚本,
图像优化
缓存利用——使用CDN,使用外部JavaScript和CSS,添加Expires头,减少DNS查找,配置ETag,
使Ajax可缓存
页面结构——将样式表放在顶部,将脚本放在底部,尽早刷新文档的输出代码校验——避免CSS表达式,避免重定向
其他答案2
内容层面
- 使用CDN
- 单域名、多域名,单域名可以减少DNS查找次数,多域名可以增加浏览器并行下载数量,这需要权衡,一般同一个域下不要超过四个资源。
- 避免重定向(分场景)
- 避免404
网络层面
- 利用缓存,可以参考另一篇文章手写文件服务器,说说前后端交互
- 文件压缩(通过响应头Accept-Encoding: gzip, deflate, br告诉服务器你支持的压缩类型)
- 按需加载,提取公共代码,tree-shaking等(都可以通过webpack来实现)
- 减少cookie大小
- 文件合并,通过css雪碧图合并图片
- 文件预加载、图片懒加载
渲染层间
- js放底部,css放顶部
- 减少reflow(回流)和repaint(重绘)
- 减少dom节点
代码层面
- 缓存dom节点,减少节点查找,css选择器层级优化
- 减少dom节点操作
- 合理使用break、continue、return等,优化循环
- 像react用到的事件委托、对象池等手段
1.2 js性能优化
问题2:不通过脚手架配置项目
分支1:配置vue项目
分支2:配置react项目
补充1:阿里电面
1,js与其他语言的区别java等
2,tcp连接三次握手做了什么?
3,react和vue性能对比
4,算法复杂度与稳定性
补充2
1 http请求头和响应头有哪些东西?
2 Generator是什么?
3 symbol是什么?
网友评论