Read more -->一个网站通常遇到的问题有:资源加载缓慢、首次渲染时等待不重要文件的下载、无样式内容的闪烁等等。为了避免这些问题,我们需要了解浏览器渲染一个典型网页的生命周期。
background.js中,当扩展(Extension)首次安装、升级,或chrome升级时,创建右键菜单。
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
"id": "addTimeTag",
"title": "添加时间标签",
"contexts": ["page"],
"documentUrlPatterns": ["*://*.bilibili.com/*"]
});
});
Read more -->
一个渲染引擎主要包括:HTML解析器,CSS解析器,javascript引擎,布局layout模块,绘图模块
浏览器通过网络模块来下载各式各样的资源,例如html文本;javascript代码;样式表;图片;音视频文件等。
网络部分本质上十分重要,因为它耗时长,而且需要安全访问互联网上的资源。
Read more -->如果将某个盒子设为伸缩盒(display: flex;),要注意子元素及其后代元素是否有white-space样式修饰,它会影响flex,使其失效,甚至使子元素溢出父元素。