- px、rpx、em、rem、vw、vh
- px：px就是 pixel的缩写，意味像素。px就是一张图片最小的一个点，一张位图就是无数个这样的点构成的，是web开发中最常用的像素单位。
- rpx：由微信小程序官方推出的新单位，适用于移动端的 uni-app或者微信小程序的开发。可以根据屏幕宽度进行自适应，1rpx实际上等于相对于屏幕宽度的1物理像素。在设计时可以将1px约等于2rpx。
- em：相对单位，参照物是父元素的 font-size字体大小，具有继承的特点。如果自身定义了 font-size属性那么就会按照自身来计算，都没有设置的话，就会按照当前所有浏览器或者设备的默认文字大小来计算调整。一般来说浏览器的默认字体大小为16px，一个完整的页面内，可能每个模块的 em默认值都不想同。
- rem：css3中推出的新单位。相对于根元素（html）设置的 font-size属性进行调整，而不会像 em那样依赖于父元素的字体大小而造成页面文字大小不相同的混乱局面。
- vw：同样是css3中推出的新单位，是 viewpoint width的缩写，意为视窗宽度。视窗宽度1vw等于是窗宽度的1%。也就是说，如果当前开发浏览器或者设备的宽度为1280px，那么1vw就等于12.8px。在开发设计的过程中，100vw才能真正占据当前屏幕宽度的100%。
- vh：和vw同理，是css3中推出的新单位，是 viewpoint height的缩写，意为视窗高度。视窗高度1vh等于是窗高度的1%。计算及使用都与vw相同，这里就不在赘述了。
- The large viewport units（大视口单位）：lvw,lvh, lvi, lvb, lvmin, and lvmax
- The small viewport units（小视口单位）：svw, svh, svi, svb, svmin, and svmax
- The dynamic viewport units（动态视口单位）：dvw, dvh, dvi, dvb, dvmin, and dvmax
- 前端常见图片格式（WebP在浏览器中兼容性更好）
- JPEG（Joint Photographic Experts Group）JPEG 是一种广泛应用于摄影和图像领域的有损压缩格式。它适用于彩色照片和图像，能够在保持相对较高的图像质量的同时，实现较小的文件大小。JPEG 格式特别适合需要高分辨率图片的情景，例如展示产品或照片。
- PNG（Portable Network Graphics）PNG 是一种无损压缩格式，适用于图像中包含透明度通道的情况。它支持更高的图像质量和更精确的透明度处理，适用于图标、标志和带有透明背景的图像。但需要注意的是，PNG 图片通常会比 JPEG 图片更大。
- GIF（Graphics Interchange Format）GIF 是一种支持动画和透明度的格式，适用于简单的动画图像，如表情包、小动画等。然而，由于其有限的色彩表达能力，GIF 对于复杂的照片和图像并不适用。
- WebP 是由谷歌开发的一种现代图像格式，旨在提供更好的图像压缩效率和质量。它通常可以比 JPEG 和 PNG 图片实现更小的文件大小，同时保持较高的图像质量。WebP 格式适用于需要平衡图像质量和性能的情况，但需要注意的是，它并不被所有浏览器广泛支持。
- SVG（Scalable Vector Graphics）SVG 是一种基于 XML 的矢量图像格式，适用于需要无限缩放并保持清晰度的图像，如图标、矢量艺术和图表。由于 SVG 图像是基于数学公式描述的，因此其文件大小通常较小，并且可以适应不同的屏幕尺寸而不失真。
- html行元素和块元素
- html行内元素有：a、b、u、span、img、input、strong、select、sub、sup、label、em、button、textarea、tt、var、samp、br、cite、code、font、strike
- html块元素有：address、caption、dd、div、dl、dt、fieldset、form、h1、h2、h3、h4、h5、h6、hr、legend、fieldset、li、noframes、noscript、ol、ul、p、pre、table、tbody、td、tfoot、th、thead、tr
-
移动端最小触控区域44*44px、移动端点击响应延迟300ms
-
雪碧图优点
- 减少加载网页图片时对服务器的请求次数；
- 提高页面的加载速度
- 减少鼠标滑过的一些bug
- 解决网页设计师在图片命名上的困扰
- 方便更换风格
- http与https的区别
- https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
- http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
- http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
- http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
- 文件上传压缩优化
- 把file文件转成 canvas图片，然后canvas压缩图片利用canvas.toDataURL()将canvas绘制的图像转成图片从而达到压缩图片尺寸的效果
- 插件 js-image-compressor
- 打包优化
- 组件按需引入
- 减小三方依赖的体积
- Gzip压缩
- 剔除console+debugger
- CDN加速
- 剔除打包的map文件
- 路由懒加载