| H5 | 278 | 434 | – |
| 远程调试 | 不支持 | 支持 | Android4.4及以上支持 |
| 内存占用 | 小 | 大 | 相差20-30M |
| WebAudio | 不支持 | 支持 | Android 5.0及以上支持 |
| WebGL | 不支持 | 支持 | Android 5.0及以上支持 |
| WebRTC | 不支持 | 支持 | Android 5.0及以上支持 |
安卓第三方内核，主要是安卓的版本较多，对WebView二次封装产生的，这里主要说下X5内核。
他的速度是比较快的相比系统WebView的网页打开速度有30%的提升，在流量方面使用云端优化技术节省20%以上。安全问题可在24小时内修复。更稳定经过亿级用户的使用考研，CRASHE(崩溃)率低于0.15%。没有系统内核的碎片化问题，更小的兼容性问题，支持夜间模式，适屏排版，字体设置等浏览器增强功能。在H5和ES6上有更完整的支持，集成了强大的视频播放器，支持视频格式远多于系统的WebView，视频和文件的格式支持X5内核多于系统内核，自带防劫持。
一般webview选型，IOS建议使用WKWebView, 安卓建议使用X5。
WebView性能优化
当App首次打开时，默认是不初始化浏览器内核的，当创建WebView实例的时候，才会启动浏览器内核，打开事件需要70-700毫秒，并创建webview的基础框架。
可以使用全局的Webview对延迟的毫秒进行优化，就是在客户端启动的时候，就初始化一个全局的WebView待用，当用户访问Webview的时候直接使用这个WebView加载对应网页。
这样会减少首次打开WebView的时间，缺点是会有一些额外的内存消耗。
导航栏可以预加载，以前是在webview加载完成之后进行初始化，可以改为和webview并行一起加载。
对于登录来说H5页面上接口每次查询Cookie中是否有登录态，无登录态H5跳转统一登录页，App登录成功写入Cookie。可以改为Cookie统一在Webview中设置cookie。也就是初始化Webview的时候判断是否登录，如果登录了就打开H5页面，如果没登录就自动跳转登录页面。
webview加载页面的url尽量前置，不要放在最后，可以和业务逻辑并行处理，总而言之减少页面的白屏时间，让用户最快的看到页面。
提升滚动条的使用体验，原本是使用系统自带的滚动条的进度值，可以自己模拟滚动条的加载过程，让用户感觉页面加载变快了。也就是初始快速的加载到60%以上，给用户感觉加载很快的感觉。其实真实速度并没有变…
js-sdk优化，也就是oc和js通信的一个方式。一般jssdk有三种方式实现，第一种就是常见的scheme的方式，就是我们在h5页面里面定义一些特殊的链接，拿到这个scheme之后原生拦截。然后把需要的回调函数和参数进行拦截，但这样有个问题，url一般是256个字符，有长度的限制不能无限的传递。
第二种是iframe的形式，通过后台启一个页面进行拦截取iframe的变更拿到js的方法给oc实现通信，iframe是依赖jssdk.js文件的，需要sdk文件作为桥梁实现通信目的。
第三种是webkit的方式，他是一种直接调用的方式，无需依赖任何的sdk文件。
浏览器缓存策略
| 缓存机制 | 优势 | 适用场景 | Android 开关 | IOS开关 |
| — | — | — | — | — |
| 浏览器缓存机制 | HTTP协议层支持 | 静态文件的缓存 | 浏览器负责 | 浏览器负责 |
| Web Storage | 较大的存储空间，使用简单 | 临时，简单数据的缓存，浏览器上的LocalStorage、SessionStorage | webSettings.setDomStorageEnabled(true) | 默认开启无关闭 |
| Web SQL Database | 存储，管理复杂结构数据 | 建议用IndexDB 替代 | webSettings.setDatabaseEnabled(true) | 默认开启无关闭 |
| Application Cache | 方便构建离线App | 离线App,静态文件缓存 | webSettings.setAppCacheEnabled(true) | 默认开启无关闭 |
| IndexDB | 存储任何类型数据，使用简单，支持索引 | 结构，关系复杂的数据存储 | webSettings.setJavaScriptEnabled(true) | 默认开启无关闭 |
H5离线化的实现方式
全局离线包，包含公共的资源，可供多个应用共同使用。
还可以有私有化的离线包，只可以被某个应用单独使用。
离线包的工作原理:
首先会加载一个全局的包就是一些基础的文件，加载之后会把包释放放在内存里，接着会做一个检测，查看本地是否安装，如果已经安装就释放到内存，如果没有安装就触发离线包的下载，就是我们做好的包放在服务器中，然后从服务器获取过来，在下载之前会进行一个本地和线上版本的对比，版本不一致的话就会下载最新的包，如果一致就取本地的就可以了。
最终这个包会解压释放在内存里面，当webview在加载url的时候会直接从内存里面读取，如果能读取到就加载内存中的页面数据进行展示，假设读取不到也就是说本地没有这个业务就会使用线上的url地址让页面加载就可以了。因为我们一般不会把所有的业务都做成离线化的形式，假设webview查询的到就用离线化，查询不到就用垫底的线上url展示。无论本地离线包加载失败还是没有这个离线包，都使用线上url来垫底。
离线包的下载一包情况下如果用户处于移动网络状态下，不会在后台下载离线包，如果当前用户点击app，离线包没有下载好，用户就要等待离线包下载好才能用。可以采取wifi静默下载的方案。
从服务器请求的离线包信息存储到本地数据库的过程中，离线包信息包括离线包的下载地址，离线包版本号，加密签名信息等，安装离线包其实就是将离线包从下载目录拷贝到手机安装目录。
一些大厂的离线包方案比如美团的LsLoader通用移动端WebApp离线化方案，腾讯的Alloykit手Q离线包，阿里的极致Hybrid航旅离线包再加速。原理基本上都是一致的，细节上可以做些参考。
混合开发介绍
1.RN React Native是基于React语法的, 希望实现的是一套代码可以在各个端使用。他的优势很明显，代码是可以共享的无论是IOS还是安卓还是H5,性能方面几乎也与Native相同。并且提供了非常流畅的动画，因为他在渲染之前代码就已经转换为了原生视图。
调试时无需每次代码变更都编译打包，可即时查看更小效果，极大提高了开发人力。
支持热更新，不需要每次发版都发布应用到商店，发版时间可以自由控制，安卓和ios同时发版。
img
一共分成四层实现，最下面是native的原生层也就是OC和Java，在这之上是UI渲染器，图片处理，网络通信，和一些工具库，再向上是C++: JSCore，Bridge也就是js的运行环境和js和native的桥接。最上面才是js层也就是js的一些组件。
RN的jsx文件通过JSBridge会针对不同平台打包成不同的格式，比如IOS的.m文件，安卓的.xml文件，以及H5的.html文件。
为什么会有RN其实是因为应用商店发版的问题，每一次发版都需要审核，可能审核不通过，而且安卓可能要发布多个商店，还有两端研发不同步的问题，也就是安卓和ios相同的业务需要开发两遍。
如果你公司的技术是React全家桶，那还是建议选用RN的。
小程序
小程序的愿景是触手可及，用户扫一扫或者搜索下就可以打开应用，不需要安装太多应用。
向程序相比App，开发门槛更低，优于H5接近Native的体验，可以使用相机，位置，网络，存储等丰富的原生能力。支持顶部下拉，搜索，扫码等入口，简单方便，用完即走，不需要像App那样下载，直接打开支持热更新。
img
小程序出现的行业背景，对于App大厂来说需要流量变现，比如微信，他是没办法变现的，所以可以使用小程序生态将第三方引入进来，形成了一个小型的应用市场。对于企业应用来说，移动流量枯竭，获客比较困难，可以降低获客成本和开发成本，业务上提供更多的试错机会。
平台类产品如果输出给商家端，相比多个app的方式，比较推荐使用小程序。
Flutter
号称编写一次可以部署到各个终端，web, android，ios，mac，linux，windows，fuchsia os。
底层使用Skia图形引擎，图形性能媲美原生应用，界面更像一个全屏应用程序或2D游戏，速度比较快，使用本机ARM二进制文件，做到提前编译，不需要JVM，也就是java虚拟机。
img
底层实现
img
flutter在2017年5月份出现，生态不够丰富，学习曲线相对较高，但是他的性能较好，如果考虑性能，团队人员足够的话建议选择fluttr。
CDN
CDN是内容分发网络，利用每一台最靠近用户的服务器，更快更可靠的将文件发送给用户。以加快访问速度。
CDN的有点很明显，因为会给用户指派较近，较顺畅的服务器节点，所以速度会比较快，服务器放在不同地点，减少了互联的流量，也降低了快带成本，当某个服务器故障时，自动调用临近地区的服务器。
回源是指浏览器访问CDN上静态文件时，文件缓存过期，直接穿透CDN而访问源站机器的行为。这是CDN的一个策略。
CDN的缓存分为三级，浏览器本地缓存也就是header头配置的缓存，CDN边缘节点缓存，CDN源站缓，一般是三级，也可能业务比较少就采用两级缓存，浏览器缓存和CDN源站缓存。
缓存时间设置过短的话，CDN边缘节点缓存经常失效，导致频繁回源，增大了源站负载，访问速度也会变慢，缓存时间设置的过长，文件更新慢，用户本地缓存不能及时更新，所以一般是结合业务情况而定。
一般不同资源类型缓存时间设置不用，html一般3分钟左右，js，css可以10分钟，一天，一个月，看变更情况。
现在一般我们文件的命名都会以hash串的形式，如果文件有变更生成的文件名就会有变更，否则还是之前的名字，这样我们缓存的时间就可以设置的长一些。
CDN可以灰度发布，也就是在部分地区部分运营商优先发布静态资源，验证通过后再进行全量发布。具体实施可以从域名方面下手，设置特殊VIP解析到要灰度的城市或者运行商。也可以调整源站机器，给灰度的城市或者运营商配置单独的源站机器。
一般在活动期间比如说大促，需要增加机房宽带，增加运营商流量，增大CDN缓存时间等等。
DNS
DNS是将网站域名和地址互相映射的一个分布式数据库，我们访问一个网站首先会通过DNS将域名匹配为ip地址，然后再通过ip地址去访问对应的服务器。
客户端里面有一个http dns, 客户端直接访问http的接口，可以获取业务在域名访问系统中配置的最优ip，基于容灾的考虑，app内是需要保留使用运营商DNS解析方式的，客户端再获取到ip后会直接向ip中发送业务请求。
比如一个http请求，在header中会指定host字段，向ip发送标准的http请求就可以了，总的来说采用http-dns来解析域名能绕过三四级运营商接续域名出现的一些问题，在http-dns返回的正确ip之后是直接使用ip去发送http请求的，只需要关注通信内容的安全就可以了。
安卓系统可以采用okhttp模块，他支持http2,http2可以在一个链接上一次性发送多个请求，支持gzip，也支持响应缓存避免网络重复请求，如果服务器配置了多个ip地址，当第一个ip链接失败的时候，okhttp会自动尝试下一个ip地址。
ios没有现成的模块，我们可以在app启动时，缓存所有可能要用到的域名ip比如接口，网关，同时异步处理，客户端无需得到缓存结果。如果cache中有此域名的圆环，直接返回缓存的ip，如果缓存中没有此域名，则重新向httpdns server进行申请然后缓存下来。
H5的做法一般是设置多个域名，因为浏览器对并发数是有限制的，一个域名一般最大连接数是6，所以我们可以将用户访问的一些api接口作为一个域名，页面中的样式和资源可以设置成一个域名，图片也可以单独设置成一个域名，甚至多个域名，来打破浏览器的这种限制。
http优化
http的优化主要就是减少请求数，这可能是我们日常工作中经常遇到的，也是大家耳熟能详的。
图片可以使用雪碧图，dataurl, webfont。
可以考虑将业务中的js或者css合并，不要切割的太小。如果不想合并成一个可以使用Combo的方式让服务去返回，可以在url上通过参数的形式告诉服务加载那些资源。
接口也可以合并，不要拆分的太细，可以让服务去合并，不经常变化的接口和资源也可以存储在LocalSrorage，有变化就更新，没有变化就从本地取。
有些时候我们的某个页面会出现问题，或者打开白屏，但是接口没有问题，页面也没有问题，资源也是可以访问通的，这个时候可能就是cookie太大了，已经超出了原本可控的范围，我们都知道cookie是会随着页面间的跳转携带的，这就肯能导致页面无法访问，这种问题不常见，但实际工作中确实会遇到。
可以在页面中设置cookie白名单，意思就是定期检查我们的cookie，如果是需要的就保留，不需要的就删除，定期整理。cookie控制可以减小页面间传输的大小，也可以对cookie进行有效的管理。
服务器缓存配置
当一个文件被浏览器加载的时候我们实际上是不知道这个文件是否是过期的，所以浏览器和服务器之间存在一种约定，通过header头的配置，确定文件是否过期。
一般在响应头中包含一个expires的头信息，他的值为日期+时间，表示在此时间之后，响应过期，如果数值为0，表示资源已经过期。
当然如果响应头中包含Cache-Control, 设置了max-age或者s-max-age指令，那么就会忽略expires，而取Cache-Control。
Cache-Control通过制定的指令来实现缓存机制，缓存指令是单向的，这意味着在请求中设置的指令不一定被包含在响应中。他的语法比较简单，Cache-Control: max-age=秒设置缓存存储的最大周期，超过这个时间缓存被认为过期。
ETag是资源版本的标识符，可以让缓存更搞笑，并节省带宽，因为如果内容没有改变，Web服务器不需要发送完整的响应，如果发生了改变，使用ETag有助于防止资源的同时更新相互覆盖。
ETag类似于指纹，也可能被某些服务器用于跟踪，比较ETag能快速确定资源是否变更，但也可能被跟踪服务器永久存留。
ETag: “5c6cccc123-1d45”
Last-Modified是一个响应收不，其中资源包含源头服务器认定的资源做出修改的日期和时间。他常被用作一个验证器来判断接收到的或者存储的资源是否一致。由于精度比ETag要低，所以这是一个备用机制，包含有if-Modified-Since或If-Unmodified-Since首部的条件请求会使用这个字段。
Date是通用的首部，其中包含了报文创建的日期和时间。
Gzip压缩
可以对文本进行压缩，一般是html，css，js，对于非文本不会压缩，比如说图片资源，压缩比率可以达到50%-70%
本地测试开启https
这个内容不应该写在这，但是实在不知道写在哪了。
https这里就不过多介绍了，毕竟不是这篇该有的内容。
浏览器目前基本上已经默认开启了https，所以为了SEO我们也建议使用https，而且https也更加安全。
如果是对外的网站我们需要和经销商购买ssl证书，可以在gogetssl，ssls.com,sslmate.com中去购买，当然这些证书是有时效的。
如果本地测试的话，也可以在本地安装一个测试证书，我们可以通过mkcert来实现。首先需要安装它。
brew install mkcert
安装根证书
mkcert —install
生成本地签名，给123.com
mkcert 123.com
这样就生成了一对证书，我们可以将这对证书配置在nginx里面，具体配置方法可参考我之前写的nginx文章。
http2
http2是http的第二版，简称h2或h2c，它采用二进制传输数据，多路复用，允许通过一个链接发起多个请求，所以一般使用h2雪碧图就没什么用了，他超出了浏览器限制最大连接数的局限，对header头进行压缩从而降低传输体积，支持服务端推送(server push)，可以从服务端将数据推送给客户端。
开启HTTP2可以降低服务器压力，提升网站访问速度，而且可以更好的保护网站安全因为他是强制使用https的。
开启http2其实也很简单，我们需要重新编译nginx，并且开启http_ssl_module和http_v2_module
cd nginx-xxx
./configure --with-http_ssl_module --with-http_v2_module
make && make install
同样这里可以参照之前我写的nginx文章，其实就是在listen 443端口后添加http2标识。
server {
listen 443 ssl http2;
}
前端的研发流程
首先是技术选型，包括页面渲染技术和混合式开发技术，然后是项目的初始化，包括React，Vue，Angular，依赖模块引入，一般会存在一个私有的NPM，接着开始本地开发，方便前端调试和看到效果，项目联调，产品和设计师对效果进行确认，最后项目整体部署上线。
项目开始之前前后端会指定一些数据接口，有了接口文档前后端就可以并行开发，前端开发页面和交互，后端开发业务逻辑。都开发完后前后端开始进行联调，最后发布上线。
自动化测试
UI自动化，上手比较简单，不过稳定性较差，常用的工具有appium，他是一个开源的工具用于自动化ios手机，安卓手机还有windows桌面的一个测试工具，robot framework 是基于python可扩展的关键字测试框架用于端到端，验收测试以及测试驱动开发，可用于测试分布式异构应用程序包括可以验证涉及多种技术的接口，selenium用于web应用程序测试工具可以直接运行在浏览器上，可以和用户的真正操作是一样的，支持ie, 火狐，谷歌，欧朋等常用浏览器，主要用来测试浏览器的兼容性。airtest支持自动化的脚本录制一键回收，轻而易举就能实现自动化测试流程，还是比较常用的。
接口自动化，使用稳定，性价比非常高，工具有java + restassured，是java实现的，轻量级的可以通过编写代码向客户端发送请求并且验证返回结果。python + requests主要对pthon接口进行测试, JMeter用于对软件做压力测试，HttpRunner只需要一份脚本就可以实现自动化测试性能测试，线上监控，持续集成等多种测试的需求。
单元测试，性价比极高，一般由开发完成，但是有一些单元测试框架，Junit5，pytest, unittest。
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
总结
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。
万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。
前端面试题汇总
JavaScript
前端资料汇总
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。
万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。
前端面试题汇总
JavaScript
前端资料汇总
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-Onswl8iA-1712584422631)]
669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
