前端小细节

1.npm换源

如果以后有的情况必须用默认源，可以切回来

npm config set registry https://registry.npmmirror.com/
npm config set registry https://registry.npmjs.org/

检查npm源 

npm config get registry

2./

/根目录

./当前目录

../ 父级目录

cd ..

cd ..

回到上级 

3.样式定义

方法一：行内，style属性

<img src="/images/mountain.jpg" alt="" style="width: 300px; height: 200px;">

方法二：定义在style标签中

方法三：link引入

4.react，创建

create-react-app -V
create-react-app react-app  
cd react-app
npm start

5.vue图形化

vue ui

6.块级元素（div等）默认自带换行，行内元素（span等）默认不带换行

7.js使用方式

在script标签内写js代码

<script type="module"></script>

引入文件

<script type="module" src="/static/js/index.js"></script>

import引入到当前作用域

8.element的el-table-column的prop

只能传字符串，boolean或者对象需要转成字符串

9.属性定义

js中，定义对象中属性时，冒号定义，逗号分隔

css中，定义属性时，冒号定义，分号分隔

10.element组件的v-show可能不生效

因为element的display，可能会覆盖v-show的display：none。

解决方法1：放在这个element组件的外层。

解决方法2：用v-if。

11.v-html的pre标签，导致内容不变，过长从而超出长度

可以考虑换成p标签之类的

result = result.replaceAll('<pre', '<p');
result = result.replaceAll('</pre>', '</p>');

12.overflow:auto;可以让超出的变为滚动

13.css透明度，opacity会影响，子元素透明度，可以转换为rgba()的第四个参数

14.图片太大，可以用tinypng压缩(https://tinypng.com)

15.dvh代替vh，解决底部栏造成的问题

16.vite与webpack相比，开箱即用，可能少量配置，相当于webpack的很多配置。

17.css选择器性能

css选择器是从右往左，查看匹配。

在源码中，CSSSelectorList这个链表本身，初始化时候就是从右往左的。

https://github.com/chromium/chromium/blob/main/third_party/blink/renderer/core/css/css_selector_list.h

性能方面，一般class(类)比attribute(属性)选择器性能好。

因为class只找class，而attribute进行的是通用规则的处理，会有更多逻辑。

18.js闭包，在单例模式(一个类，只有一个实例)中，适合用来做全局状态管理，比如vuex/pinia/redux。

19.vue的v-html，eval()，可能引起xss攻击。

20.word-wrap相当于overflow-wrap的别称。

21.div根据文字自动变高度（word-break，字体超出换行，默认中文日文宽度不够自动换行，英文数字不可以）

22.埋点在网页关闭时，unload或者beforeunload，可能页面已经卸载，发送失败。强行耗时，用户体验不好。
sendBeacon不影响页面卸载/新页面载入。

23.获取浏览器宽高

console.log(window.innerWidth,window.innerHeight);
console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);
console.log(document.body.clientWidth,document.body.clientHeight);

24.jpg比png体积小，但是jpg不支持透明

25.img下面有白边，可以设置vertical-align: middle解决

26.v-if如果没有元素，可能ref通信不到，可以换成v-show