前端性能优化
文章平均质量分 70
赏花赏景赏时光
这个作者很懒,什么都没留下…
展开
-
浅析Web Worker及实践
web worker原创 2022-07-10 15:31:48 · 2081 阅读 · 1 评论 -
window.performance
window.performance定义:是前端性能监控API,可以检测页面中的性能,W3C性能小组引入进来的一个新的API作用:1)检测到白屏时间:从我们打开网站到有内容渲染出来的时间点2)首屏时间:首屏内容渲染完毕的时间节点3)用户可操作的时间节点:DOMReady触发节点4)页面总下载的时间:window.onload的触发节点5)DNS查询的时间6)TCP链接的时间等详细说明文档:https://mp.weixin.qq.com/s/60HI-CM1GhqDG5zeT转载 2021-03-21 10:40:14 · 2353 阅读 · 0 评论 -
dns-prefetch、serviceWorker、webworker、提高网页性能
1、dns-prefetch ---预解析,提高网页加载速度,使用方法如下,参考文档https://blog.csdn.net/qq_35432904/article/details/83988726<link rel="dns-prefetch" href="https://restapi.amap.com"/> <link rel="dns-prefetch" href="https://webapi.amap.com"/> <link rel="dns-pr原创 2020-11-29 15:13:31 · 342 阅读 · 0 评论 -
移动端性能优化的方法
移动网站加载速度缓慢的原因1、网站服务器网站服务器(比如软件),默认情况下运行缓慢,或者尚未针对加载速度最大化进行合适的配置2、虚拟主机解决方案移动网站被托管于一个相对缓慢的虚拟主机解决方案(或硬件)中,或者这个网站流量非常高,经常超出虚拟主机可以处理的流量水平。3、网站浏览器缓存移动网站尚未被配置使用网站浏览器缓存4、文件大小移动网站页面要求下载资源,并且这些资源...原创 2018-04-05 11:23:41 · 10708 阅读 · 0 评论 -
性能优化的点
性能优化的目的:无非是减少用户流量消耗,提升用户首屏体验,提升用户访问速度,让用户专注内容本身。优化的点可以从下面几点来讲,主要是对后台的优化比较多:1、减少网络请求数量:减少请求的文件数基本原理:在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手,每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限(不同浏览器允许并发数),一旦 HTTP 请...原创 2018-04-04 09:42:11 · 687 阅读 · 0 评论 -
在线压缩html/css/js文件成一行
在线压缩html/css/js文件成一行:压缩网站为:http://tool.oschina.net/jscompress/将源码压缩成一行,去掉文中的一些注释和空格以及空行,好处是:1、减小文件体积,节省带宽,提高相应速度2、压缩html对SEO(搜索引擎优化)会好点原创 2018-01-03 19:26:34 · 19523 阅读 · 1 评论 -
从web浏览器的渲染到性能优化
本文主要讲解web浏览器的渲染原理、流程到性能优化。主要有以下几点:(1) script标签中的属性defer和async的区别(2) 浏览器的渲染顺序(3) 如何防止阻塞DOM渲染(4) 如何保证首屏优化、关键渲染路径优化(5) 如何从浏览器渲染、网络请求、js引擎机制优化性能一: script标签中的属性defer和async的区别要想让script标签中的转载 2017-12-22 09:59:09 · 409 阅读 · 0 评论 -
图片的懒加载
有时候在一个界面上需要加载很多的图片,为了提升用户体验,使网页响应速度快,我们有时候会对图片进行相应的处理。处理方法分为:预加载和懒加载。一:懒加载1、懒加载定义:也就是延迟加载。当访问一个页面的时候,先把img的路径放在自定义的一个属性(例如:data-original)上保存,此时图片是还没有加载的,因为没有设置src属性,浏览器是不会发出请求去下载图片。如果事先知道图片的路径,可以直原创 2017-12-02 11:04:49 · 320 阅读 · 0 评论 -
前端性能优化
前端性能优化的方法:合并、压缩、缓存或者在服务器上开启gzip之类的,目的都是为了让页面加载的更快资源预拉取(prefetch)则是另一种性能优化的技术。通过预拉取可以告诉浏览器用户在未来可能用到哪些资源。1、DNS prefetch: DNS prefetching通过指定具体的URL来告知客户端未来会用到相关的资源,这样浏览器可以尽早的解析DNS。比如我们需要一个在www原创 2017-11-06 19:05:27 · 300 阅读 · 0 评论