摘要:引擎执行完毕,控制权交还渲染引擎,恢复解析网页。对于内联脚本无作用即没有属性的脚本。协商缓存步骤总结请求资源时,把用户本地该资源的同时带到服务端,服务端和最新资源做对比。
资源压缩 减少HTTP请求 静态资源压缩
html:压缩空格、换行、注释等字符 Webapack — html-webpack-plugin
css:无效代码删除,语义合并(相同样式代码) Webpack css-loader
js:无效字符删除、剔除注释代码语义的缩减和优化 Webpack — UglifyJSPlugin
图片优化方案:
雪碧图
小文件 使用base64 webpack base64-inline-loader
图片压缩网站
svg
资源合并
弊端:
首屏渲染问题,合并文件太大,造成慢。
缓存失效问题 标记 md5戳 只要有一个变动 则失效 a,b,c三个js合并
规则:公共库合并,不同页面的各自合并。异步加载组件,不同页面多带带打包,监听路由变化,自动下载
实现:gulp插件梳理工作流/webpack配置loader和plugin
非核心代码异步加载正常网页的加载流程:
浏览器一边下载 HTML 网页,一边开始解析。也就是说,不等到下载完,就开始解析。
解析过程中,浏览器发现元素,就暂停解析,把网页渲染的控制权转交给 JavaScript 引擎。
如果元素引用了外部脚本,就下载该脚本再执行,否则就直接执行代码。
JavaScript 引擎执行完毕,控制权交还渲染引擎,恢复解析 HTML 网页。
上述加载方式为同步加载,会阻塞浏览器的解析html文档。故而我们常将script元素放置于body的底部
三种实现方式:动态脚本、async、defer
动态脚本动态创建script标签
var scriptEle = document.createElement("script"); scriptEle.type = "text/javasctipt"; scriptEle.async = true; scriptEle.src = "http://xxxxxxx"; var x = document.getElementsByTagName("head")[0]; x.insertBefore(scriptEle, x.firstChild);async
async属性和defer属性类似,也是会开启一个线程去下载js文件,但和defer不同的时,它会在下载完成后立刻执行,而不是会等到DOM加载完成之后再执行,所以还是有可能会造成阻塞。
且不会按照顺序执行,哪个js文件先下载完就先执行哪个
对于内联脚本无作用 (即没有src属性的脚本)。
defer当浏览器遇到带有defer属性的标签时,再开启一个线程去下载js文件,同时继续解析HTML文档,等等HTML全部解析完毕DOM加载完成之后,再按照出现顺序依次执行加载好的js文件。
对于内联脚本无作用 (即没有src属性的脚本)。
使用场景一般来说,是看脚本之间是否有依赖关系,有依赖的话应当要保证执行顺序,应当使用defer没有依赖的话使用async,同时使用的话defer失效。要注意的是两者都不应该使用document.write,这个导致整个页面被清除。
利用浏览器缓存https://juejin.im/post/5c4179...
优点:
减少了冗余的数据传输,节省网费
减少服务器的负担,提升网站性能
加快了客户端加载网页的速度
浏览器缓存分为强缓存和协商缓存
强缓存如果资源没过期,就取缓存,如果过期了,则请求服务器。
cache-control:max-age = xxx
声明该资源在加载后的xxx秒内都直接使用缓存 使用的是相对时间 即加载文件本机的时间
Cache-Control 的几个取值含义:
private:仅浏览器可以缓存
public:浏览器和代理服务器都可以缓存
max-age=xxx:过期时间
no-cache:不进行强缓存
no-store:不强缓存,也不协商缓存
规则可以同时多个 cache-control:public,max-age=0
expires: 绝对时间,服务器基于自己的时间返回一个文件过期时间
如果在Cache-Control响应头设置了 "max-age" 或者 "s-max-age" 指令,那么 Expires 头会被忽略。
强缓存步骤:
第一次请求 a.js ,缓存表中没该信息,直接请求后端服务器。
后端服务器返回了 a.js ,且 http response header 中 cache-control 为 max-age=xxxx,所以是强缓存规则,存入缓存表中。
第二次请求 a.js ,缓存表中是 max-age, 那么命中强缓存,然后判断是否过期,如果没过期,直接读缓存的a.js,如果过期了,则执行协商缓存的步骤了。
协商缓存触发条件:
Cache-Control 的值为 no-cache (不强缓存)
或者 max-age 过期了 (强缓存,但总有过期的时候)
也就是说,不管怎样,都可能最后要进行协商缓存(no-store除外)
ETag:每个文件有一个,改动文件了就变了,可以看似md5
Last-Modified:文件的修改时间
每次http返回来 responseheader 中的 ETag和 Last-Modified,在下次请求时在 requestheader 就把这两个带上(但是名字变了ETag-->If-None-Match,Last-Modified-->If-Modified-Since ),服务端把你带过来的标识,资源目前的标识,进行对比,然后判断资源是否更改了。
协商缓存步骤总结:
请求资源时,把用户本地该资源的 ETag 同时带到服务端,服务端和最新资源做对比。
如果资源没更改,返回304,浏览器读取本地缓存。
如果资源有更改,返回200,返回最新的资源。
DNS预解析预解析的实现:
用meta信息来告知浏览器, 当前页面要做DNS预解析:
在页面header中使用link标签来强制对DNS预解析:
注:dns-prefetch需慎用,多页面重复DNS预解析会增加重复DNS查询次数。
如果需要禁止隐式的 DNS Prefetch,可以使用以下的标签:
在浏览器中a标签默认打开DNS预解析,但是在HTTPS中默认关闭
CDN 内容分发网络网络请求的过程走最近的网络环境,解决网络拥堵。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/110055.html
摘要:前端是应用服务器处理之前的部分,前端主要包括等各种资源,针对不同的资源有不同的优化方式。常见方法合并多个文件和文件,利用整合图像,使用在实际的页面嵌入图像数据,合理设置缓存等。 web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式。 内容优化 (1)减少HTTP请求数:这条策略是最重要最有效...
摘要:代表公司去参加今年的第二届前端开发者年度大会,散会的时候,技术老大问我,今天感觉怎么样,有什么收获,当时就零零碎碎的回答了一些,不算完美趁着还记得点什么,在这里做个自我回顾总结,谨代表个人见解,有不当之处,或若涉及图片隐私或者其它问题,烦请 代表公司去参加今年的 第二届前端开发者年度大会,散会的时候,Team 技术老大问我,今天感觉怎么样,有什么收获,当时就零零碎碎的回答了一些,不算完...
摘要:后端和移动性能优化需要的时间较长,出成果较慢。大型网站上,一般通过什么方式监控性能的用户端主要是真机监测监测,都属于真实用户监测。目前主要有以下两种类型,,最终用户性能监测。,,真实用户性能监测。 showImg(https://segmentfault.com/img/bVAbWm);@tanwen110 (唐文),曾负责腾讯四大平台之一网络媒体平台的整体运维、运营规划工作;曾任百度...
摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...
阅读 1651·2021-10-13 09:39
阅读 2063·2021-09-07 10:20
阅读 2635·2019-08-30 15:56
阅读 2927·2019-08-30 15:56
阅读 912·2019-08-30 15:55
阅读 594·2019-08-30 15:46
阅读 3448·2019-08-30 15:44
阅读 2529·2019-08-30 11:15