浏览器
beichen3997
每一天都是一个进步
展开
-
前端如何解决pc端屏幕显示设置缩放比例对页面布局的影响?
现在很多笔记本电脑都推荐将缩放设置为125%,等比例放大显示。(垃圾Windows这对我们前端的页面的布局会产生一些影响 首先,单独的响应式布局hold不住这个问题,因为出问题的是device-pixel-ratio。 问题现象是高分屏下整好的东西,在普分屏下会放大;而普分屏下整好的东西,在高分屏上会缩小。 重现这个问题不需要高分屏,直接用Ctrl++或者Ctrl+-出来的效果是跟高分屏一致的(所以搞定这个问题之后,也可以同时预防用户误触网页缩放)。另外恢复是Ctrl+Num0原创 2021-04-08 13:44:14 · 6589 阅读 · 3 评论 -
前端面试问题及答案总结(三)
GET和POST的区别,何时使用POST?<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"> GET:一般用于信息获...原创 2019-11-05 13:01:45 · 212 阅读 · 0 评论 -
前端面试问题及答案总结(二)
如何实现浏览器内多个标签页之间的通信?<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">调用localstorge、coo...原创 2019-11-05 12:52:26 · 433 阅读 · 0 评论 -
前端面试问题及答案总结(一)
<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、h...原创 2019-11-05 11:45:20 · 193 阅读 · 0 评论 -
vue-cli项目优化,缩短首屏加载时间
最近实习的项目需求上要求不多,就学了下项目优化,主要是首屏加载太慢。大文件定位我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小,然后有目的的解决过大的js文件。安装npm install --save-dev webpack-bundle-analyzer在webpack中设置如下,然后npm run dev 的时候默认会在8...转载 2019-04-24 10:15:58 · 397 阅读 · 0 评论 -
浏览器的加载、解析、和渲染--总结
浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括PDF、image及其他格式。用户用URI(Uniform Resource Identifier统一资源标识符)来指定所请求资源的位置,通过DNS查询,将网址转换为ip地址。一.浏览器的主要组件包括v用户界面:包括地址栏、后退/前进按钮、书签目录等,也就...转载 2019-04-24 10:04:42 · 580 阅读 · 0 评论 -
提高浏览器加载速度的几种优化方式
要想知道怎么优化,首先要知道则浏览器的主要组件有哪些,其次要知道浏览器的加载原理具体请去查看我的浏览器分类现在主要讲解一些优化的方法一.图片的优化1.图片的压缩,使用png2.使用图片的预加载3.多个小图片的引用可以合并成一个大图片,精灵图的使用4.src不为空5.减少对图片宽高的自定义二.css的优化1.css进行合并处理,减少多个请求2.尽量使用li...原创 2019-04-28 11:59:44 · 3965 阅读 · 0 评论 -
Web前端性能优化——如何提高页面加载速度
前言:在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页。也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导...转载 2019-04-24 10:06:31 · 317 阅读 · 0 评论 -
首屏加载速度优化
1、JavaScript外联文件引用放在html文档底部;CSS外联文件引用在html文档头部,位于head内;2、http静态资源尽量用多个子域名;3、服务器端提供html文档和http静态资源时,尽量开启gzip压缩;4、在js,css,image等资源响应的httpheaders里,设置expires,last-modified;5、尽量减少HTTP Requests的数量;...转载 2019-04-24 10:06:52 · 448 阅读 · 0 评论 -
浏览器页面渲染流程
浏览器页面渲染流程浏览器从HTTP服务器获取html文档,到呈现页面给用户,会经过以下几个步骤:1、解析文档构建DOM树浏览器的解析内容可以分为三个部分:HTML/XHTML/SVG:解析这三种文件后,会生成DOM树(DOM Tree)CSS:解析样式表,生成CSS规则树(CSS Rule Tree)JavaScript:解析脚本,通过DOM API和CSSOM API操作D...转载 2019-04-23 14:00:56 · 298 阅读 · 0 评论 -
浏览器如何渲染页面
构建对象模型浏览器渲染页面前需要先构建 DOM 和 CSSOM 树。因此,我们需要确保尽快将 HTML 和 CSS 都提供给浏览器。字节 → 字符 → 标记 → 节点 → 对象模型。 HTML 标记转换成文档对象模型 (DOM);CSS 标记转换成 CSS 对象模型 (CSSOM)。DOM 和 CSSOM 是独立的数据结构。 Chrome DevTools Timeline可以捕获和检...转载 2019-04-23 11:54:31 · 253 阅读 · 0 评论 -
浏览器页面渲染流程
浏览器页面渲染流程浏览器从HTTP服务器获取html文档,到呈现页面给用户,会经过以下几个步骤:1、解析文档构建DOM树浏览器的解析内容可以分为三个部分:HTML/XHTML/SVG:解析这三种文件后,会生成DOM树(DOM Tree)CSS:解析样式表,生成CSS规则树(CSS Rule Tree)JavaScript:解析脚本,通过DOM API和CSSOM API操作DOM ...转载 2019-04-23 11:50:51 · 149 阅读 · 0 评论