如何启动前端提升 (如何启动前端vue项目)

本文目录导航：

• 如何启动前端提升
• 移动端前端开发与PC端比有哪些不同
• 低劣前端人都知道的 H5 移动端调试全攻略～

如何启动前端提升

1.缩小 HTTP 恳求....

2.经常使用 HTTP2

3.经常使用服务端渲染

4.静态资源经常使用 CDN

5.将 CSS 放在文件头部，JavaScript 文件放 ...

6.经常使用字体图标 iconfont 替代图片图标

7.善用缓存，不重复加载相反的资源

8.紧缩文件

9.图片提升

(1).图片提前加载

(2). 照应式图片

(3). 调整图片大小

(4). 降落图片品质

(5). 尽或许应用 CSS3 成果替代图片

(6). 经常使用 webp 格局的图片

10. 经过 webpack 按需加载代码，提取第三库代码，缩小 ES6 转为 ES5 的冗余代码

11. 缩小重绘重排

12. 经常使用事情委托

13. 留意程序的部分性

14. if-else 对比 switch

15. 查找表

16. 防止页面卡顿

17. 经常使用 requestAnimationFrame 来成功视觉变动

18. 经常使用 Web Workers

19. 经常使用位操作

20. 不要笼罩原生方法

21. 降落 CSS 选用器的复杂性

(1). 阅读器读取选用器，遵照的准则是从选用器的左边到左边读取。

(2). CSS 选用器优先级

22. 经常使用 flexbox 而不是较早的规划模型

23. 经常使用 transform 和 opacity 属性更改来成功动画

24. 正当经常使用规定，防止适度提升

性能提升关键分为两类：

移动端前端开发与PC端比有哪些不同

我来方便说说我意识到的移动端前端开发的一些个性吧。

相关于PC端，移动端大略有以下几点长处：第一，阅读器内核相对繁多，内核大部分都是webkit或许跟webkit有很大相关的blink，而且都是很“现代”的阅读器，对css3的允许的很不错，所以移动端开发可以相对随性的经常使用css3（当然不同的阅读器厂商允许水平还是不一样的）；第二，关于国际开发者来说，再也不用思考低版本ie的兼容疑问，这是一个如许大的摆脱。

移动端相关于PC端须要思考的疑问，第一，移动端设施屏幕尺寸冗杂。

只管移动端的阅读器内核相对繁多，然而屏幕尺寸从3.5-6寸不等，如何让用户在不同的设施尺寸下获取最好的经常使用体验，这是做移动开发首先要思考的疑问。

第二，移动端的retina屏幕适配。

移动设施有着愈加高的像素密度，所以不能经常使用PC的那一套图片（非retina的手机还是可以用的），而要针对retina提供愈加高像素的图片，这样在手机上看才不会含糊和产生锯齿。

所以就得依据用户的屏幕来尺寸和像素密度来加载不同的图片。

目前临时只想到这些。

低劣前端人都知道的 H5 移动端调试全攻略～

随着移动设施的极速崛起，H5开发已成为前端工程师必备技艺。

在移动开发畛域，调试技巧至关关键，它能在有形中处置Bug。

本文将依据iOS和Android系统，具体引见适宜移动端调试的多种打算，助你高效处置开发难题。

二、iOS设施调试1. Safari：iPhone调试首选，检查失误和修正样式随心所欲。

设置方法如下：成功设置后，经常使用Safari关上H5页面，经过阅读器开发选项启动调试。

2. iOS模拟器：无需真机，适宜调试Webview和H5频繁交互的性能页面。

下载Xcode，选用模拟器iphonex，编译后即可关上模拟器，启动调试。

三、抓包工具1. Charles：Mac OS系统首选抓包工具，可检查、管理网络恳求，剖析数据。

性能手机代理后，即可捕捉手机恳求。

2. Fiddler：Windows平台抓包工具，与Charles性能相似。

四、Spy-Debugger1. spy-debugger：移动端调试利器，方便的远程调试手机页面和抓包工具。

装置后，设置手机代理，启动调试。

2. Whistle：基于Node成功的跨平台Web调试代理工具，具备抓包、过滤等性能。

五、HTTPS证书装置1. Charles：依照揭示装置证书，在手机阅读器关上/ssl装相信赖证书。

2. spy-debugger：装置根证书，选用RootCA，扫描二维码依照揭示信赖证书。

六、真机调试1. Chrome Remote Devices：依赖Chrome启动远程调试，适宜安卓手机。

2. localhost转ip：真机调试，适宜远程调试静态页面。

七、调试工具1. vConsole：轻量、可拓展、针对手机网页的前端开发者调试面板。

八、场景剖析依据不同场景选用最佳调试打算，如Safari、iOS模拟器、Charles、Spy-Debugger等。

九、白屏处置剖析白屏疑问，可采取代码注释法、类库意外、try catch、Debug包、ES6语法兼容等方法。