美文网首页
一些前端优化技巧

一些前端优化技巧

作者: 一只好奇的茂 | 来源:发表于2017-06-01 17:27 被阅读53次

解决页面在Android下滑动正常,在Iphone下滑动卡的问题
在css中加入如下代码即可:

body{
        -webkit-overflow-scrolling : touch;
}

取消div,a等标签点击效果
当标签被设置onclick事件之后,在有些手机浏览器中,点击这些标签,会有点击变色效果。想要取消点击变色效果。
添加:

div{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
 }

ul的左右边有40px的距离
将ul的margin和padiding设置为0;
由于不同浏览器之间有不同的默认样式,这样就导致了:“明明我没有设置margin padding,但是元素之间却存在间距等状况”。解决这种情况的方法就是在开始写css之前将所有元素的padding margin默认样式统一起来。在css文档中添加如下样式即可:

*{
padding:0;
margin:0;}

去掉ul,li的左边顺序黑点

ul,li {
    list-style: none;
}

使用webpack合并请求
webpack可以将css文件合并到js文件中,将所有js文件合并到一个js文件中,在html中只需加载这一个js文件,即可完成页面的渲染,大大减少了浏览器的http请求数,优化了体验。当然,webpack还可以压缩资源文件、对资源文件进行md5取值以确保更新缓存,这些也都是可以优化体验的。

使用vue、reactJs
vue减少了操作dom的次数、reactJs虚拟了dom操作,也减少了dom的操作次数,提高了性能,使用起来更加流畅自然。

前后端分离

  • 前后端分离可大大提高分工合作的效率。
  • 前后端合作的三种方案:
  1. 后端渲染数据到前端html;
  2. 采用json接口来分离数据和后端,前端通过接口从服务器获取json数据,然后渲染到前端页面;
  3. nodeJs从Java后台取到数据 ---> nodeJs渲染数据到模板html ---> 浏览器请求到被数据渲染好的html;

相关文章

  • 一些前端优化技巧

    解决页面在Android下滑动正常,在Iphone下滑动卡的问题在css中加入如下代码即可: 取消div,a等标签...

  • 网站性能提升----脚本的加载执行

    谈到网站优化这块,不管是前端后端都有许多各自的优化技巧,这个系列针对的是前端部分的优化; 标题是JavaScrip...

  • 前端优化技巧

    (一)减少http请求次数或者减少请求内容的大小 每发送一次http请求,都需要完成请求+响应这个完整的http事...

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 从开始慢慢总结优化

    我们在面试中前端优化是经常被问到的,所以我们应该从开始学习的时候就总结一些前端的优化方法:什么是前端优化呢?我们前...

  • 前端优化中的DOM优化

    我们在面试中前端优化是经常被问到的,所以我们应该从开始学习的时候就总结一些前端的优化方法:什么是前端优化呢?我们前...

  • 前端SEO优化技巧

    一、搜索引擎工作原理 当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果。深究其背后的故事,搜索引擎做了很...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • Python-02进阶-07代码优化技巧

    代码优化技巧 优化原则 核心技巧 其他技巧 Python 代码性能优化技巧 常用代码优化技巧 sort()优于so...

网友评论

      本文标题:一些前端优化技巧

      本文链接:https://www.haomeiwen.com/subject/kmmefxtx.html