页面无法正常显示、卡顿、加载缓慢会严重影响客户的体验,因此很多前端人员在进行项目设计时都需要考虑优化网页。今天就给大家分享一下当Web端页面出现加载缓慢、卡顿时你能采取的解决方法。
1、dangwebview加载有很多图片的网页时会很慢
你可以用webview的setBlockNetworkImage方法,在开始加载的时候使用
webview.getSettings().setBlockNetworkImage(true);
在onPageFinished方法中使用
v4_webview.getSettings().setBlockNetworkImage(false);
页面goback()的的时候会调用onPageStarted方法,因此此方法中也需要添加
view.getSettings().setBlockNetworkImage(true);
![f0f75e53b65e4c50209f5dd571323081.png](https://i-blog.csdnimg.cn/blog_migrate/ff6a209598c4e9177967a2414d73d630.jpeg)
图片加载中
2、nginx加载显示图片慢
出现这个问题时,你要考虑你的文件是否超过该参数设置的大小。当你的文件超过该参数设置的大小时,nginx会先将文件写入临时目录(缺省为nginx安装目下/proxy_temp目录),或直接更改proxy_temp_file_write_size的值。
缺省nginx是以nobody身份启动的,用ls -al 命令查看proxy_temp目录,nobody是proxy_temp目录的所有者,如果nobody竞然没权限,那就会出现加载慢的问题。你可以设置任何人都可以写 proxy_temp目录,重启 nginx 即可解决。
3、图片过大加载慢解决方法汇总
1)判断用户的设备(主要用在移动端)、网络等,分别加载不同质量的图片(例如高端 iPhone wifi 情况下,就可以加载双倍高清图等,蜂窝网络下面,就加载个单倍或者有损压缩过的)。或者先加载低质量的图片,让浏览者可以看到,然后再在后台加载更高清的,等加载完了,浏览者还在观看,就插入替换掉。或者先加载低质量小图片列表,然后让用户点击,触发类似 fancybox 的效果,弹窗出现大图片。或者利用资源预加载(三个 HTML5 不常见特性简介)当用户还没打开的时候,就开始加载。还有好多思路,后面想到再补充。
2)压缩,预加载,缓存,图床。
3)使用缓存、使用CDN加速、使用jq延迟加载图片、加大服务器宽带、检查服务器硬盘读取速度。
4)要尽可能的压缩,看用户的忍受程度。jpg 可以用很多方法压缩,png 推荐使用 工具(不过正文图片,显然要选择 jpg 格式的)。